LE RESPONSIVE DESIGN OU MOBILE FIRST

Transcription

1 LE RESPONSIVE DESIGN OU MOBILE FIRST Cristelle Burlot - Vectorielle - Mai 2016

2 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

3 QUI JE SUIS 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

4 On appelle Responsive Design (littéralement conception web adaptive) la faculté d'un site web à s'adapter au terminal de lecture.

5 QUELQUES CHIFFRES UTILISATION D'INTERNET HORS DE LA MAISON ET DU LIEU DE TRAVAIL Source: OFS (Omnibus TIC)

6 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

7 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 Téléphone portable Ordinateur portable ou tablette

8 QUELQUES CHIFFRES ET POUR L EPFL? Source: Google analytics, pour 2015, actu.epfl.ch 5 % Ordinateur Mobile Tablette 17 % 77 %

9 MOBILE FIRST? PARCE QUE VOTRE PREMIER LECTEUR EST (OU SERA) SUR UN MOBILE mais que vous ne devez pas oublier les autres non plus

10 LA MINUTE GYMNASTIQUE

11 MOBILE FIRST 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

12 TEXTE

13 LA JUNGLE Selon le site OpenSignal, appareils distincts sous Android ont été vus par le site en 2015 (le site ne référence que les appareils sous Android )

14 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

15 LE SITE DE L ETAT DE VAUD

16 QUELLES SONT LES AUTRES ALTERNATIVES? création d un site dédié au mobile applications natives (pour l AppStore ou Android Market)

17

18 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

19 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)

20 BONNES PRATIQUES LE POSITIONNEMENT DU CONTENU DANS LA PAGE 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?

21 BONNES PRATIQUES LES ÉLÉMENTS PROBLÉMATIQUES images parce qu une image trop lourde plombe la vitesse d affichage de votre page et mange le forfait de votre internaute tableaux les colonnes d un tableau non-responsive s empilent, le tableau devient illisible

22 BONNES PRATIQUES LES ÉLÉMENTS PROBLÉMATIQUES PDF le 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 iframes utiles 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éos si votre vidéo est hébergée sur youtube, elle sera responsive sans problème

23 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

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

25 VAUD TOURISME, UN TRÈS BEL EXEMPLE

26 LES BONS ÉLÈVES EXEMPLES

27 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

28 PRATIQUE LES OUTILS IMAGES MOBILE FRIENDLY TAILLE DU NAVIGATEUR VITESSE DE CHARGEMENT

29 MERCI DE VOTRE ATTENTION QUESTIONS?