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
   

   View Slide

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
   

   View Slide

3. View Slide

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
   

   View Slide

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
   

   View Slide

6. Google met en avant la mobilité
   Que ce soit un site responsive, ou un site mobile dédié
   

   View Slide

7. Stratégie mobile
   Quelles techniques pour un site adapté mobile aujourd’hui ?
   Luke Wroblewsli
   

   View Slide

8. Le site mobile dédié
   

   View Slide

9. Le site responsive
   

   View Slide

10. View Slide

11. Je développe, teste, recette pour tous les appareils en même temps
    Un processus unifié
    

    View Slide

12. Je développe, teste, recette pour tous les appareils en même temps
    Un processus unifié
    Image Luke Wroblewski
    

    View Slide

13. SEO friendly : une seule URL, une seule stratégie, partages simplifiés
    SEO friendly
    

    View Slide

14. View Slide

15. Quelle stratégie pour mon site ?
    

    View Slide

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
    

    View Slide

17. D’une beta disponible uniquement sur mobile à un site responsive pour tous
    BBC news beta responsive
    

    View Slide

18. Prendre un site existant, détruire les largeurs, le faire “rentrer” sur mobile
    

    View Slide

19. Performance, ergonomie : ça se passe généralement mal
    Retrofitting — inconvénient
    

    View Slide

20. On repart de zéro et on refond tout le site avec une approche Mobile First
    

    View Slide

21. Mobile First : amélioration progressive
    Niveau 1 : HTML / CSS
    simples, qui marchent
    partout

    Bonus : SEO friendly,
    accessible, standard
    Most  Read
    

    View Slide

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');
    

    View Slide

23. Adapter son site sur mobile
    conseils et mise en pratique tout au long du projet
    

    View Slide

24. Architecture d’information &
    travail sur les contenus
    

    View Slide

25. Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture
    Revoir l’architecture d’information en amont
    

    View Slide

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
    

    View Slide

27. Réseaux sociaux, maps, contenus tiers en iframes …
    La performance c’est du design
    

    View Slide

28. À retenir
    Les plus gros soucis du mobile sont
    des soucis de communication
    

    View Slide

29. Mise en page, typographie,
    posons les bases flexibles
    

    View Slide

30. Définir les points de rupture (breakpoints) en fonction du contenu
    

    View Slide

31. Gridlover + Codepen = mettre en place un rythme typographique responsive directement dans le navigateur
    Typographie responsive
    

    View Slide

32. Font asynchrones : le moindre mal
    Performance – Rester raisonnable avec les fonts
    

    View Slide

33. À retenir
    Penser la chorégraphie de contenu et
    la typographie en amont
    

    View Slide

34. S'adapter à la “contrainte”
    du touch
    

    View Slide

35. Repenser l’interface au touch pour les petits écrans
    Pas de survol (:hover)
    

    View Slide

36. Deux actions possibles, une au survol une autre au clic ➔ conflit sur mobile.
    Le problème de l’action survol (;hover) / clique
    

    View Slide

37. Taille des boutons + Feedback utilisateur
    Optimisation visuelle des éléments cliquables
    

    View Slide

38. Remplacer des boutons par une action : swipe, pinch, etc.
    Le mobile, nouveau terrain de jeu
    

    View Slide

39. À retenir
    Testez les interactions le plus tôt
    possible sur de VRAIS appareils
    

    View Slide

40. Préparer ses images au mobile
    

    View Slide

41. CSS3, SVG, fonts-icon
    Les formats vectoriels
    SVG PNG, JPG
    

    View Slide

42. Charger tardivement
    Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
    

    View Slide

43. Optimiser à l’œil
    Optimiser les images
    

    View Slide

44. Optimiser en masse : ImageOptim sur Mac, PNGGauntlet et JPEGmini sur Windows
    Optimiser les images
    

    View Slide

45. À retenir
    Utiliser le bon format et embrasser
    les techniques responsives
    

    View Slide

46. Adapter son menu de navigation
    

    View Slide

47. Attention à certaines patterns de navigation
    Navigation, les faux amis
    

    View Slide

48. Système de « portes » ou « dropdown », à chaque site sa navigation
    Gestion de multi-niveaux
    

    View Slide

49. Attention à la place des éléments « fixés » quand l’écran n’est plus assez haut
    Navigation en position: fixed;
    

    View Slide

50. À retenir
    Proposer la navigation la moins
    intrusive possible
    

    View Slide

51. Intégration et mise en prod : accélérer
    mon site
    

    View Slide

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
    

    View Slide

53. Cache serveur, cache client, compression, keep-alive, temps de génération
    Vérifier la configuration du serveur
    

    View Slide

54. PageSpeed Insights
    Tester la performance sur mobile
    

    View Slide

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
    

    View Slide

56. À retenir
    Se fixer des objectifs de performance
    et s’y tenir
    

    View Slide

57. Les petits plus
    

    View Slide

58. Fluidifier l’interface, apporter du feedback voir masquer un chargement un peu lent
    La valeur ajoutée des animations
    

    View Slide

59. Attention à la fluidité des mouvements
    Des animations ou un scroll saccadés ➔ baisse de la qualité perçue
    

    View Slide

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
    

    View Slide

61. Vers une expérience « native-like »
    Offline, notifications Push
    

    View Slide

62. En conclusion
    Testez, testez, testez !
    

    View Slide

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
    

    View Slide