Le responsive web design

Dans les milieux de l’intégration et du web design, on entend de plus en plus parler de responsive web design ou design adaptatif. Il s’agit d’un process créatif et d’un ensemble de techniques destinées à adapter le design d’un site à la résolution d’écran du terminal.
Sans avoir l’ambition de faire l’article le plus exhaustif du monde sur le responsive design, voici un aperçu des principes de base du fonctionnement de la chose.

Avec l’émergence et la démocratisation des smartphones et des tablettes, la question d’adapter le design de son site peut en effet se poser : de plus en plus de gens surfent depuis leur mobile et il est parfois plus difficile de naviguer sur un site depuis son téléphone portable; on aimerait bien bénéficier d’une version plus simple par exemple.

Grâce aux media queries de CSS3 il est possible de “détecter” les dimensions de la fenêtre de visualisation (viewport) et de charger à la volée une feuille de styles CSS particulière. En pratique il y a (en gros) deux approches : l’approche “traditionnelle” ou l’approche “mobile first”.

Pour l’approche “traditionnelle” on commence par la création du design général, sans changer ses petites habitudes, puis on l’adapte pour les mobiles/tablettes; en  supprimant des éléments, ajustant la typo,  les images etc.

Pour l’approche “mobile first” : on va partir sur la version mobile, la plus minimaliste, puis “améliorer” progressivement le design en fonction des résolutions d’écran supérieures.

L’avantage de cette dernière technique est de ne charger que le strict minimum pour un mobile, les styles concernant les résolutions supérieures seront ignorés. On gagne donc en temps de chargement et en bande-passante, ce qui est intéressant pour l’internet mobile. En revanche tous les navigateurs n’étant pas encore compatibles avec les media queries, les utilisateurs de ces derniers risquent de se retrouver avec un thème graphique pour mobile, même en navigant sur un écran 27″ ! C’est notamment le cas pour toutes les versions d’Internet Explorer antérieures à la version 9, ce qui est bien pénible ennuyeux.

Les navigateurs compatibles avec les media queries

Ces approches ayant toutes deux des avantages et des inconvénients, à chacun, donc, d’expérimenter et de choisir sa méthode préférée. Mais quelle que soit l’approche retenue, le plus important est de définir les points de rupture de son design; les différentes résolutions qui demanderont des styles CSS spécifiques. Par exemple je vais décider d’employer la première approche, donc créer mes styles généraux pour tous les écrans d’une largeur supérieure à 1024 pixels, puis décider de prévoir une adaptation du design pour les tablettes en mode portrait (768 pixels de large), les smartphones en mode paysage (480 pixels) et en mode portrait (320 pixels).

Techniquement, au niveau de l’intégration des styles CSS, deux possibilités nous sont offertes : gérer des feuilles de styles séparées, généralement une par point de rupture, ou bien ne gérer qu’une seule feuille de styles et y intégrer les media queries.

Première technique, on intègre les liens vers les différentes feuilles de styles CSS dans la partie <head> comme ceci :

<link rel="stylesheet" href="styles.css" media="screen" />
<link rel="stylesheet" href="styles.css" media="screen and (max-width: 768px)" />
<link rel="stylesheet" href="styles.css" media="screen and (max-width: 480px)" />
<link rel="stylesheet" href="styles.css" media="screen and (max-width: 320px)" />

En choisissant la deuxième technique on intègre les media queries directement dans notre feuille de style principale :

body {
    background-color: #000;
}

  @media only screen and (max-width: 768px) {
        body {
           background-color: #fff;
        }

Dans cet exemple, la balise <body> a un fond noir défini par les styles généraux, fond qui devient blanc pour les écrans à la résolution inférieure ou égale à 768 pixels de large, une tablette en mode portrait par exemple.

J’ai personnellement opté pour un mix de ces deux techniques : j’appelle deux feuilles de styles dans la partie <head>, style.css (les styles généraux) et response.css (toutes les media queries). Ce n’est pas nécessairement la technique à l’optimisation la plus poussée, mais mon unique souci est pour le moment de me faciliter la maintenance et les retouches. Je pense que chacun pourra développer sa propre technique et ses propres astuces.

Le sujet est vaste et il y a encore beaucoup à dire : design en pixels ou en pourcentage, nombre de points de ruptures, techniques d’images fluides… Sans doute pour de prochains articles.

responsive design exemple
responsive design exemple

Un livre sympa sur le sujet
Un site sympa pour tester les media queries
(avec anybodesign en démo)

On en discute ?

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