Introduction au Responsive Design : définition et approches

responsive web design

Au départ il s’agissait d’une simple idée d’ Ethan Marcotte décrite en 2010 dans un article intitulé “Responsive Web Design“. Il lui aura fallu 2 ans pour se développer et se démocratiser. Au début de l’année 2013, le responsive design est en train de devenir le nouveau standard dans la création de sites internet.

Webmasters vous avez nécessairement rencontré ce terme, décideurs vous êtes généralement dans l’attente d’en savoir plus avant de lancer un projet de refonte, alors nous allons aujourd’hui faire le point sur cette philosophie qui consiste à prévoir quelles formes pourra prendre une page web selon le média sur lequel elle sera présentée : ordinateur, smartphone, tablette ou même téléviseur.

Qu’est-ce qu’un site web adaptatif ?

Il ne s’agit pas d’une technique précise mais d’un ensemble mêlant conception, et utilisation de la technologie media queries du CSS3. Les éléments qui composent la page sont placés sur une grille fluide (c’est à dire non figée) dont on prévoit la disposition selon le type d’écran. Prenons l’exemple d’un site sur 2 colonnes tel que celui-ci :

  • En web 1.0 on utilisait un tableau <table> de 800px de large (ou 100%) avec une colonne de 550px et une autre de 250px ;
  • En web 2.0 on utilisait deux calques <div> mesurant respectivement 700px et 260px pour remplir un body dont la largeur recommandée est 960px;
  • Avec le responsive design on place un div dont la taille varie entre 100% et 700px et un autre dont la taille varie entre 100% et 260px, selon la taille de l’écran, sur une grille :
    • Pour les écrans dont la taille est supérieure ou égale à 960px, on aura comme largeurs 700px et 260px : [700][260];
    • Pour les écrans dont la taille est comprise entre 520px et 960px on aura comme largeurs “total – 260″px et 260px : [520-699][260];
    • Pour les écrans dont la taille est inférieure à 520px, on définira la largeur des <div> à 100%, de sorte qu’ils viennent s’empiler au lieu d’être placés côte à côte.

C’est la directive @media qui permettra à notre feuille de style de savoir quelle règle appliquer.

responsive grid

Deux approches du Responsive Design

Le but du jeu est d’offrir le même contenu du plus petit écran au plus grand, et pour y arriver, soit on commence par le plus petit écran et on adapte le graphisme pour les plus grands écrans (on appelle cette façon de faire “mobile first“), soit on commence par dessiner l’écran le plus large et on adapte les blocs pour des écrans plus petits (c’est la “responsive degradation“).

Mais il faut toujours garder à l’esprit que quel que soit le support, la même information doit être accessible au même moment. Si ce n’est pas le cas, vous n’êtes pas en train de naviguer sur un site en Responsive Web Design, mais sur une web App optimisée pour votre support.

L’approche Mobile First

A titre personnel c’est celle que je préfère car elle implique que les pages conçues seront épurées, pour se plier à la double exigence de la navigation mobile : les résolutions d’écran sont faibles et les éléments cliquables doivent être suffisamment gros pour permettre une navigation aisée sur un écran tactile.

Cette tendance se retrouve dans un nombre de plus en plus grand de projets, la version 8 du CMS Drupal par exemple est élaborée en essayant de mettre en oeuvre cette approche “mobile first“.

La responsive degradation

Quand on a la chance de travailler avec un ou des graphistes (ou n’importe qui capable de créer des maquettes) c’est souvent cette approche qui est privilégiée : on commence par proposer un bel écran de 960px de large, et ensuite on le réorganise pour l’adapter aux tablettes et aux smartphones.

D’un point de vue commercial il est aussi plus facile de présenter un écran “classique” à un client et de lui proposer une version “dégradée” pour une navigation mobile.

Maintenant que nous avons vu ce qu’est le design adaptatif et les deux approches concurrentes, nous pouvons étudier quels sont les avantages et les inconvénients de cette technique dans la deuxième et dernière partie de cet article.



Source : Responsive Web Design par Ethan Marcotte

5 réponses

  1. […] avons vu récemment que le Responsive Web Design utilise les media queries CSS3 pour optimiser la présentation des pages sur le navigateur. Mais pour optimiser les performances et […]

  2. […] de la version 1.3.0, jQuery Mobile permet de concevoir des sites en utilisant la pensée mobile first, c’est à dire qu’on défini une maquette pour adaptée aux écrans à faible […]

  3. […] les amoureux de la technique (geek un jour…), il s’agit d’un site 100% responsive web design, codé selon la méthode graceful degradation et qui utilise bootstrap avec quelques […]

  4. […] Qu'est ce que le Responsive Design ? Le blog responsive-mind vous explique la définition de cette technologie basée sur le css3 et les media queries et vous présente les deux approches concurrentes.  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *