Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

La proportion des visiteurs d’un site Internet utilisant un smartphone ou une tablette a explosé depuis 2011, que ce soit des appareils utilisant le système d’exploitation de Google (Android) ou d’Apple (iOS). En France, des études établissent que l’utilisation d’un mobile pour aller sur le Web double chaque année !

Face à l’apparition de ces nouveaux supports avec des écrans beaucoup plus petits et aux dimensions plus variées que ceux d’un ordinateur de bureau, c’est un véritable défi qui s’est imposé aux concepteurs de site web pour proposer des solutions multi-supports. C’est bien sûr aussi un enjeu pour tout site réalisé sous WordPress.

Les différentes tailles d’écran et résolutions utilisées

Tout d’abord, prenons le temps de définir les différents termes se rapportant aux écrans :

  • la taille de l’écran que l’on exprime en pouces correspond à la mesure de la diagonale de l’espace d’affichage (1 pouce = 2,54 cm)
  • la définition de l’écran est le nombre de pixels (points) que l’écran peut afficher. On peut avoir plusieurs définitions possibles pour une même taille d’écran : 1366×768 pixels pour un écran 15,6 pouces mai aussi pour un écran 19 pouces. Le terme « définition » est souvent remplacé par le terme « résolution » qui est équivalent lorsque l’on parle d’un écran
  • la résolution (cette fois utilisé pour parler des images) désigne les « points par pouce » ou PPI (nombre de pixels par unité de surface). L’équivalent du PPI en print est le DPI. Concernant l’affichage d’une image sur un écran, sa résolution n’est pas importante et seule compte ses dimensions absolues en pixels. Une image en 72 PPI ou 300 PPI s’affichera de la même façon sur un écran mais sera de qualité totalement différente une fois imprimée !
  • Le mode graphique désigne des modes d’affichage et allie définition et nombre de couleurs : CGA, VGA, WUXGA…

Grâce à des définitions, nous nous rendons compte que la combinaison des tailles et résolutions d’écran sont extrêmement variées selon les supports et terminaux ! Pour s’en rendre compte, on peut installer une extension à son navigateur qui va s’occuper des retailler automatiquement votre fenêtre de navigateur pour des terminaux cibles précis. Par exemple, sous Chrome, vous pouvez utiliser Windows Resizer. En listant les différentes options possibles, vous y trouverez des résolutions allant de 320×480 pixels (les anciens iPhone) à 1680×1050 pixels (écran desktop) par défaut ; mais il existe d’encore plus grandes résolutions comme 1920×1200 pixels. La résolution numéro 1 aujourd’hui et depuis 2012 est le 1366×768 pixels ; cela correspond au format d’un PC portable (laptop).

Face à cette pléthore de tailles d’écran, les webdesigner et concepteurs de sites web ont trouver des solutions et c’est ce que nous allons voir maintenant.

1ère solution : la création d’un site dédié aux terminaux mobiles

Une première idée est de créer un site spécifique pour les terminaux mobiles, différent du site principal et offrant des fonctionnalités sur mesure et un affichage adapté. Un exemple classique est le site http://www.lemonde.fr/ et sa version mobile http://mobile.lemonde.fr/.

Cela demande une architecture technique complexe puisque il faut créer 2 sites différents qui devront afficher les même contenus ; sans parler des contraintes de référencement à intégrer puisque Google n’aime pas le contenu dupliqué (il faut dans ce cas utiliser des URL canoniques mais ça ne facilite pas forcément le développement !).

Cela demande aussi de bien anticiper l’évolution technologique et l’apparition de nouveaux terminaux : il est bien souvent hors de question de créer un 3ème site pour les tablettes si le 2ème est designé pour les smartphones ! Donc finalement, ce site destiné aux terminaux mobiles devra savoir également s’adapter à différents affichages.

2ème solution : le responsive web design

Lorsque l’on créé un site vitrine pour son activité professionnelle, la solution la plus simple est donc d’utiliser la technique du « responsive design ». C’est une technique qui permet au site de s’adapter automatiquement à la place disponible sur l’écran d’affichage ; comme sur l’image ci dessous :

Responsive Webdesign Electronic Devices

On peut ainsi, pour le même site, avoir 3 ou 4 designs différents en fonction de la résolution d’affichage.

Pour bien comprendre les différences entre design statique (dimensions fixes pour tous supports), élastique (dimensions proportionnelles à l’écran mais pour tous les supports), adaptatif (dimensions fixes mais qui s’adaptent selon la résolution du support) et responsive (dimensions proportionnelles qui s’adaptent à la résolution du support), vous pouvez jouer avec ce site : http://liquidapsive.com/

Maintenant que vous avez mieux compris ce qu’est un design responsive, voyons comment le mettre en oeuvre.

Mise en place d’un design web responsive

Pour réaliser ces adaptations aux différentes résolutions, on fait appel aux fonctionnalités des CSS3 nommées mediaqueries : elles vont permettre de charger du code de mise en page en fonction de la résolution d’affichage du terminal. On définit pour cela des points de rupture pour lesquels l’affichage se verra modifié. Entre ces points de rupture, les concepteurs de sites responsives géreront une mise en forme « élastique » (ou encore « fluide ») qui s’adaptera à la dimension de l’écran pour prendre 100 % de l’espace disponible.

Dans l’approche « reponsive degradation », l’affichage des blocs de contenu est optimisé pour un écran desktop ; et l’affichage mobile s’adapte en repositionnant les blocs, en modifiant leur apparence (exemple : les menus) ou parfois en les faisant même disparaître.

Dans l’approche « mobile first », on se concentre sur le design pour les terminaux mobiles, et on adapte l’affichage desktop ensuite. Cela permet généralement un code CSS plus épuré et donc léger pour les versions mobiles.

Cette notion d’optimiser la bande passante pour les terminaux mobiles est importante car elle encore souvent limitée sur ce type de supports malgré l’arrivée à grand pas de la 4G.  Attention par exemple aux images volumineuses destinées à un affichage desktop qui seront lourdes à charger sur un terminal mobile.

Enfin, le développement d’un site responsive doit être prévu dès la conception du site car une migration complète d’un site statique vers un site responsive est souvent plus coûteuse !

Responsive Design et référencement

Dernier point et non des moindres : depuis le 21 avril 2015, Google valide ou non ou la compatibilité mobile de votre site et le prend en compte comme signal de classement dans les résultats de recherche. Vous pouvez tester votre site avec l’outil Google mobile friendly.

Vous trouverez sur ce site tous leurs conseil pour répondre au mieux aux critères d’un « bon » responsive design pour le référencement Google !

Voici également des conseils pour suivre sur un ordinateur desktop votre positionnement dans les résultats de recherche sur mobile ; ça peut être pratique !