Le blog de Sophie

Respon­sive Web Design et Google Mobile-Friendly : le design adap­ta­tif au service du réfé­ren­ce­ment

C’est parce que j’ai souvent eu besoin d’amor­cer ce type d’ex­pli­ca­tions, face à des clients médu­sés de décou­vrir que, « oui », leur site était « consul­table » (avec de très gros guille­mets) sur mobile, mais que « non », ça n’en faisait pas pour autant un site dit « respon­sive » pour autant.

Responsive Web Design - Design Adaptatif

Le Respon­sive Web Design – fruit de la démul­ti­pli­ca­tion des appa­reils / plate­formes de consul­ta­tion web (pc, portable, smart­phone et tablettes) ainsi que des nombreuses réso­lu­tions d’écran – est plus que jamais au centre des préoc­cu­pa­tions. La sortie prochaine (ce 21 avril 2015) d’une nouvelle mise à jour de l’al­go­rithme « Mobile-Friendly » de Google (lequel péna­li­sera, au sein des résul­tats de recherche mobile, les sites consi­dé­rés comme non respon­sive) ; ainsi que la crois­sance inces­sante du trafic mobile en Belgique comme dans le reste du monde, rend désor­mais indis­pen­sable le Respon­sive Design.

Qu’est-ce que le Respon­sive Web Design (RWD) ?

Le Respon­sive Web Design (RWD) – égale­ment appelé « Site Web Adap­ta­tif » – est une approche du web design ayant pour but l’éla­bo­ra­tion de sites inter­net offrant une expé­rience de consul­ta­tion et de navi­ga­tion opti­male, afin de faci­li­ter tant la lecture que la navi­ga­tion.

Un même site web devient alors consul­table sur une multi­tude d’ap­pa­reils et de réso­lu­tions d’écran (du pc de bureau aux smart­phones, en passant par les tablettes), et ce, avec un mini­mum de redi­men­sion­ne­ments, sans avoir à « zoomer / dé-zoomer » (sur les écrans tactiles) ni avoir à « scrol­ler » (défi­le­ment hori­zon­tal) de manière intem­pes­tive, ce qui aurait pour résul­tat de dégra­der l’ex­pé­rience utili­sa­teur de l’in­ter­naute.

Responsive Web Design - Design Adaptatif

Savoir distin­guer un site Respon­sive d’un site Mobile

Il faut savoir distin­guer un site dit « respon­sive » d’un site ayant tout simple­ment déve­loppé une version « mobile », géné­ra­le­ment acces­sible via une adresse de type : « m.lenom­du­site.be ». C’est notam­ment le cas de Face­book dont l’adresse se trans­forme en « m.face­book.com » sur mobile.

Le prin­ci­pal problème d’un site mobile, c’est qu’il n’est adapté qu’à une seule réso­lu­tion d’écran. Ainsi, si le site mobile a été déve­loppé pour smart­phone, il ne convien­dra pas à une consul­ta­tion sur tablette. De surcroît, de nouveaux supports mobiles ne cessent d’ap­pa­raitre. Ce fut notam­ment le cas derniè­re­ment des « phablettes », ces smart­phones dont l’écran est d’une taille inter­mé­diaire entre celui des smart­phones et celui des tablettes tactiles. Il vous faudrait donc propo­ser autant de versions de votre site que de péri­phé­riques mobiles.

Responsive Web Design - Design Adaptatif Vs Site Mobile

Mais les sites mobiles ne comptent pas que des incon­vé­nients. Lorsque le site dispose d’une quan­tité impor­tante de conte­nus, avoir un site mobile permet d’af­fi­ner préci­sé­ment la struc­ture ainsi que la mise en page de ces derniers. Les sites mobiles se chargent égale­ment plus rapi­de­ment que les sites Respon­sives car on fait appel à moins d’in­for­ma­tions.

Compte tenu de l’im­por­tante variété des supports et réso­lu­tions d’écrans (et ce, sans comp­ter ceux à venir), le déve­lop­pe­ment d’un site mobile, s’il a un jour consti­tué une solu­tion viable, n’est plus telle­ment inté­res­sant aujourd’­hui.

Comment fonc­tionne un site respon­sive ?

Le respon­sive design a ceci d’in­té­res­sant qu’il s’adapte à tous les péri­phé­riques et toutes les réso­lu­tions d’écran (contrai­re­ment aux sites mobiles dédiés). Les diffé­rents éléments du design (blocs, colonnes, images, etc.) vont s’ajus­ter, se redi­men­sion­ner et se dépla­cer de manière auto­ma­tique, selon la réso­lu­tion d’écran sur laquelle l’in­ter­naute tente d’af­fi­cher le site.

Certains éléments seront suscep­tibles de dispa­raître pure­ment et simple­ment, tandis que d’autres feront leur appa­ri­tion, selon la perti­nence que ceux-ci peuvent avoir vis-à-vis d’une consul­ta­tion mobile (il s’agira, par exemple, de faire dispa­raître une image qui n’ap­porte plus rien au site mobile, et/ou de faire appa­raître un numéro de télé­phone ou une adresse à proxi­mité, dans le cadre d’un site e-commerce, par exemple).

Fonctionnement Responsive Design - Site Web Adaptatif

De manière plus méta­pho­rique, on peut envi­sa­ger le contenu d’un site (qu’il s’agisse de texte ou d’image) comme de l’eau, et les diffé­rents péri­phé­riques comme des conte­neurs. Quelle que soit la réso­lu­tion d’écran, le contenu web doit pouvoir s’y adap­ter et emprun­ter la forme qui convien­dra le mieux, tout en prenant en consi­dé­ra­tion les spéci­fi­ci­tés du péri­phé­rique (du nouveau conte­neur).

Responsive Design - Site Web Adaptatif - Content is like water

Illus­tra­tion by Stépha­nie Walter. Attri­bu­tion — You must give appro­priate credit, provide a link to the license, and indi­cate if changes were made. You may do so in any reaso­nable manner, but not in any way that suggests the licen­sor endorses you or your use – Crea­tive Commons.org

“Content is like Water. You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, it becomes the teapot – Josh Clark” – Forbes.com

Traduc­tion :

On peut envi­sa­ger le contenu comme de l’eau. Vous mettez de l’eau dans une tasse, elle devient la tasse. Vous mettez de l’eau dans une bouteille, elle devient la bouteille. Vous la mettez dans une théière, elle devient la théière.

Comment fonc­tionne le respon­sive design d’un point de vue tech­nique ?

Un peu de tech­nique mais pas trop, cet article n’étant pas dédié à cela. Pour davan­tage d’in­for­ma­tions quant au fonc­tion­ne­ment pure­ment tech­nique du respon­sive design, je vous renvoie vers un article très inté­res­sant inti­tulé « Respon­sive design : un brin de tech­nique » ainsi qu’à un autre, en anglais cette fois, inti­tulé : « Respon­sive Web Design: What It Is and How To Use It ».

The Anatomy of a Responsive Site - Site web adaptatif

Le respon­sive design repose sur trois éléments fonda­men­taux : les media queries, les grilles fluides et les images fluides.

CSS 3 Media Queries

Les CSS3 Media Queries sont une fonc­tion­na­lité permet­tant de créer des feuilles de style (CSS) à l’at­ten­tion de chaque péri­phé­rique et réso­lu­tion d’écran ciblé. Le design du site s’adap­tera en fonc­tion de certains critères comme la largeur d’écran, la taille et la police d’écri­ture du texte, et il sera égale­ment possible de déter­mi­ner l’ap­pa­ri­tion ou la dispa­ri­tion de certains éléments. L’at­tri­but @media précise ainsi le contexte dans lequel les styles doivent s’ap­pliquer.

Grilles fluides (Fluid Grid)

On parle de grilles fluides lorsque l’en­semble de la struc­ture du site est dite « élas­tique ». Les unités rela­tives (le em, le rem ou le %) seront préfé­rées au détri­ment des unités fixes ou abso­lues (comme le pixel). Ces unités rela­tives permettent de jouer sur la compo­si­tion de la page en fonc­tion de la réso­lu­tion d’écran. Les éléments dit « fluides » (auxquels a été appliquée une unité rela­tive) occu­pe­ront le même pour­cen­tage d’es­pace sur les diffé­rents écrans. Ainsi, en rédui­sant progres­si­ve­ment la taille de fenêtre du navi­ga­teur, le site s’adapte en fonc­tion des pour­cen­tages corres­pon­dants.

A current acces­si­bi­lity recom­men­da­tion is to use rela­tive font sizes such as percen­tages or units of em instead of abso­lute sizes such as pixels or points. This allows text to be more easily resi­zed appro­pria­tely across multiple devices and plat­forms – Acces­si­bi­lity

Traduc­tion :

d’un point de vue de l’ac­ces­si­bi­lité, il est recom­mandé d’uti­li­ser des tailles de police dites « rela­tives » (flexibles) tel que le pourcent « % » ou les unités « em » au lieu des tailles dites « abso­lues » tels que le pixel ou le point. Cela permet au texte d’être plus faci­le­ment ajus­table selon les multiples appa­reils et plate­formes.

Responsive Web Design - Design Adaptatif

La ques­tion des unités rela­tives fut abor­dée et expliquée au sein d’un précé­dent article inti­tulé : « Le pourquoi et comment de l’op­ti­mi­sa­tion ergo­no­mique et de l’ac­ces­si­bi­lité des sites web ».

Images fluides (Flexible Images)

Les images fluides (ou respon­sives) s’adaptent auto­ma­tique­ment à la taille de l’écran (et ce, à l’aide des unités rela­tives, des media queries ou encore du JavaS­cript). Plusieurs tech­niques sont possibles, qu’il s’agisse du redi­men­sion­ne­ment de l’image par le navi­ga­teur (à l’aide des unités rela­tives) ou encore du char­ge­ment d’images préa­la­ble­ment ajus­tées (à l’aide de media queries).

Reponsive Design Technique Media Queries Flexible Images Fluid Grids

Les avan­tages d’avoir un site web respon­sive

1.      Les inter­nautes préfèrent les sites respon­sives

Responsive Web Design

The key to catching a visi­tor’s eye and keeping that window wide open (and poin­ted at your page) lies in respon­sive design. The market­place is quickly beco­ming a very signi­fi­cant part of a post-PC world, and as more users get their news, enjoy enter­tain­ment, and make purchases with tablets and smart­phones, making sure your web site is desi­gned to meet their ever-evol­ving needs is criti­cal. It’s all about keeping the features visi­tors want, and none of the things they don’t. There’s no room for clunky graphics, confu­sing navi­ga­tion, or pages locked into desk­top-only reso­lu­tions. Mobile users want their Inter­net lean, clean, and sized for their screen – WhoIsHos­tingT­his.com

Traduc­tion :

La clé pour capter l’at­ten­tion d’un visi­teur et le garder sur votre site repose dans le respon­sive design. Le marché est rapi­de­ment en train de consti­tuer une part signi­fi­ca­tive d’un monde post-pc, et tandis que de plus en plus d’in­ter­nautes consultent les actua­li­tés, se diver­tissent et réalisent des achats avec leurs tablettes et leurs smart­phones, faire en sorte que votre site soit conçu pour répondre à leurs besoins (lesquels évoluent sans cesse) est devenu primor­dial. Tout est une ques­tion de perti­nence : conser­ver sur la page ce dont les inter­nautes ont besoin, et reti­rer le reste. Il n’y a pas de place pour des éléments encom­brants, une navi­ga­tion confuse ou des pages web consul­tables unique­ment dans une réso­lu­tion d’or­di­na­teur de bureau. Les inter­nautes mobiles veulent leur inter­net léger, propre et adapté à leurs réso­lu­tions d’écrans.

2.      Le respon­sive design offre davan­tage de réac­ti­vité

Le site s’adapte à tous les péri­phé­riques et toutes les réso­lu­tions d’écran. Les éléments qui composent le site vont s’ajus­ter, se redi­men­sion­ner et se dépla­cer auto­ma­tique­ment. Sur les péri­phé­riques mobiles, le site s’af­fi­chera auto­ma­tique­ment de manière hori­zon­tale ou verti­cale, dès que l’uti­li­sa­teur penchera sa tablette ou son smart­phone (d’un côté ou de l’autre).

3.      Le respon­sive design améliore l’er­go­no­mie et l’ex­pé­rience utili­sa­teur (UX)

En ajus­tant le site à son support, on offre aux inter­nautes une qualité de consul­ta­tion supé­rieure, que cela concerne :

  1. Le confort de lecture: plus ques­tion de zoomer pour pouvoir lire, la police du texte est auto­ma­tique­ment adap­tée à l’écran ;
  2. Le confort d’uti­li­sa­tion: le site s’adap­tant au péri­phé­rique, il aura été envi­sagé pour un affi­chage et une consul­ta­tion sur un support tactile permet­tant une visua­li­sa­tion à l’ho­ri­zon­tale comme à la verti­cale ;
  3. L’ef­fi­ca­cité d’ac­cès à l’in­for­ma­tion recher­chée: les éléments super­flus dispa­raissent, parfois au profit d’élé­ments plus perti­nents comme un numéro de télé­phone ou l’adresse du commerce le plus proche, dans le cadre d’un e-commerce.

4.      Le respon­sive design est plus écono­mique (contrai­re­ment aux sites mobiles dédiés)

Plutôt que de créer un site mobile dédié pour chaque défi­ni­tion d’écran, vous n’au­rez besoin d’in­ves­tir que dans un seul et unique site.

5.      Le respon­sive design permet de gagner du temps

Ce gain de temps s’ac­quière non seule­ment au moment de la concep­tion du site, mais égale­ment au moment de sa main­te­nance. En effet, le site dispo­sant d’une URL unique, la gestion du contenu s’en trouve centra­li­sée (ce qui n’au­rait pas été dans le cas dans le cadre de sites mobiles dédiés).

6.      Le respon­sive design améliore le réfé­ren­ce­ment

Le site étant construit sur une URL unique, l’ac­ti­vité de vos sites mobiles impactent de manière béné­fique vos statis­tiques (liens entrants, visites, etc.). De plus, la prochaine mise à jour « Mobile-Friendly » de Google détec­tera si votre site est respon­sive, lequel ne sera donc pas péna­lisé dans les résul­tats de recherches mobile de Google.

De l’im­por­tance d’avoir un site web respon­sive pour le réfé­ren­ce­ment natu­rel (Google) – la mise à jour « Mobile-Friendly » du 21 avril 2015

Le 21 avril prochain, Google sortira sa nouvelle mise à jour, « mobile-friendly », laquelle péna­li­sera les sites non respon­sive au sein des résul­tats de recherche sur mobile (soit tout de même près de 50% des requêtes trai­tées chaque jour par Google). La mise à jour sera mise en place sur une base « page par page » et non pour l’en­semble du site. Les pages « mobile-friendly » seront donc boos­tées mais pas les autres.

Ainsi, les sites adap­tés pour la consul­ta­tion sur tablettes et smart­phones, non content de béné­fi­cier d’un avan­tage sur les sites qui ne le seraient pas, béné­fi­cie­ront égale­ment d’un label « site mobile » (ou « mobile-friendly en anglais) qui appa­rai­tra en gris, juste à côté des résul­tats. C’est le cas pour le site d’Exit Studio.

Exit Studio Résultat Bing Google Pour Mobile Mobile Friendly

Bing, le moteur de recherche de Micro­soft, n’aura pas tardé à suivre son homo­logue et affiche égale­ment un label « Mobile-Friendly » (Pour mobile) à côté de ses résul­tats de recherche (lorsque le site est Respon­sive).

La mise à jour de ce 21 avril rendra offi­ciel un critère que l’on savait déjà impor­tant pour diverses raisons :

1.      Le respon­sive design a un impact impor­tant sur la qualité de l’ex­pé­rience utili­sa­teur des inter­nautes mobiles

Or, Google cherche à favo­ri­ser, depuis quelques années déjà, les sites perti­nents et de qualité au sein de ses résul­tats de recherche. Les dernières grosses mises à jour du moteur ont eu pour seul et unique but d’amélio­rer encore et toujours la qualité des sites propo­sés au sein de ses résul­tats, afin que l’in­ter­naute dispose des réponses les plus perti­nentes par rapport à une requête donnée. De ce fait, amélio­rer l’ex­pé­rience de consul­ta­tion de son site sur tablettes et smart­phones allait tôt ou tard consti­tuer un facteur impor­tant de réfé­ren­ce­ment natu­rel sur Google.

Par ailleurs, plusieurs signaux annon­cia­teurs avaient fait leurs appa­ri­tions sur la toile, ces derniers mois :

Google n’avait pas caché tester ce signal en novembre dernier. Et avant cela, Moun­tain View avait multi­plié les efforts pour sensi­bi­li­ser les webmas­ters et SEO à l’im­por­tance d’op­ti­mi­ser leurs pages pour les mobiles. La plupart des nouveaux rapports ajou­tés à Google Webmas­ter Tools en 2014 concer­naient la dimen­sion mobile des sites et de leur SEO. De la docu­men­ta­tion, et même un outil de test ont égale­ment été mis en place pour aider les sites à obte­nir le label – Jour­nalDuNet.com

2.      La crois­sance du trafic mobile ne cesse d’aug­men­ter à travers le monde.

Il y a un an, son célèbre porte-parole Matt Cutts expliquait qu’ »il ne serait pas surpris » si, avant 2015, le nombre de requêtes sur mobile dépas­sait le nombre de celles réali­sées sur desk­top [pour le site du moteur de recherche Google] – Jour­nalDuNet.com

Why Is Responsive Design So Important

En Belgique, les chiffres du trafic mobile attei­gnaient, quant à eux, les 30,5 % au mois de mars 2015 :

How We Browse BE Mars 2015  Trafic Mobile

[Mise à jour du 06/05/2015]

Google a annoncé ce mardi 05 mai 2015 que les recherches réali­sées à partir d’ap­pa­reils mobiles étaient désor­mais plus nombreuses que celles prove­nant d’un PC, et cela dans une dizaine de pays parmi lesquels on trouve les Etats-Unis et le Japon – Réfé­ren­ceur.be.

Comment savoir si votre site est « mobile-friendly » selon Google ?

Google met à dispo­si­tion un outil permet­tant de tester si votre site est bien Respon­sive ou « Mobile-Friendly ». Pour ce faire, il vous suffit d’en­trer l’URL du site de votre choix et de lancer l’ana­lyse.

  1. Un site parfai­te­ment respon­sive (comme c’est le cas pour le site d’Exit Studio) renverra la réponse suivante : «  Cette page est adap­tée aux mobiles ».Test Google Mobile Friendly Responsive Web Site Exit Studio
  2. Un site qui ne serait pas respon­sive renverra la réponse suivante : « Non adap­tée aux mobiles  » et sera accom­pa­gné d’une série de remarques (ayant pour but de vous aider à recti­fier la situa­tion), telles que :
    1. « Texte illi­sible car trop petit  » : les inter­nautes doivent zoomer pour parve­nir à lire (ergo­no­mie et confort de lecture ne sont pas assu­rés) ;
    2. « Fenêtre d’af­fi­chage mobile non confi­gu­rée  » : ce qui signi­fie que le site ne s’adapte pas auto­ma­tique­ment à la réso­lu­tion de l’écran sur lequel il est affi­ché ;
    3. « Liens trop rappro­chés  » : afin que l’in­ter­naute parvienne à cliquer sur ceux-ci sans encombre (c’est-à-dire sans risquer de cliquer sur un autre lien que celui qu’il dési­rait initia­le­ment explo­rer) ;
    4. « Contenu plus large que l’écran  » : l’in­ter­naute doit faire défi­ler la page afin d’ac­cé­der à l’en­semble de son contenu.

Test Google Mobile Friendly Non Responsive Web Site

N’ou­bliez pas de lancer une analyse pour chacune des pages de votre site. Pour rappel, la mise à jour sera mise en place sur une base « page par page » et non pour l’en­semble du site. Les pages « mobile-friendly », seront donc boos­tées mais pas les autres.

En conclu­sion

Le Respon­sive Web Design permet à un site web (une seule URL) dispo­sant d’un contenu unique et centra­lisé, d’être consul­table sur de multiples écrans et péri­phé­riques, à l’aide de la tech­no­lo­gie CSS3 Media Queries, ainsi que de l’em­ploi d’uni­tés rela­tives (images flexibles et grilles fluides).

S’il devient indis­pen­sable – pour des ques­tions d’ex­pé­rience utili­sa­teur, d’évo­lu­tion tech­no­lo­gique et de réfé­ren­ce­ment natu­rel – d’avoir un site Respon­sive, mettre à dispo­si­tion de ses inter­nautes un site flexible présente de nombreux avan­tages :

  • Amélio­ra­tion de l’ex­pé­rience utili­sa­teur, à travers un confort de lecture et d’uti­li­sa­tion sur support mobile accru ;
  • Gain de temps et d’argent (en oppo­si­tion à la mise en place d’un site mobile) ;
  • Opti­mi­sa­tion de la réac­ti­vité de votre site web.

Tout cela est sans comp­ter une certaine préfé­rence, pour les inter­nautes, d’ac­cé­der à un site adapté à la consul­ta­tion sur tablette et mobile (raison pour laquelle ils n’hé­si­te­ront pas à quit­ter immé­dia­te­ment un site inadapté – faisant par la même occa­sion, augmen­ter votre taux de rebond – voir à ne même pas s’y tenter, le label « site mobile » appa­rais­sant désor­mais à côté du résul­tat de recherche de Google des sites Respon­sives).

Quoi qu’il en soit, que cela concerne l’op­ti­mi­sa­tion de votre réfé­ren­ce­ment natu­rel, l’amé­lio­ra­tion de l’er­go­no­mie et de l’ex­pé­rience utili­sa­teur, ou simple­ment un témoi­gnage de votre capa­cité à vous adap­ter aux évolu­tions tech­no­lo­giques de votre temps, le respon­sive web design est désor­mais devenu incon­tour­nable.

Keeping it Simple with Responsive Web Design - Who is hosting this