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.
1600x900 1024x768 1440x900 1280x768 1680x1050 1680x1050 320x480 768x1024 Dans le monde entier - Source : W3Counter De plus en plus de tailles d’écran différents
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
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
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
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
& 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
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
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
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
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 ?
/ 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/
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
michaelherold
aleyda
davidcarrasco
chriscoyier
greggifford
keathley
jonoalderson
shlominoach
mongodb
tessaabrams
