faites rentrer votre éléphant dans une smart™ : bonnes pratiques sur mobiles

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

• Google

– 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