Tweet
Tweet

Slide 1

Slide 1 text

Faites rentrer votre éléphant 
 dans une Smart™ Bonnes pratiques sur mobiles Stéphanie Walter — Jean-Pierre Vincent

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Le site mobile dédié

Slide 9

Slide 9 text

Le site responsive

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Quelle stratégie pour mon site ?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Mobile First : amélioration progressive Niveau 1 : HTML / CSS simples, qui marchent partout
 Bonus : SEO friendly, accessible, standard Most  Read

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Architecture d’information & travail sur les contenus

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Mise en page, typographie, posons les bases flexibles

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

S'adapter à la “contrainte” du touch

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Préparer ses images au mobile

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Optimiser à l’œil Optimiser les images

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

À retenir Utiliser le bon format et embrasser les techniques responsives

Slide 46

Slide 46 text

Adapter son menu de navigation

Slide 47

Slide 47 text

Attention à certaines patterns de navigation Navigation, les faux amis

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

À retenir Proposer la navigation la moins intrusive possible

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

PageSpeed Insights Tester la performance sur mobile

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Les petits plus

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

En conclusion Testez, testez, testez !

Slide 63

Slide 63 text

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