1. ?
RESPONSIVE WEBDESIGN
@jonathanpath // #rwdiesa

2. RESPONSIVE WEBDESIGN
@jonathanpath // #rwdiesa

3. RESPONSIVE WEBDESIGN
LE DESIGN QUI S’ADAPTE A TOUTES LES SITUATIONS (OU PAS)
@jonathanpath // #rwdiesa

4. DEFINITION
Vrai ou Faux ? Le responsive design consiste à faire
en sorte qu’un site puisse s’afficher correctement sur
ordinateurs, tablettes et mobiles.
@jonathanpath // #rwdiesa

5. DEFINITION
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
@jonathanpath // #rwdiesa

6. DEFINITION
Un site responsive est potentiellement capable
de se transformer en un site adapté pour :
IE6 Mobiles
Lunettes Google Tablettes
TV Aveugles
tout en gardant la même url
@jonathanpath // #rwdiesa

7. ATTENTION
Avant d’être des stars du responsive,
soyons des stars du HTML/CSS
@jonathanpath // #rwdiesa

8. MAUVAIS EXEMPLE
Un site responsive qui aurait mieux valut ne pas l’être
@jonathanpath // #rwdiesa

9. MAUVAIS EXEMPLE
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à...
@jonathanpath // #rwdiesa

10. 1. STATISTIQUES
Pour savoir pourquoi, à quel niveau et dans quels cas faire du responsive
Les statistiques suivantes sont extraites de différentes études ou outils de statistiques
sur le mobile, les tablettes et les internautes en France et dans le monde. De ce fait, il pourrait y avoir certaines disparités.
@jonathanpath // #rwdiesa

11. 1.1 TAILLES ET APPAREILS
De plus en plus de tailles d’écran différents
1366x768
1024x768
1280x800
1280x768 1680x1050
1920x1080 1440x900
320x480
1600x900 1680x1050 768x1024
Dans le monde entier - Source : W3Counter
@jonathanpath // #rwdiesa

12. 1.2 MOBILE
Comment accédons-nous au web?
59%
Monde
34%
France
utilisent leur mobile comme
unique source Internet
Source : Inmobi
@jonathanpath // #rwdiesa

13. 1.2 MOBILE
Quelle plateforme pour surfer ?
9% 32% 30% 29%
Surtout via PC Autant via PC que mobile Surtout via mobile Uniquement via mobile
Uniquement en France - Source : Inmobi
@jonathanpath // #rwdiesa

14. 1.2 MOBILE
Futur prometteur?
Mobinautes Internautes Et ensuite?
2015 1,9 2015 1,6 milliard
2013
Mobinautes > Internautes
milliard
2009 1,4 milliard
800 millions 2009
Dans le monde entier - Source : DCI
@jonathanpath // #rwdiesa

15. 1.2 MOBILE
Equipement et connexions des français
65M 55M 26M 19M 13M
Mobile Smartphone Mobinautes Mobinautes très actifs
Population
85% 40% 29% 20%
Valeurs en millions - Source : Analyse de l’agence Dagobert / ARCEP / Médiamétrie
@jonathanpath // #rwdiesa

16. 1.2 MOBILE
Part de marché smartphones des constructeurs en France
Constructeurs Marché smartphone
Samsung 27,3 %
Apple 25,2 %
Nokia 15,8 %
Source : ComScore 2012
@jonathanpath // #rwdiesa

17. 1.2 MOBILE
Part de marché des navigateurs mobiles
...
Monde 22% 21% 20% 11% 26%
France 37% 2% 46% 1% 14%
Source : DCI (Monde) - StatCounter (France)
@jonathanpath // #rwdiesa

18. 1.2 MOBILE
Lieux d’utilisation du smartphone en France
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
Domicile
Travail Déplacement Magasin
Restaurant
Café Transports
Cabinet Aéroport
Ecole
Source : Our Mobile Planet 2012
@jonathanpath // #rwdiesa

19. 1.2 MOBILE
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% 36% 29% 14% 3%
Pas du tout Pas vraiment Indifférent Satisfait Tout à fait
Source : Our Mobile Planet 2012
@jonathanpath // #rwdiesa

20. 1.2 MOBILE
M-commerce
53%
Monde
39%
France
des internautes ont acheté en ligne
via leur mobile en mai 2012
Source : Inmobi
@jonathanpath // #rwdiesa

21. 1.2 MOBILE
Web vs Applications
...
Part des Utilisateurs Twitter 14% 8% 7% 4%
Web iPhone Blackberry Autres
qui accèdent au réseau
sur Mobile
Source : Livre Mobile First
@jonathanpath // #rwdiesa

22. 1.2 MOBILE
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
@jonathanpath // #rwdiesa

23. 1.3 TABLETTES
Haute croissance en France
3 millions
1.5 millions
440 000
2010 2011 2012
Source : GFK
@jonathanpath // #rwdiesa

24. 1.3 TABLETTES
Comportements
70% 57%
des utilisateurs l’utilisent
des utilisateurs l’utilisent dans leur lit
pendant qu’ils regarde la télé
Source : GFK
@jonathanpath // #rwdiesa

25. 1.3 TABLETTES
T-commerce en France
40% 50%
achètent en ligne préfèrent acheter sur tablettes
chaque mois que sur ordinateur
Source : GFK
@jonathanpath // #rwdiesa

26. 2. MOBILE FIRST
L’essor du mobile a déclenché l’approche du responsive webdesign
@jonathanpath // #rwdiesa

27. 2.1 EXIGENCES
Cela vaut le coup d’optimiser
4s max 12s
le temps que 60% le temps de
sont prêts à attendre chargement moyen
1 seconde
de chargement en plus
-10% de pages vues
Source : StrangeLoop
@jonathanpath // #rwdiesa

28. 2.2 CONNEXIONS MOYENNES
En France en 2012
(métro, campagne, wifi)
débit très variable
4.8 Mb/s 2,5
Mb/s
Source : Akamai 2012
@jonathanpath // #rwdiesa

29. 2.3 CAS PRATIQUE
Temps de chargement de la version mobile face à la version bureau
2x plus long 2x plus long 1.5x plus long Egalité
Responsive Pas d’adaptations Pas d’adaptations Version mobile
Egalité 1.5x plus long 3x plus rapide Egalité
Version mobile Responsive Version mobile Responsive
Source : Tests personnels & sur Akamai
@jonathanpath // #rwdiesa

30. 2.3 GARDER L’ESSENTIEL
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
@jonathanpath // #rwdiesa

31. 2.3 GARDER L’ESSENTIEL
On commence un site en par pensant aux contraintes mobile
Solutions
Contraintes Focus sur les
Temps de chargement fonctionnalités les
plus long plus importantes
écrans petits Zones cliquables
plus grandes
Pas d’effet de survol
Ergonomie inspirée
des applications
@jonathanpath // #rwdiesa

32. 2.3 MOBILE FIRST
Exemple avec Flickr
@jonathanpath // #rwdiesa

33. 2.4 RESPONSIVE OU PAS ?
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
@jonathanpath // #rwdiesa

34. 2.4 RESPONSIVE OU PAS ?
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 ?
@jonathanpath // #rwdiesa

35. 2.5 ERGONOMIE MOBILE
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/
@jonathanpath // #rwdiesa

36. 2.5 NOUVEAU PROCESS
de création de maquettes design / wireframes
RESPONSIVE
DATING
@jonathanpath // #rwdiesa

37. PROJETS
Première approche
@jonathanpath // #rwdiesa

38. PROJET
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?
@jonathanpath // #rwdiesa