Le Responsive Web Design est l’une des tendances incontournables dans la création de site web, mais malgré son importance ce concept reste enveloppé dans l’ambiguïté pour beaucoup de personnes.

Si vous êtes l’une de ces personnes voici une petite introduction pour mieux comprendre le Responsive Web Design phénomène et les moyens qui peuvent vous aider à l’implémenter dans vos sites web.

I. Définition

Le Responsive Web Design est une approche de création de pages Web qui s’adaptent ou se redimensionnent en fonction du type de dispositif sur lequel il est affiché. Cela pourrait être un écran d’ordinateur de bureau surdimensionné, un ordinateur portable ou des appareils avec de petits écrans tels que les smartphones et les tablettes.

II. Le Pourquoi ?

Chaque année on a de plus en plus de nouveaux dispositifs sur lesquels on peut consulter les sites internet (Iphone 5, 6, 7, 8…, Ipad, Ipad mini, Androïd, Ordinateur portable, Ordinateur bureautique…). Avec autant de tailles d’écrans différentes, on a besoin de fournir à tous les visiteurs la même qualité de navigateur pour ne pas en perdre.

Suite à cette évolution, le Responsive Web Design s’impose pour répondre aux nouveaux besoins et pour gagner du temps et de l’argent en développant un seul code pour l’ensemble des dispositifs.

Google recommande aussi aux webmasters de mettre en place une version responsive et il va même jusqu’à mettre en avant les sites optimisés pour les mobiles au sein de ses résultats de recherche.

III. Le Comment ?

Pour rendre une page web responsive on doit travailler avec l’une des méthodes suivantes :

1. Grilles fluides

Les grilles permettent de structurer le contenu de votre mise en page. Grâce à des repères horizontaux et verticaux, vous aurez une armature sur laquelle vous pourrez organiser vos textes et images.

Dans le cas du responsive design, nous utiliserons une grille fluide qui, contrairement à une grille traditionnelle, se redimensionnera en fonction de la taille de l’écran et peut s’adapter à n’importe quelle largeur, car elle utilise des unités relatives de mesures telles que des pourcentages ou des unités em, au lieu des unités fixes telles que les pixels.

2. Requêtes médias

Les requêtes médias (media queries) vous permettent d’appliquer différentes règles de styles CSS en fonction du type d’appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d’écran ou la largeur de la zone d’affichage (viewport) par exemple).

En d’autres termes, les sites web utilisent des requêtes médias pour appliquer certains styles compte tenu de la taille de l’écran.

3. La balise meta viewport

Dans certains cas, le responsive web design utilise également la balise meta viewport des médias lorsqu’un périphérique ne peut pas déterminer la largeur initiale ou l’échelle d’un site web, ce qui empêche les requêtes médias de se déclencher. Pour lutter contre cela, on utilise la balise meta viewport.

La balise meta viewport possède généralement une échelle initiale de valeur height ou width définie sur 1, ce qui résout le problème de ne pas reconnaître échelle du site en utilisant le ratio entre la hauteur de l’appareil ou la largeur et la taille de la fenêtre d’affichage.

4. Média responsive

Les média responsive ou flexibles sont des médias (images, vidéos et autres fichiers multimédia) flexibles avec une largeur relative à leur conteneur (parent) pour qu’ils ne débordent pas lorsque celui-ci se restreint.

Afin d’assurer que les fichiers ne vont pas au-delà de leur ‘parent’ et que l’échelle est bien basée sur la taille de l’écran, la largeur (width) doit être en pourcentage.

Maintenant que vous connaissez les astuces pour rendre votre site web responsive, on vous conseille de les essayer par vous même. La pratique vous aidera à les mémoriser et à devenir plus habile.