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

LE SITE DE L’ETAT DE VAUD

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

TOUT CE QUI A L’AIR RESPONSIVE… NE L’EST PAS FORCÉMENT !

VAUD TOURISME, UN TRÈS BEL EXEMPLE

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