le responsive design ou mobile firstdocuments.epfl.ch/users/m/mm/mmathys/www... · • le...
TRANSCRIPT
MOBILE FIRSTLE RESPONSIVE DESIGN OU…
Cristelle Burlot - Vectorielle - Mai 2016
DÉROULEMENT
• le responsive design, définition
• quelques chiffres
• la démarche « Mobile first »
• hiérarchie de l’information: se mettre à la place du lecteur
• les bonnes pratiques pour adapter les contenus médias
• exemples concrets
J’ai fondé ma société il y a deux après une longue expérience design web et traditionnel
chez Tamedia. Je créé des sites responsive pour les artisans, les indépendants et les PME.
Cristelle Burlot
QUI JE SUIS
On appelle Responsive Design (littéralement conception web adaptive) la faculté d'un site web à s'adapter au terminal de lecture.
QUELQUES CHIFFRES
UTILISATION D'INTERNET HORS DE LA MAISON ET DU LIEU DE TRAVAIL Source: OFS (Omnibus TIC)
2014
2010
0 25 50 75 100
QUELQUES CHIFFRES
APPAREILS MOBILES UTILISÉS HORS DE LA MAISON OU DU LIEU DE TRAVAIL Source: OFS (Omnibus TIC)
TÉLÉPHONE PORTABLE
ORDINATEUR PORTABLE
TABLETTE
AUTRES
0 25 50 75 100
20142010
QUELQUES CHIFFRES
APPAREILS MOBILES UTILISÉS HORS DE LA MAISON OU DU LIEU DE TRAVAIL Source: OFS (Omnibus TIC)
ITALIE
REP. TCHÈQUE
PORTUGAL
ALLEMAGNE
BELGIQUE
UE 28
FRANCE
ISLANDE
SUISSE
FINLANDE
AUTRICHE
PAYS-BAS
ROYAUME-UNI
DANEMARK
NORVÈGE
SUÈDE
ESPAGNE
0 20 40 60 80
Téléphone portable Ordinateur portable ou tablette
QUELQUES CHIFFRES
ET POUR L’EPFL? Source: Google analytics, pour 2015, actu.epfl.ch
5 %17 %
77 %
Ordinateur Mobile Tablette
MOBILE FIRST ?
PARCE QUE VOTRE PREMIER LECTEUR EST (OU SERA) SUR UN MOBILE mais que vous ne devez pas oublier les autres non plus…
LA MINUTE GYMNASTIQUE
POURQUOI ? ‣ avec l'émergence des smartphones et des tablettes tactiles, il existe
un grand nombre de résolutions d'affichage, rendant parfois l'expérience utilisateur difficile
‣ le responsive design est une approche très pragmatique du contenu en fonction du terminal sur lequel ce contenu est diffusé
‣ depuis 2014, Google privilégie les sites web qui s’adaptent au mobile dans ses résultats de recherche
MOBILE FIRST
TEXTE
LA JUNGLE…
Selon le site OpenSignal, 24’093 appareils distincts sous Android ont été vus par le site en 2015 (le site ne référence que les appareils sous Android…)
MAIS QU’EST-CE QUI NE VA PAS AVEC UN SITE CLASSIQUE ?
Pour être plus précis, lorsqu’on dit que tel ou tel site n’est pas adapté aux mobiles, cela signifie en réalité plusieurs choses :
‣ problèmes de lisibilité
‣ problèmes d’ergonomie
‣ contenu masqué
‣ lenteur de chargement
QUELLES SONT LES AUTRES ALTERNATIVES ?
‣ création d’un site dédié au mobile http://mobile.monsite.ch
‣ applications natives (pour l’AppStore ou Android Market)
BONNES PRATIQUES
LES PRINCIPES À GARDER À L’ESPRIT
▸ quel contenu est important pour le mobile, lequel l’est moins? la hiérarchie du contenu est capitale !
▸ le clic n’existe pas sur un mobile, c’est le touch. Et la zone de touch est bien plus vaste qu’une zone de pointeur souris
▸ on doit éviter d’afficher ou lier du contenu non-responsive
▸ pensez à votre navigation : si un lien ouvre un site différent d’un point de vue de sa structure, ouvrez-le dans un nouvel onglet
▸ vous pouvez (devez !) de façon tout à fait simple contrôler vos pages
BONNES PRATIQUES
S'ADAPTER À LA LECTURE MOBILE
Le passage au responsive design s'accompagne de quelques règles à respecter dans la mise en ligne de nouveaux contenus
‣ produire des textes courts, bien aérés et faciles à lire dans toutes conditions
‣ limiter le poids des images téléchargées, afin que cela n'impacte pas sur le temps de chargement
‣ proposer des contenus facilement accessibles depuis tout support (et vérifier que c’est le cas)
BONNES PRATIQUES
En quelques minutes, vous pouvez analyser de façon simple votre page web:
‣ comment j’utilise mon template, où est placé le contenu important ?
‣ où se trouve ce contenu quand je l’affiche sur un mobile ?
‣ les informations que j’ai placé dans la colonne de droite sont-elles importantes ou secondaires ?
‣ ma page est-elle trop longue ?
‣ ma page est-elle trop lourde ?
LE POSITIONNEMENT DU CONTENU DANS LA PAGE
BONNES PRATIQUES
LES ÉLÉMENTS PROBLÉMATIQUES
▸ imagesparce qu’une image trop lourde plombe la vitesse d’affichage de votre page et mange le forfait de votre internaute
▸ tableauxles colonnes d’un tableau non-responsive s’empilent, le tableau devient illisible
BONNES PRATIQUES
LES ÉLÉMENTS PROBLÉMATIQUES
▸ PDFle PDF est un fichier souvent assez lourd; il est pratique pour présenter un contenu imprimé sur un site web, mais n’est pas du tout adapté au mobile; en plus, son contenu n’est pas référencé par Google
▸ iframesutiles pour inclure du contenu tiers dans une page, si le contenu inclus n’est pas adapté au mobile, autant s’en passer ou le présenter sous une autre forme
▸ vidéossi votre vidéo est hébergée sur youtube, elle sera responsive sans problème
BONNES PRATIQUES
LES ÉLÉMENTS PROBLÉMATIQUES
▸ infographies crées pour un autre support que le web, affichée comme image
▸ texte écrit dans une image
▸ formulaires
▸ fichiers Flash ne fonctionnent pas sur les appareils sous iOS
LES BONS ÉLÈVES
EXEMPLES
EN RÉSUMÉ
▸ la règle de base, c’est VÉRIFIER et SE METTRE À LA PLACE DE VOTRE UTILISATEUR
▸ l’approche MOBILE FIRST va également profiter à votre site web classique (contenus concis, clarté)
▸ VOUS NE POUVEZ PAS TOUT CHANGER EN QUELQUES JOURS
PRATIQUE
LES OUTILS
IMAGES MOBILE FRIENDLY
TAILLE DU NAVIGATEUR
VITESSE DE CHARGEMENT
QUESTIONS ?MERCI DE VOTRE ATTENTION