Faites rentrer votre éléphant dans une Smart™ - Bonnes pratiques sur mobiles

Il parait que c’est la première impression qui compte. Cette première impression est aujourd’hui à portée des doigts de vos futurs clients, partout et à n’importe quel moment. L’utilisateur mobile est ultra connecté et de plus en plus exigeant.

Un, deux, trois secondes de chargement dans le vide, vous venez de perdre la moitié de vos utilisateurs. Menu inutilisable en tactile ? Boutons trop petits ? Contenus difficilement lisibles ? Et voilà l’autre moitié qui s’en va en ayant noté d’éviter votre marque à l’avenir.

Pourtant sur cette première page vous avez besoin de votre carrousel à images géantes, de votre régie publicitaire et tous les contenus qui semblent parfois si importants.

Votre défi : faire rentrer cet éléphant dans une Smart™ qui continue à rouler à 130km/h, sans chausse pied. Pourquoi ne pas en profiter pour donner à votre Smart™ des ailes en proposant à vos utilisateurs de nouvelles interactions et façons de naviguer ?

Alors, prêts à relever ensemble le défi ?

Transcript

1. Faites rentrer votre éléphant 
 dans une Smart™ Bonnes pratiques sur mobiles Stéphanie Walter — Jean-Pierre Vincent
2. Designer web et mobile, spécialisée en interface et expérience utilisateurs Freelance // Alsacréations braincracking.org Développeur depuis 2000 PHP, JS Yahoo!, houra.fr, startups … Freelance WebPerf Prof, auteur, confs … Jean-Pierre VINCENT @WalterStephanie @theystolemynick inpixelitrust.fr
4. Il y a aujourd’hui presque 3 milliards d’abonnement internet sur mobile dans le monde Des utilisateurs de plus en plus « mobile only » Image Clemens Löcker
5. Pour 83% des utilisateurs, une expérience équivalente sur tous les appareils est importante Un accès au contenu indépendamment de l’appareil Source
6. Google met en avant la mobilité Que ce soit un site responsive, ou un site mobile dédié
7. Stratégie mobile Quelles techniques pour un site adapté mobile aujourd’hui ? Luke Wroblewsli
8. Le site mobile dédié
9. Le site responsive
11. Je développe, teste, recette pour tous les appareils en même temps Un processus unifié
12. Je développe, teste, recette pour tous les appareils en même temps Un processus unifié Image Luke Wroblewski
13. SEO friendly : une seule URL, une seule stratégie, partages simplifiés SEO friendly
15. Quelle stratégie pour mon site ?
16. Planter l’idée d’une stratégie mobile à plus long terme Site en m. dédié (ou beta en m. responsive) Image par Brad Frost
17. D’une beta disponible uniquement sur mobile à un site responsive pour tous BBC news beta responsive
18. Prendre un site existant, détruire les largeurs, le faire “rentrer” sur mobile
19. Performance, ergonomie : ça se passe généralement mal Retrofitting — inconvénient
20. On repart de zéro et on refond tout le site avec une approche Mobile First
21. Mobile First : amélioration progressive Niveau 1 : HTML / CSS simples, qui marchent partout
 Bonus : SEO friendly, accessible, standard <a  href=  "/most-­‐read.html">Most  Read</a>
22. Mobile First : amélioration progressive Niveau 2 : ajout d’AJAX, d’animations, de pubs, d’analytics, de vidéo, de graphiques interactifs … en fonction des capacités réelles ! $('#col').load('/most-­‐read.html');
23. Adapter son site sur mobile conseils et mise en pratique tout au long du projet
24. Architecture d’information & travail sur les contenus
25. Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture Revoir l’architecture d’information en amont
26. Trouver des alternatives et planifier les écrans d’attente, optimiser le code en fin de projet La performance c’est du design Sur la maquette : une vraie mise en avant En vrai, pendant 8 secondes
27. Réseaux sociaux, maps, contenus tiers en iframes … La performance c’est du design
28. À retenir Les plus gros soucis du mobile sont des soucis de communication
29. Mise en page, typographie, posons les bases flexibles
30. Définir les points de rupture (breakpoints) en fonction du contenu
31. Gridlover + Codepen = mettre en place un rythme typographique responsive directement dans le navigateur Typographie responsive
32. Font asynchrones : le moindre mal Performance – Rester raisonnable avec les fonts
33. À retenir Penser la chorégraphie de contenu et la typographie en amont
34. S'adapter à la “contrainte” du touch
35. Repenser l’interface au touch pour les petits écrans Pas de survol (:hover)
36. Deux actions possibles, une au survol une autre au clic ➔ conflit sur mobile. Le problème de l’action survol (;hover) / clique
37. Taille des boutons + Feedback utilisateur Optimisation visuelle des éléments cliquables
38. Remplacer des boutons par une action : swipe, pinch, etc. Le mobile, nouveau terrain de jeu
39. À retenir Testez les interactions le plus tôt possible sur de VRAIS appareils
40. Préparer ses images au mobile
41. CSS3, SVG, fonts-icon Les formats vectoriels SVG PNG, JPG
42. Charger tardivement Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
43. Optimiser à l’œil Optimiser les images
44. Optimiser en masse : ImageOptim sur Mac, PNGGauntlet et JPEGmini sur Windows Optimiser les images
45. À retenir Utiliser le bon format et embrasser les techniques responsives
46. Adapter son menu de navigation
47. Attention à certaines patterns de navigation Navigation, les faux amis
48. Système de « portes » ou « dropdown », à chaque site sa navigation Gestion de multi-niveaux
49. Attention à la place des éléments « fixés » quand l’écran n’est plus assez haut Navigation en position: fixed;
50. À retenir Proposer la navigation la moins intrusive possible
51. Intégration et mise en prod : accélérer mon site
52. Combien coûte le temps ? • DoubleClick – +12% de clics en gagnant 1s • e-commerce – 60% d’abandon après 4 secondes de chargement • Google – Critère de référencement – Influence le taux de crawl Image Tax Credits
53. Cache serveur, cache client, compression, keep-alive, temps de génération Vérifier la configuration du serveur
54. PageSpeed Insights Tester la performance sur mobile
55. Les bases de la perf côté front Hier : • Multi domaine • Scripts en bas de page Aujourd’hui, fusionner : • CSS • JavaScript • Petites images Demain : HTTP/2 Concatenation via Shutterstock
56. À retenir Se fixer des objectifs de performance et s’y tenir
57. Les petits plus
58. Fluidifier l’interface, apporter du feedback voir masquer un chargement un peu lent La valeur ajoutée des animations
59. Attention à la fluidité des mouvements Des animations ou un scroll saccadés ➔ baisse de la qualité perçue
60. Vers une expérience « native-like » • Icône de lancement (aka favicon) • Changer la couleur de la barre du site (Android) • Lancement en plein écran • Pour les générer : realfavicongenerator.net
61. Vers une expérience « native-like » Offline, notifications Push
62. En conclusion Testez, testez, testez !
63. braincracking.org Jean-Pierre VINCENT @WalterStephanie @theystolemynick inpixelitrust.fr Des questions ? Shared under CC- BY-NC-SA licence http://inpx.it/bonne-pratique-mobile-wpmx2015