Clic'Zine



Définition - Responsive Design

Une expression qui trône en bonne position sur notre site depuis plusieurs années, et pourtant, nous entendons encore bien souvent la question : Qu’est-ce que le Responsive Design ?

Responsive Design ou Responsive Web Design (RWD) est bien un terme issu de notre jargon professionnel et (encore !) un anglicisme. Nous le traduisons et l’expliquons par « site Internet accessible depuis tous terminaux : PC, mobile, tablette, etc. ». Et, si vous ne connaissiez pas le terme, vous en avez, sans doute, déjà fait l’expérience au cours de vos navigations sur le Net. Le terme officiel en français est « site web adaptatif ».

Depuis plusieurs années, les techniques de conception de sites Internet se sont grandement multipliées et diversifiées. Les différents outils et technologies disponibles sont de plus en plus nombreux et il convient, pour chaque projet donné, de faire les choix techniques appropriés.

La part des « mobinautes » est en constante progression dans les statistiques de visites de la plupart des sites et il est désormais fortement recommandé de leur offrir un mode de consultation plus fluide et plus confortable que celui d’un site affiché tel quel en miniature sur leur petit écran.

Dans un premier temps, il était courant de proposer deux versions aux visiteurs, l’une pour ordinateur de bureau, l’autre pour les téléphones mobiles. Outre la double charge de travail de création et de maintenance, cette solution posait des problèmes pour le référencement, car les moteurs de recherche (enfin, le plus capricieux d’entre eux) pouvait considérer les deux versions comme étant du contenu dupliqué et les exclure de ses résultats. La technologie Responsive (ou adaptative) s’est finalement imposée comme le meilleur compromis pour la réalisation de sites.

Nous devons cette évolution à Ethan Marcotte, l’inventeur du Responsive Design, qui a énoncé 3 principes fondamentaux :
- Des grilles fluides (flexible grid): l’interface construite sous forme de grilles permet de jouer sur un nombre plus ou moins élevé de colonnes dans lesquelles les contenus coulent (comme s’ils étaient liquides);
- Des images flexibles : la taille, la disposition s’ajustent en fonction de l’écran;
- Des requêtes de média (media-queries) qui permettent de détecter les caractéristiques du support utilisé comme la taille de son écran (ou de la fenêtre du navigateur) et de s’adapter en conséquence.

Ces principes permettent de rendre le contenu prévu pour la consultation sur ordinateur de bureau adaptable à la lecture sur tous types d’écran. Les contenus, textes, images, vidéos, etc. rendus flexibles, vont s’adapter à la largeur et la résolution de l’écran du terminal de réception. Il ne s’agit pas d’une technique précise mais d’un ensemble de pratiques qui réunit méthodes de conception et utilisation de la technologie media-queries et CSS3. Les éléments qui composent la page sont placés sur une grille fluide dont on ajuste la disposition selon le type d’écran. Aujourd’hui, on observe une tendance à prévoir la structure d’affichage des contenus directement pour les mobiles qui sera la même pour les ordinateurs de bureau.

Comme vous pourrez le voir dans nos différents descriptifs de services, nous avons fait le choix du Responsive Design pour toutes nos offres de création de sites Internet.

Cliquez sur les images ci-dessous pour consulter nos offres de sites Responsive Design :


Pour aller plus loin :

Site officiel d' Ethan Marcotte inventeur du Web Design