responsive webdesign-introduction

Download Responsive webdesign-introduction

Post on 23-Dec-2014

3.061 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. ?RESPONSIVE WEBDESIGN@jonathanpath // #rwdiesa

2. RESPONSIVE WEBDESIGN@jonathanpath // #rwdiesa 3. RESPONSIVE WEBDESIGNLE DESIGN QUI SADAPTE A TOUTES LES SITUATIONS (OU PAS) @jonathanpath // #rwdiesa 4. DEFINITIONVrai ou Faux ? Le responsive design consiste faireen sorte quun site puisse sacher correctement surordinateurs, tablettes et mobiles. @jonathanpath // #rwdiesa 5. DEFINITIONVrai ou Faux ? Le responsive design consiste faireen sorte quun site puisse sacher correctement surordinateurs, 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 :IE6MobilesLunettes GoogleTablettesTVAveuglestout en gardant la mme url@jonathanpath // #rwdiesa 7. ATTENTIONAvant dtre des stars du responsive,soyons des stars du HTML/CSS @jonathanpath // #rwdiesa 8. MAUVAIS EXEMPLEUn site responsive qui aurait mieux valut ne pas ltre@jonathanpath // #rwdiesa 9. MAUVAIS EXEMPLEUn site qui aurait mieux valut tre responsive ?Lundi 6 novembre au soir, je recherche Obama sur Google.Le premier rsultat 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 responsiveLes statistiques suivantes sont extraites de direntes 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 disparits. @jonathanpath // #rwdiesa 11. 1.1 TAILLES ET APPAREILSDe plus en plus de tailles dcran dirents1366x7681024x768 1280x800 1280x7681680x1050 1920x1080 1440x900 320x480 1600x9001680x1050 768x1024 Dans le monde entier - Source : W3Counter@jonathanpath // #rwdiesa 12. 1.2 MOBILEComment accdons-nous au web?59% Monde 34% Franceutilisent leur mobile comme unique source Internet Source : Inmobi@jonathanpath // #rwdiesa 13. 1.2 MOBILEQuelle plateforme pour surfer ? 9% 32% 30%29%Surtout via PC Autant via PC que mobile Surtout via mobile Uniquement via mobileUniquement en France - Source : Inmobi@jonathanpath // #rwdiesa 14. 1.2 MOBILEFutur prometteur? MobinautesInternautesEt ensuite?2015 1,92015 1,6 milliard 2013 Mobinautes > Internautesmilliard20091,4 milliard 800 millions 2009 Dans le monde entier - Source : DCI @jonathanpath // #rwdiesa 15. 1.2 MOBILEEquipement et connexions des franais 65M55M 26M 19M 13M Mobile SmartphoneMobinautesMobinautes trs actifsPopulation 85%40%29% 20%Valeurs en millions - Source : Analyse de lagence Dagobert / ARCEP / Mdiamtrie @jonathanpath // #rwdiesa 16. 1.2 MOBILEPart de march smartphones des constructeurs en France Constructeurs March smartphoneSamsung 27,3%Apple 25,2%Nokia 15,8% Source : ComScore 2012@jonathanpath // #rwdiesa 17. 1.2 MOBILE Part de march des navigateurs mobiles...Monde22%21% 20% 11% 26%France 37%2%46% 1%14%Source : DCI (Monde) - StatCounter (France)@jonathanpath // #rwdiesa 18. 1.2 MOBILE Lieux dutilisation du smartphone en FranceOn peut imaginer lutilisateur comme 1 il & 1 pouce (une bb dans la main, en train de faire les courses...)-Luke Wroblewsi / Mobile FirstDomicile Travail Dplacement MagasinRestaurant Caf Transports Cabinet AroportEcole Source : Our Mobile Planet 2012 @jonathanpath // #rwdiesa 19. 1.2 MOBILESatisfaction relative la consultation de sites web sur un smartphone Il y a des sites que jai carrment arrt de visiter sur mobile tellement cest la galre. -Anonyme, discussion de couloir19% 36% 29%14%3% Pas du toutPas vraimentIndirent SatisfaitTout fait Source : Our Mobile Planet 2012@jonathanpath // #rwdiesa 20. 1.2 MOBILE M-commerce 53% Monde 39% Francedes internautes ont achet en lignevia leur mobile en mai 2012 Source : Inmobi@jonathanpath // #rwdiesa 21. 1.2 MOBILEWeb vs Applications ...Part des Utilisateurs Twitter 14%8% 7% 4%WebiPhone Blackberry Autres qui accdent au rseausur Mobile Source : Livre Mobile First@jonathanpath // #rwdiesa 22. 1.2 MOBILE Attention bien interprter les statistiques Ce nest pas parce quil y a beaucoup de mobinautesquil vont aller visiter tous lessites que vous allez faire @jonathanpath // #rwdiesa 23. 1.3 TABLETTESHaute croissance en France3 millions1.5 millions440 0002010 2011 2012Source : GFK@jonathanpath // #rwdiesa 24. 1.3 TABLETTES Comportements 70%57%des utilisateurs lutilisentdes utilisateurs lutilisentdans leur litpendant quils regarde la tl Source : GFK@jonathanpath // #rwdiesa 25. 1.3 TABLETTES T-commerce en France 40%50%achtent en ligne prfrent acheter sur tabletteschaque mois que sur ordinateurSource : GFK@jonathanpath // #rwdiesa 26. 2. MOBILE FIRSTLessor du mobile a dclench lapproche du responsive webdesign @jonathanpath // #rwdiesa 27. 2.1 EXIGENCESCela vaut le coup doptimiser 4s max12s le temps que 60%le temps desont prts attendre chargement moyen1 seconde de chargement en plus-10% de pages vuesSource : StrangeLoop@jonathanpath // #rwdiesa 28. 2.2 CONNEXIONS MOYENNES En France en 2012(mtro, campagne, wi)dbit trs variable 4.8 Mb/s2,5 Mb/s Source : Akamai 2012 @jonathanpath // #rwdiesa 29. 2.3 CAS PRATIQUETemps de chargement de la version mobile face la version bureau2x plus long 2x plus long1.5x plus longEgalitResponsive Pas dadaptationsPas dadaptations Version mobileEgalit1.5x plus long 3x plus rapide Egalit Version mobileResponsive Version mobileResponsiveSource : Tests personnels & sur Akamai@jonathanpath // #rwdiesa 30. 2.3 GARDER LESSENTIELUne fois que les gens utilisent la version mobile, il nest pas rare quils rclament que la version de bureau soit "aussi simple" - Luke Wroblewsi dans le livre Mobile First@jonathanpath // #rwdiesa 31. 2.3 GARDER LESSENTIEL On commence un site en par pensant aux contraintes mobileSolutions Contraintes Focus sur lesTemps de chargement fonctionnalits les plus long plus importantescrans petitsZones cliquables plus grandes Pas deet de survolErgonomie inspire des applications@jonathanpath // #rwdiesa 32. 2.3 MOBILE FIRSTExemple avec Flickr@jonathanpath // #rwdiesa 33. 2.4 RESPONSIVE OU PAS ?Analyse de sites / Battles 1 contre 1FacebookSmashingMagazine Ebay Pages jaunesComment a marche? Lquipe WikipdiaFNACLouis VuittonMto France Microsoft Awwwards@jonathanpath // #rwdiesa 34. 2.4 RESPONSIVE OU PAS ?Battles 1 contre 1- dnir lutilisateur mobile/tablette type : Comment lutilisateur 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 MOBILECest 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 - Fentre modale : http://gonefreelancing.com/ (cliquer sur more) - Liste de pays : http://www.ikea.com/@jonathanpath // #rwdiesa 36. 2.5 NOUVEAU PROCESS de cration de maquettes design / wireframesRESPONSIVEDATING @jonathanpath // #rwdiesa 37. PROJETSPremire approche@jonathanpath // #rwdiesa 38. PROJETde cration de maquettes design / wireframes- Blog de recettes de cuisine- Site institutionnel dune startup qui cr des applications Facebook- Site dactualit- Site plein cran pour une marque avec un eet parallaxe- Portfolio- Site dun vnement web- Site dun photographe- Site dun restaurant- Application avec golocalisation- Site dun lm- Site dune association- Ou de votre choix?@jonathanpath // #rwdiesa