Un Responsive Design doit être optimisé !

Le responsive design est la nouvelle mode pour concevoir des sites web adaptés aux tailles d'écran des smartphones et des tablettes. Son utilisation se démocratise mais n'est pas toujours optimisée pour les différents supports.

Exemple d'un design responsive

Rappel sur le responsive webdesign

Le responsive design est très lié aux media-queries. Il s'agit de petites conditions qui s'ajoutent dans le CSS pour appliquer des styles uniquement sous certaines conditions. Il est ainsi possible de modifier la largeur d'un site lorsque la largeur de l'écran est plus petite qu'une certaine valeur. Techniquement c'est très simple à mettre en oeuvre. Par exemple pour mettre le texte en rouge si l'écran est moins large que 500 pixels il suffit d'utiliser le code suivant :

{code type=php}
@media screen and (max-width: 500px) {
#page {
width:300px;
}
}
{/code}

Adaptation horizontal et vertical

La plupart du temps les sites en responsive design se contentent d'adapter les éléments graphiques selon de la largeur de l'écran. Cependant, il faut aussi penser à la hauteur de l'écran. Voici 2 éléments concrets où cela se révèle utile:

• Meilleur gestion de la ligne de flottaison. S'il y a un bouton d'action, il faut s'assurer qu'il soit visible sans avoir à scroller l'écran.
• Présentation d'un menu dans une sidebar. Sur tablette, s'il y a un menu latéral il faut veiller à placer l'ensemble des boutons sans avoir à scroller. En dessous d'une certaine hauteur, le menu peut même se transformer en liste déroulante.

Optimiser les performances pour les différents supports

Lorsqu'un visiteur accède à un site depuis son mobile, le chargement doit être rapide. Une attention toute particulière doit être portée aux performances étant donné que les mobiles n'ont pas une connexion internet très rapide. Il faut alors adapter les images ou le code javascript si l'utilisateur accède au site depuis un mobile. Certaines images ou scripts trop lourds peuvent être évités si la connexion est très lente.

Changer les images selon le format

Si la largeur de l'écran est inférieur à 400 pixels (par exemple) il est inutile de charger des images ayant une largeur supérieur à la dimension de l'écran. Il est ainsi possible d'adapter toutes les images de fond selon la largeur de l'écran.

Ne pas surcharger par du vide

Lorsqu'on débute avec les media-queries, il est courant de laisser le design habituel et de surcharger les classes qu'il faut modifier. L'exemple basique consiste à afficher une image et à la cacher si l'écran est moins large que 500 pixels, comme ci-dessous:

{code type=php}

h1{
background:url(image.png);
}
@media screen and (max-width: 500px) {
h1{
background:none;
}
}
{/code}

L'exemple ci-dessus charge inutilement l'image par les smartphones pour ensuite la cacher. La meilleure pratique consisterais à ne pas utiliser d'image et à la charger exclusivement si la largeur d'écran est supérieur à 500 pixels, comme ci-dessous:

{code type=php}

h1{
background:none;
}
@media screen and (min-width: 500px) {
h1{
background:url(image.png);
}
}
{/code}

Ne pas charger les scripts inutiles

Les codes javascript sont relativement long à charger. S'ils ne sont pas utilisés pour la version mobile il devient inutile de les charger. Sachant qu'il est possible de détecter la largeur de l'écran grâce à javascript ou jQuery, il est possible de ne pas utiliser de script si la taille de la fenêtre est petite. Voici des exemples concrets où cela vous sera utile:

• Ne pas afficher de slider pour la version mobile.
• Ne pas utiliser jQuery pour la version mobile. Cette librairie est relativement lourde, si elle est peu utilisée autant utiliser directement javascript pour de meilleurs performances.
• Charger des images avec le format adapté à la taille de l'écran.

Adapter l'expérience utilisateur

Le plus important est laissé pour la fin. Ce qui est souvent oublié lors de la conception d'interfaces mobiles et tablettes c'est l'ergonomie et l'expérience utilisateur. Les internautes ne navigueront pas sur un site de la même façon sur un ordinateur avec une souris que dans un lieu public avec un smartphone à écran tactile. Il faut donc veiller à adapter certains éléments:

• Pas de survol de la souris sur mobile et tablette, il faut s'assurer que l'utilisateur sait ce qui est cliquable ou non.
• Avec les écrans tactiles il faut des liens suffisamment gros pour être facilement cliqué. Les liens peuvent être transformé en boutons.
• Un gros menu peut être transformé en liste déroulante pour être visible facilement sur la hauteur d'un écran de mobile.
• Un écran haute définition tel que celui de l'iPhone mérite des images de hautes qualités.
• Sur un mobile ou une tablette la main tiens l'appareil par le côté inférieur ou par le côté. La partie haute de l'écran est par conséquent plus longue et compliquée à atteindre. Le menu peut donc être placé en bas, comme représenté par la zone rouge sur l'image ci-dessous:

Interface responsive adaptées aux différents supports

Et bien d'autres

Bien entendu cet article n'est pas exhaustif. Les développeurs front-end et spécialistes en ergonomie et expérience utilisateur ont encore beaucoup à nous apprendre sur ces nouveaux supports. Un métier tout entier ne peut pas être résumé sur un simple article. N'hésitez pas à partager vos astuces et bonnes pratiques dans les commentaires de l'article.

Petit mot de la fin, ne vous fiez pas au design de ce site web, ce sont souvent les cordonniers qui sont les moins bien chaussés. Mais des évolutions sont prévues.