Responsive Design – Principes de base

LEÇON

 

L'évolution des écrans et son impact sur l'affichage des pages web

Avant l'époque des smartphones et tablettes, avoir un affichage correct pour son site web était surtout une question de décider une largeur qui fonctionne pour la plupart du monde. D'abord les pages étaient formatées avec une largeur de 750 ou 760 pixels car la plupart du monde avait un écran de 768 pixels ou supérieur. Plus tard, quand les écrans plus larges étaient plus répandus, on visait 960 ou 990 pixels de largeur. Beaucoup de sites non-adaptatifs appliquent toujours cette règle. D'autres visent 1200 pixels minimum par exemple.

Le nombre de pixels de largeur minimale n'est pas ce qui est important à retenir dans cette histoire : ce qui est intéressant est qu'un minimum était en place dans les habitudes des développeurs web.

Mais avec l'apparition des téléphone portables et tablettes capables de surfer le web il est devenu évident qu'avoir un site adapté pour une seule largeur minimale n'est plus valable comme approche.

 

Qu'est-ce que Responsive Design ?

En français : Conception adaptative ou Design adaptatif

Les techniques du responsive design sont une réponse à cette problématique. Il s'agit d'un ensemble de techniques qui permet d'adapter l'affichage d'une page web à la volée selon la largeur de l'écran (ou, plus précisément, la largeur de la fenêtre du navigateur). Ainsi une page web en responsive design ne s'affiche pas forcement de la même manière sur des écrans de largeur différente.

Attention, il ne s'agit pas simplement de mettre un effet zoom. Dans Responsive Design on vise à réorganiser les éléments sur la page et ainsi optimiser leur affichage selon la taille de l'appareil.

Les techniques en question sont des techniques CSS et JavaScript. En gros on adapte, selon la largeur de l'écran, la largeur et l'agencement des éléments présents dans le contenu via le CSS. Et, éventuellement sur des très petits écrans, on cache certains éléments (grands menus par exemple) puis les fait apparaître via JavaScript suite à des clics ou des évènements similaires.

 

Exemple d'affichage adapté

 

Ecran large (genre PC) :

responsive_affichage_exemple1

 

 

Ecran un peu moins large (genre tablette en paysage) :

responsive_affichage_exemple2

 

Ecran encore un peu moins large (genre tablette en portrait) :

responsive_affichage_exemple3

Ecran étroit (genre smartphone) :responsive_affichage_exemple4