responsive webdesign-introduction

38
RESPONSIVE WEBDESIGN @jonathanpath // #rwdiesa ?

Upload: jonathanpath

Post on 23-Dec-2014

3.098 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Responsive webdesign-introduction

RESPONSIVE WEBDESIGN

@jonathanpath // #rwdiesa

?

Page 2: Responsive webdesign-introduction

RESPONSIVE WEBDESIGN

@jonathanpath // #rwdiesa

Page 3: Responsive webdesign-introduction

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

@jonathanpath // #rwdiesa

Page 4: Responsive webdesign-introduction

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.

Page 5: Responsive webdesign-introduction

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

Page 6: Responsive webdesign-introduction

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

Page 7: Responsive webdesign-introduction

ATTENTION

@jonathanpath // #rwdiesa

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

Page 8: Responsive webdesign-introduction

MAUVAIS EXEMPLE

@jonathanpath // #rwdiesa

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

Page 9: Responsive webdesign-introduction

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à...

Page 10: Responsive webdesign-introduction

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.

Page 11: Responsive webdesign-introduction

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

Page 12: Responsive webdesign-introduction

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Inmobi

Comment accédons-nous au web?

utilisent leur mobile comme unique source Internet

59% 34% Monde France

Page 13: Responsive webdesign-introduction

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

Page 14: Responsive webdesign-introduction

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

Page 15: Responsive webdesign-introduction

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

Page 16: Responsive webdesign-introduction

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

Page 17: Responsive webdesign-introduction

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

Page 18: Responsive webdesign-introduction

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

Page 19: Responsive webdesign-introduction

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

Page 20: Responsive webdesign-introduction

1.2 MOBILE

@jonathanpath // #rwdiesa

Source : Inmobi

M-commerce

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

53% 39% Monde France

Page 21: Responsive webdesign-introduction

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

...

Page 22: Responsive webdesign-introduction

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

Page 23: Responsive webdesign-introduction

1.3 TABLETTES

@jonathanpath // #rwdiesa

Source : GFK

Haute croissance en France

3 millions

201220112010

1.5 millions440 000

Page 24: Responsive webdesign-introduction

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

Page 25: Responsive webdesign-introduction

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%

Page 26: Responsive webdesign-introduction

2. MOBILE FIRST

@jonathanpath // #rwdiesa

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

Page 27: Responsive webdesign-introduction

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

Page 28: Responsive webdesign-introduction

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)

Page 29: Responsive webdesign-introduction

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

Page 30: Responsive webdesign-introduction

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

Page 31: Responsive webdesign-introduction

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

Page 32: Responsive webdesign-introduction

2.3 MOBILE FIRST

@jonathanpath // #rwdiesa

Exemple avec Flickr

Page 33: Responsive webdesign-introduction

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

Page 34: Responsive webdesign-introduction

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 ?

Page 35: Responsive webdesign-introduction

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/

Page 36: Responsive webdesign-introduction

2.5 NOUVEAU PROCESS

@jonathanpath // #rwdiesa

de création de maquettes design / wireframes

RESPONSIVEDATING

Page 37: Responsive webdesign-introduction

PROJETS

@jonathanpath // #rwdiesa

Première approche

Page 38: Responsive webdesign-introduction

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?