Responsive Web Design

Qu'est-ce que le Responsive Web Design

Le Responsive Design est une approche qui propose une solution à la problématique causée par la multiplication des appareils à partir desquelles sont consultés les sites Internet.

À partir du même code, un site conçu en Responsive Design s'adaptera au format d’écran de l’appareil sur lequel il est consulté, en essayant de ne pas compromettre l’expérience de l’internaute.

Pour y arriver, le code HTML, les feuilles de style (CSS) et le JavaScript sont mis à contribution afin de permettre l’ajout ou la suppression de sections, la redimension des contenus et la transformation de la mise en page.  L’utilisation de frameworks tels que Bootstrap, Fondation et Pure est recommandée afin d’atteindre plus rapidement des résultats.

Historique

Il y a 10 ans, la conception d’un site était déjà un défi. Netscape et Internet Explorer ne supportaient pas les mêmes standards et les écrans des utilisateurs tardaient à passer au XGA (1024 x 768 pixels).  Aujourd’hui, la situation est encore plus complexe.

Le web est consulté sur une multitude d’appareils qui adoptent chacun des formats d’écran différents.  Les navigateurs sont nombreux (Chrome, Firefox, Internet Explorer, Safari) et les systèmes d’exploitation aussi (iOS, Android, Windows, OSX, Linux).  Il est difficile de savoir avec précision dans quel contexte un site sera consulté.

Est-ce que mon site doit supporter plusieurs appareils et formats d’écrans?

La réponse est oui.  C’est essentiel.  Entre le premier quart (Q1) de 2012 et le premier quart de 2013, la consultation via téléphones intelligents et tablettes a doublé, passant de 12% à 22%.  La tendance de 2013 veut qu’à chaque quart, ce pourcentage augmente de 3%.  Ce qui veut dire qu’en 2014, plus de trois visites sur dix s’accompliront sur un appareil mobile.

Quelle est la meilleure stratégie?

Lorsque vient le temps de concevoir un nouveau site, plusieurs stratégies peuvent être adoptées.  Par exemple: 

  • créer des sites dédiés pour mobile, tablette et poste de travail et rediriger l’internaute d'un à l'autre à l’aide de techniques de détection;
  •  limiter l’utilisation du site à un format d’écran précis (requis minimum pour consultation);
  • utiliser une approche mixte, combinant un site Web et des applications mobiles (iOS, Android);
  •  utiliser le Responsive Design.

Est-ce que mon site peut être développé en Responsive?

Le Responsive Design impose des choix esthétiques et fonctionnels.   Même si visuellement les sites en Responsive paraissent différents, leur comportement est assez similaire, ainsi que la structure de leurs pages.  Il faut donc accepter de travailler dans un certain cadre.

Avant de prendre une décision, il y a au minimum cinq questions à se poser:

  1. Est-ce que mon site est trop volumineux et ma navigation trop granulaire? 
  2. Est-ce que mon contenu peut facilement s’adapter?  Par exemple, ai-je besoin d’une mise en page complexe pour présenter mon information?
  3. Est-ce que j’utilise des tableaux, graphiques ou autres éléments difficiles à redimensionner?
  4. Est-ce que j’utilise des composantes externes sur lesquelles je n’ai pas de contrôle?
  5. Suis-je prêt à faire des compromis au niveau esthétique?

Si vous avez besoin de conseils supplémentaires, contactez-nous.  Il nous fera plaisir de vous aider dans vos démarches.


Références et ressources :

Catégorie : Interactif

Auteur :