responsive webdesign-introduction

RESPONSIVE WEBDESIGN

@jonathanpath // #rwdiesa

?

RESPONSIVE WEBDESIGN

@jonathanpath // #rwdiesa

RESPONSIVE WEBDESIGNLE DESIGN QUI S’ADAPTE A TOUTES LES SITUATIONS (OU PAS)

@jonathanpath // #rwdiesa

DEFINITION

@jonathanpath // #rwdiesa

Vrai ou Faux ? Le responsive design consiste à faire en sorte qu’un site puisse s’afficher correctement sur

ordinateurs, tablettes et mobiles.

DEFINITION

@jonathanpath // #rwdiesa

Vrai ou Faux ? Le responsive design consiste à faire en sorte qu’un site puisse s’afficher correctement sur

ordinateurs, tablettes et mobiles.

On peut faire mieux

DEFINITION

@jonathanpath // #rwdiesa

Un site responsive est potentiellement capable de se transformer en un site adapté pour :

Tablettes

Mobiles

Aveugles

IE6

Lunettes Google

TV

tout en gardant la même url

ATTENTION

@jonathanpath // #rwdiesa

Avant d’être des stars du responsive,soyons des stars du HTML/CSS

MAUVAIS EXEMPLE

@jonathanpath // #rwdiesa

Un site responsive qui aurait mieux valut ne pas l’être

MAUVAIS EXEMPLE

@jonathanpath // #rwdiesa

Un site qui aurait mieux valut être responsive ?

Lundi 6 novembre au soir, je recherche «Obama» sur Google. Le premier résultat est un article de TF1, je clique, et là...

1. STATISTIQUES

@jonathanpath // #rwdiesa

Pour savoir pourquoi, à quel niveau et dans quels cas faire du responsive

Les statistiques suivantes sont extraites de différentes études ou outils de statistiquessur le mobile, les tablettes et les internautes en France et dans le monde. De ce fait, il pourrait y avoir certaines disparités.

1.1 TAILLES ET APPAREILS

@jonathanpath // #rwdiesa

1366x768

1280x800

1920x1080

1600x900

1024x768

1440x900

1280x768

1680x1050

1680x1050

320x480

768x1024

Dans le monde entier - Source : W3Counter

De plus en plus de tailles d’écran différents

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Inmobi

Comment accédons-nous au web?

utilisent leur mobile comme unique source Internet

59% 34% Monde France

1.2 MOBILE

@jonathanpath // #rwdiesa

Uniquement en France - Source : Inmobi

Quelle plateforme pour surfer ?

29% Uniquement via mobile

30% Surtout via mobile

32% Autant via PC que mobile

9% Surtout via PC

1.2 MOBILE

@jonathanpath // #rwdiesa

Dans le monde entier - Source : DCI

Futur prometteur?

Mobinautes Internautes Et ensuite?

2013Mobinautes > Internautes1,9

milliard

800 millions2009

2015

2009

2015 1,6 milliard

1,4 milliard

1.2 MOBILE

@jonathanpath // #rwdiesa

Equipement et connexions des français

Valeurs en millions - Source : Analyse de l’agence Dagobert / ARCEP / Médiamétrie

85% 40%

65M 55M 26MPopulation Mobile Smartphone

29%

19MMobinautes

20%

13MMobinautes très actifs

Constructeurs Marché smartphone

Samsung 27,3 %

Apple 25,2 %

Nokia 15,8 %

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : ComScore 2012

Part de marché smartphones des constructeurs en France

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : DCI (Monde) - StatCounter (France)

Part de marché des navigateurs mobiles

...

22% 21% 20% 11% 26%

37% 2% 46% 1% 14%

Monde

France

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Our Mobile Planet 2012

Lieux d’utilisation du smartphone en France

Domicile

Travail Déplacement Magasin

Restaurant Transports

Aéroport

Ecole

Café

Cabinet

On peut imaginer l’utilisateur comme 1 œil & 1 pouce (une bébé dans la main, en train de faire les courses...) -Luke Wroblewsi / Mobile First

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Our Mobile Planet 2012

Satisfaction relative à la consultation de sites web sur un smartphone

Il y a des sites que j’ai carrément arrêté de visiter sur mobile tellement c’est la galère.-Anonyme, discussion de couloir

19%Pas du tout

36%Pas vraiment

29%Indifférent

14%Satisfait

3%Tout à fait

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Inmobi

M-commerce

des internautes ont acheté en lignevia leur mobile en mai 2012

53% 39% Monde France

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Livre Mobile First

Web vs Applications

7%8%BlackberryiPhone

14%Web

Part des Utilisateurs Twitter qui accèdent au réseau

sur Mobile

4%Autres

...

1.2 MOBILE

@jonathanpath // #rwdiesa

Attention à bien interpréter les statistiques

Ce n’est pas parce qu’il y a beaucoup de mobinautes

qu’il vont aller visiter tous les sites que vous allez faire

1.3 TABLETTES

@jonathanpath // #rwdiesa

Source : GFK

Haute croissance en France

3 millions

201220112010

1.5 millions440 000

1.3 TABLETTES

@jonathanpath // #rwdiesa

Source : GFK

Comportements

70%des utilisateurs l’utilisent

pendant qu’ils regarde la télé

57%des utilisateurs l’utilisent

dans leur lit

1.3 TABLETTES

@jonathanpath // #rwdiesa

Source : GFK

T-commerce en France

40%achètent en ligne

chaque moispréfèrent acheter sur tablettes

que sur ordinateur

50%

2. MOBILE FIRST

@jonathanpath // #rwdiesa

L’essor du mobile a déclenché l’approche du responsive webdesign

2.1 EXIGENCES

@jonathanpath // #rwdiesa

Source : StrangeLoop

Cela vaut le coup d’optimiser

1 secondede chargement en plus

4s maxle temps que 60%

sont prêts à attendre

12sle temps de

chargement moyen

-10% de pages vues

2.2 CONNEXIONS MOYENNES

@jonathanpath // #rwdiesa

Source : Akamai 2012

En France en 2012

2,5Mb/s

4.8 Mb/s

débi

t trè

s va

riabl

e (m

étro

, cam

pagn

e, w

ifi)

2.3 CAS PRATIQUE

@jonathanpath // #rwdiesa

Source : Tests personnels & sur Akamai

Temps de chargement de la version mobile face à la version bureau

2x plus longResponsive

2x plus long 1.5x plus long EgalitéVersion mobilePas d’adaptations Pas d’adaptations

Egalité 1.5x plus long 3x plus rapide EgalitéVersion mobile Responsive Version mobile Responsive

2.3 GARDER L’ESSENTIEL

@jonathanpath // #rwdiesa

Une fois que les gens utilisent la version mobile, il n'est pas rare qu'ils réclament que la version de bureau soit "aussi simple"

- Luke Wroblewsi dans le livre Mobile First

2.3 GARDER L’ESSENTIEL

@jonathanpath // #rwdiesa

On commence un site en par pensant aux contraintes mobile

écrans petits

Temps de chargementplus long

Focus sur les fonctionnalités les plus importantes

Zones cliquables plus grandes

Pas d’effet de survol

Zones cliquables plus grandes

Ergonomie inspirée des applications

ContraintesSolutions

2.3 MOBILE FIRST

@jonathanpath // #rwdiesa

Exemple avec Flickr

2.4 RESPONSIVE OU PAS ?

@jonathanpath // #rwdiesa

Analyse de sites / Battles 1 contre 1

Facebook SmashingMagazine Ebay Pages jaunes

Comment ça marche? L’équipe Wikipédia FNAC

Louis Vuitton Météo France Microsoft Awwwards

2.4 RESPONSIVE OU PAS ?

@jonathanpath // #rwdiesa

Battles 1 contre 1

- définir l’utilisateur mobile/tablette type : • Comment l’utilisateur peut-il arriver sur le site?• Quelles informations cherche-t-il?• Où peut-il être? (dans les transports? dans son lit? au boulot?)

- quelles sont les adaptations qui ont été faites ?

- est-ce que les bons choix ont été fait ?

2.5 ERGONOMIE MOBILE

@jonathanpath // #rwdiesa

C’est vous les experts / proposez une version mobile par groupes de 4

- Carte de france interactive : http://leboncoin.fr/ - Carousel : http://www.sho.com/sho/home - Tarifs : http://wufoo.com/signup/ - Formulaire avancé : https://order.emporiumpies.com/ - Galerie photo : http://500px.com/team - Fenêtre modale : http://gonefreelancing.com/ (cliquer sur “more”) - Liste de pays : http://www.ikea.com/

2.5 NOUVEAU PROCESS

@jonathanpath // #rwdiesa

de création de maquettes design / wireframes

RESPONSIVEDATING

PROJETS

@jonathanpath // #rwdiesa

Première approche

PROJET

@jonathanpath // #rwdiesa

de création de maquettes design / wireframes

- Blog de recettes de cuisine - Site institutionnel d’une startup qui créé des applications Facebook - Site d’actualité - Site plein écran pour une marque avec un effet parallaxe - Portfolio - Site d’un évènement web - Site d’un photographe - Site d’un restaurant - Application avec géolocalisation - Site d’un film - Site d’une association - Ou de votre choix?