Bluewink.fr » Accueil blog » Qu’est ce que le responsive design ?

Qu’est ce que le responsive design ?

Le responsive design, pouvant être traduit en français par Design web adaptable regroupe un ensemble de techniques et technologies (en particulier CSS) dans le but d’offrir à l’internaute la meilleure expérience de navigation possible sur tous les supports (écrans, tablettes, smartphones, TV, etc.). C’est une technique de conception qui permet au site de s’adapter automatiquement à l’espace disponible à l’écran et lui permet d’être totalement indépendant de la plateforme sur laquelle il est visionné.

A l’heure ou les smartphones représentent presque 20% du traffic (statistique générales, Statcounter), plus personne ne doute de l’avenir du web mobiles.

Un site dédié aux mobiles: une bonne idée ?

Contrairement à un design responsive, un site mobile est une copie du site dont on aura retiré certaines fonctionnalités non compatibles et adapté la mise en page ou les images. Mai depuis l’apparition des tablettes, la gamme d’appareils mobiles ne se cantonnent plus aujourd’hui qu’aux smartphones.

Là encore, on retombe dans des problématique que le webmasters rencontraient déjà sur le web au temps ou les navigateurs ne respectaient pas encore de standards communs. Enfin, maintenir ou faire évoluer plusieurs versions d’un site sur une multitude de plateformes devient vite un casse tête.

Enfin, maintenair plusieurs site complique le référencement puisque vous avez plusieurs adresses qui pointent vers un contenu identique (duplicate content). Encore un casse tête pour un bon référencement…

Un même site responsive pour ordinateurs et mobiles

C’est la nouvelle tendance, et c’est une vraie innovation . Selon moi, un design responsive est d’ailleurs un bien meilleur choix qu’une application mobile puisqu’il est totalement indépendant du système (iPhone ou Android par exemple) et décharge de créer des applications souvent médiocres par rapport au contenu réel du site.

De façon concrète, lorsqu’on conçoit un site web par blocs, deux techniques permettent d’en adapter la disposition.

  • La définition des tailles de blocs relatives (en pourcentages d’un contenant);
  • Une disposition des blocs qui changent selon la taille de l’écran.

Illustration d’un design responsive

responsive01

Un site web responsive vu d’un ordinateur

responsive02

Le même, sur une résolution de téléphone.


C’est aussi un avantage en terme de maintenabilité et de perspectives: en simple, vous n’avez qu’à faire évoluer une seule plateforme. Vous gagnez en ergonomie, et le client réduit potentiellement ses coûts.

La technique derrière le design responsive

La technologie responsive s’appuie sur les feuilles de style (CSS3) et les media queries qui sont des règles qui permettent d’appliquer telle ou telle condition de mise en forme selon la résolution détectée.

Le responsive web design s’appuie également sur un système de grilles fluides (une disposition d’éléments en tableau dont les dimensions sont définis en pourcentages ce qui permet de garder une ergonomie relative à la résolution). Ces deux technologies sont complémentaires.

Pour les webmaster, voici deux bons frameworks que nous avons testé ou dont nous faisons usage.