Faites rentrer votre éléphant 

dans une Smart™
Bonnes pratiques sur mobiles
Stéphanie Walter — Jean-Pierre Vincent
Designer web et mobile,
spécialisée en interface et
expérience utilisateurs
Freelance // Alsacréations
braincracking.org
D...
Il y a aujourd’hui presque 3 milliards d’abonnement internet sur mobile dans le monde
Des utilisateurs de plus en plus « m...
Pour 83% des utilisateurs, une expérience équivalente sur tous les appareils est importante
Un accès au contenu indépendam...
Google met en avant la mobilité
Que ce soit un site responsive, ou un site mobile dédié
Stratégie mobile
Quelles techniques pour un site adapté mobile aujourd’hui ?
Luke Wroblewsli
Le site mobile dédié
Le site responsive
Je développe, teste, recette pour tous les appareils en même temps
Un processus unifié
Je développe, teste, recette pour tous les appareils en même temps
Un processus unifié
Image Luke Wroblewski
SEO friendly : une seule URL, une seule stratégie, partages simplifiés
SEO friendly
Quelle stratégie pour mon site ?
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
D’une beta disponible uniquement sur mobile à un site responsive pour tous
BBC news beta responsive
Prendre un site existant, détruire les largeurs, le faire “rentrer” sur mobile
Performance, ergonomie : ça se passe généralement mal
Retrofitting — inconvénient
On repart de zéro et on refond tout le site avec une approche Mobile First
Mobile First : amélioration progressive
Niveau 1 : HTML / CSS
simples, qui marchent
partout

Bonus : SEO friendly,
accessi...
Mobile First : amélioration progressive
Niveau 2 : ajout d’AJAX,
d’animations, de pubs,
d’analytics, de vidéo, de
graphiqu...
Adapter son site sur mobile
conseils et mise en pratique tout au long du projet
Architecture d’information &
travail sur les contenus
Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture
Revoir l’architecture d’informati...
Trouver des alternatives et planifier les écrans d’attente, optimiser le code en fin de projet
La performance c’est du des...
Réseaux sociaux, maps, contenus tiers en iframes …
La performance c’est du design
À retenir
Les plus gros soucis du mobile sont
des soucis de communication
Mise en page, typographie,
posons les bases flexibles
Définir les points de rupture (breakpoints) en fonction du contenu
Gridlover + Codepen = mettre en place un rythme typographique responsive directement dans le navigateur
Typographie respon...
Font asynchrones : le moindre mal
Performance – Rester raisonnable avec les fonts
À retenir
Penser la chorégraphie de contenu et
la typographie en amont
S'adapter à la “contrainte”
du touch
Repenser l’interface au touch pour les petits écrans
Pas de survol (:hover)
Deux actions possibles, une au survol une autre au clic ➔ conflit sur mobile.
Le problème de l’action survol (;hover) / cl...
Taille des boutons + Feedback utilisateur
Optimisation visuelle des éléments cliquables
Remplacer des boutons par une action : swipe, pinch, etc.
Le mobile, nouveau terrain de jeu
À retenir
Testez les interactions le plus tôt
possible sur de VRAIS appareils
Préparer ses images au mobile
CSS3, SVG, fonts-icon
Les formats vectoriels
SVG PNG, JPG
Charger tardivement
Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
Optimiser à l’œil
Optimiser les images
Optimiser en masse : ImageOptim sur Mac, PNGGauntlet et JPEGmini sur Windows
Optimiser les images
À retenir
Utiliser le bon format et embrasser
les techniques responsives
Adapter son menu de navigation
Attention à certaines patterns de navigation
Navigation, les faux amis
Système de « portes » ou « dropdown », à chaque site sa navigation
Gestion de multi-niveaux
Attention à la place des éléments « fixés » quand l’écran n’est plus assez haut
Navigation en position: fixed;
À retenir
Proposer la navigation la moins
intrusive possible
Intégration et mise en prod : accélérer
mon site
Combien coûte le
temps ?
• DoubleClick
– +12% de clics en gagnant 1s
• e-commerce
– 60% d’abandon après 4
secondes de char...
Cache serveur, cache client, compression, keep-alive, temps de génération
Vérifier la configuration du serveur
PageSpeed Insights
Tester la performance sur mobile
Les bases de la perf côté front
Hier :
• Multi domaine
• Scripts en bas de page
Aujourd’hui, fusionner :
• CSS
• JavaScrip...
À retenir
Se fixer des objectifs de performance
et s’y tenir
Les petits plus
Fluidifier l’interface, apporter du feedback voir masquer un chargement un peu lent
La valeur ajoutée des animations
Attention à la fluidité des mouvements
Des animations ou un scroll saccadés ➔ baisse de la qualité perçue
Vers une expérience « native-like »
• Icône de lancement (aka
favicon)
• Changer la couleur de la
barre du site (Android)
...
Vers une expérience « native-like »
Offline, notifications Push
En conclusion
Testez, testez, testez !
braincracking.org
Jean-Pierre VINCENT
@WalterStephanie
@theystolemynick
inpixelitrust.fr
Des questions ?
Shared under CC- ...
Faites rentrer votre éléphant dans une Smart™ : bonnes pratiques sur mobiles
Faites rentrer votre éléphant dans une Smart™ : bonnes pratiques sur mobiles
Faites rentrer votre éléphant dans une Smart™ : bonnes pratiques sur mobiles
Prochain SlideShare
Chargement dans…5
×

Faites rentrer votre éléphant dans une Smart™ : bonnes pratiques sur mobiles

604 vues

Publié le

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 ?

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
604
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Faites rentrer votre éléphant dans une Smart™ : bonnes pratiques sur mobiles

  1. 1. Faites rentrer votre éléphant 
 dans une Smart™ Bonnes pratiques sur mobiles Stéphanie Walter — Jean-Pierre Vincent
  2. 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
  3. 3. 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
  4. 4. 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
  5. 5. Google met en avant la mobilité Que ce soit un site responsive, ou un site mobile dédié
  6. 6. Stratégie mobile Quelles techniques pour un site adapté mobile aujourd’hui ? Luke Wroblewsli
  7. 7. Le site mobile dédié
  8. 8. Le site responsive
  9. 9. Je développe, teste, recette pour tous les appareils en même temps Un processus unifié
  10. 10. Je développe, teste, recette pour tous les appareils en même temps Un processus unifié Image Luke Wroblewski
  11. 11. SEO friendly : une seule URL, une seule stratégie, partages simplifiés SEO friendly
  12. 12. Quelle stratégie pour mon site ?
  13. 13. 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
  14. 14. D’une beta disponible uniquement sur mobile à un site responsive pour tous BBC news beta responsive
  15. 15. Prendre un site existant, détruire les largeurs, le faire “rentrer” sur mobile
  16. 16. Performance, ergonomie : ça se passe généralement mal Retrofitting — inconvénient
  17. 17. On repart de zéro et on refond tout le site avec une approche Mobile First
  18. 18. 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>
  19. 19. 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');
  20. 20. Adapter son site sur mobile conseils et mise en pratique tout au long du projet
  21. 21. Architecture d’information & travail sur les contenus
  22. 22. Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture Revoir l’architecture d’information en amont
  23. 23. 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
  24. 24. Réseaux sociaux, maps, contenus tiers en iframes … La performance c’est du design
  25. 25. À retenir Les plus gros soucis du mobile sont des soucis de communication
  26. 26. Mise en page, typographie, posons les bases flexibles
  27. 27. Définir les points de rupture (breakpoints) en fonction du contenu
  28. 28. Gridlover + Codepen = mettre en place un rythme typographique responsive directement dans le navigateur Typographie responsive
  29. 29. Font asynchrones : le moindre mal Performance – Rester raisonnable avec les fonts
  30. 30. À retenir Penser la chorégraphie de contenu et la typographie en amont
  31. 31. S'adapter à la “contrainte” du touch
  32. 32. Repenser l’interface au touch pour les petits écrans Pas de survol (:hover)
  33. 33. Deux actions possibles, une au survol une autre au clic ➔ conflit sur mobile. Le problème de l’action survol (;hover) / clique
  34. 34. Taille des boutons + Feedback utilisateur Optimisation visuelle des éléments cliquables
  35. 35. Remplacer des boutons par une action : swipe, pinch, etc. Le mobile, nouveau terrain de jeu
  36. 36. À retenir Testez les interactions le plus tôt possible sur de VRAIS appareils
  37. 37. Préparer ses images au mobile
  38. 38. CSS3, SVG, fonts-icon Les formats vectoriels SVG PNG, JPG
  39. 39. Charger tardivement Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
  40. 40. Optimiser à l’œil Optimiser les images
  41. 41. Optimiser en masse : ImageOptim sur Mac, PNGGauntlet et JPEGmini sur Windows Optimiser les images
  42. 42. À retenir Utiliser le bon format et embrasser les techniques responsives
  43. 43. Adapter son menu de navigation
  44. 44. Attention à certaines patterns de navigation Navigation, les faux amis
  45. 45. Système de « portes » ou « dropdown », à chaque site sa navigation Gestion de multi-niveaux
  46. 46. Attention à la place des éléments « fixés » quand l’écran n’est plus assez haut Navigation en position: fixed;
  47. 47. À retenir Proposer la navigation la moins intrusive possible
  48. 48. Intégration et mise en prod : accélérer mon site
  49. 49. 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
  50. 50. Cache serveur, cache client, compression, keep-alive, temps de génération Vérifier la configuration du serveur
  51. 51. PageSpeed Insights Tester la performance sur mobile
  52. 52. 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
  53. 53. À retenir Se fixer des objectifs de performance et s’y tenir
  54. 54. Les petits plus
  55. 55. Fluidifier l’interface, apporter du feedback voir masquer un chargement un peu lent La valeur ajoutée des animations
  56. 56. Attention à la fluidité des mouvements Des animations ou un scroll saccadés ➔ baisse de la qualité perçue
  57. 57. 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
  58. 58. Vers une expérience « native-like » Offline, notifications Push
  59. 59. En conclusion Testez, testez, testez !
  60. 60. 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

×