faites rentrer votre éléphant dans une smart™ : bonnes pratiques sur mobiles
TRANSCRIPT
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éveloppeur depuis 2000PHP, JS
Yahoo!, houra.fr, startups …
Freelance WebPerfProf, auteur, confs …
Jean-Pierre VINCENT
@WalterStephanie
@theystolemynick
inpixelitrust.fr
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
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
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,
accessible, standard
<a href= "/most-‐read.html">Most Read</a>
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');
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’information en amont
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
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 responsive
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) / clique
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 chargement
– Critère de référencement
– Influence le taux de crawl
Image Tax Credits
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• JavaScript• Petites images
Demain : HTTP/2
Concatenation via Shutterstock
À 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)
• Lancement en plein écran
• Pour les générer :
realfavicongenerator.net
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- BY-NC-SA licence
http://inpx.it/bonne-pratique-mobile-wpmx2015