Introduction au Responsive Webdesign

Transcript

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 @jonathanpath // #rwdiesa Vrai ou Faux ? Le responsive design consiste à faire en sorte qu’un site puisse s’afficher correctement sur ordinateurs, tablettes et mobiles.
5. 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
6. 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
7. ATTENTION @jonathanpath // #rwdiesa Avant d’être des stars du responsive, soyons des stars du HTML/CSS
8. MAUVAIS EXEMPLE @jonathanpath // #rwdiesa Un site responsive qui aurait mieux valut ne pas l’être
9. 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à...
10. 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 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.
11. 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
12. 1.2 MOBILE @jonathanpath // #rwdiesa Source : Inmobi Comment accédons-nous au web? utilisent leur mobile comme unique source Internet 59% 34% Monde France
13. 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
14. 1.2 MOBILE @jonathanpath // #rwdiesa Dans le monde entier - Source : DCI Futur prometteur? Mobinautes Internautes Et ensuite? 2013 Mobinautes > Internautes 1,9 milliard 800 millions 2009 2015 2009 2015 1,6 milliard 1,4 milliard
15. 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 26M Population Mobile Smartphone 29% 19M Mobinautes 20% 13M Mobinautes très actifs
16. 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
17. 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
18. 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
19. 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
20. 1.2 MOBILE @jonathanpath // #rwdiesa Source : Inmobi M-commerce des internautes ont acheté en ligne via leur mobile en mai 2012 53% 39% Monde France
21. 1.2 MOBILE @jonathanpath // #rwdiesa Source : Livre Mobile First Web vs Applications 7% 8% Blackberry iPhone 14% Web Part des Utilisateurs Twitter qui accèdent au réseau sur Mobile 4% Autres ...
22. 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
23. 1.3 TABLETTES @jonathanpath // #rwdiesa Source : GFK Haute croissance en France 3 millions 2012 2011 2010 1.5 millions 440 000
24. 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
25. 1.3 TABLETTES @jonathanpath // #rwdiesa Source : GFK T-commerce en France 40% achètent en ligne chaque mois préfèrent acheter sur tablettes que sur ordinateur 50%
26. 2. MOBILE FIRST @jonathanpath // #rwdiesa L’essor du mobile a déclenché l’approche du responsive webdesign
27. 2.1 EXIGENCES @jonathanpath // #rwdiesa Source : StrangeLoop Cela vaut le coup d’optimiser 1 seconde de chargement en plus 4s max le temps que 60% sont prêts à attendre 12s le temps de chargement moyen -10% de pages vues
28. 2.2 CONNEXIONS MOYENNES @jonathanpath // #rwdiesa Source : Akamai 2012 En France en 2012 2,5 Mb/s 4.8 Mb/s débit très variable (métro, campagne, wifi)
29. 2.3 CAS PRATIQUE @jonathanpath // #rwdiesa Source : Tests personnels & sur Akamai Temps de chargement de la version mobile face à la version bureau 2x plus long Responsive 2x plus long 1.5x plus long Egalité Version mobile Pas d’adaptations Pas d’adaptations Egalité 1.5x plus long 3x plus rapide Egalité Version mobile Responsive Version mobile Responsive
30. 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
31. 2.3 GARDER L’ESSENTIEL @jonathanpath // #rwdiesa On commence un site en par pensant aux contraintes mobile écrans petits Temps de chargement plus 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 Contraintes Solutions
32. 2.3 MOBILE FIRST @jonathanpath // #rwdiesa Exemple avec Flickr
33. 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
34. 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 ?
35. 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/
36. 2.5 NOUVEAU PROCESS @jonathanpath // #rwdiesa de création de maquettes design / wireframes RESPONSIVE DATING
37. PROJETS @jonathanpath // #rwdiesa Première approche
38. 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?