Responsive webdesign

Le responsive webdesign, ou webdesign adaptatif, est un ensemble de techniques selon lesquelles l'affichage d'un site web s'adapte automatiquement au type d'écrans : mobile, tablette, PC, objets connectés, etc.

Les feuilles de style CSS permettent d'adapter un design existant à un usage mobile avec en particulier la possibilité de gérer la largeur, redimensionner les éléments, passer à une colonne, gérer les débordements et adapter les liens et les tailles de polices en fonction de l'orientation. Les règles de mise en forme peuvent être édictées dans un fichier CSS séparé, ou bien dans le fichier de styles principal, à l'aide d'une règle media query, c'est-à-dire qui associe un type de média et une ou plusieurs expressions traitant de fonctionnalités du média et qui sont interprétées comme vraies ou fausses.

Le viewport, qui désigne schématiquement la surface de la fenêtre du navigateur, est une notion nécessaire à maîtriser pour constituer un site en responsive webdesign. Par exemple, fixer le viewport dans le document HTML avec un élément méta Viewport de type <meta name="viewport" content="width=device-width" /> évite le redimensionnement automatique de la mise en page, qui rend les contenus trop petits pour être lus.

Atouts et limites du responsive webdesign

Le webdesign adaptatif évite les inconvénients de la production d'un site mobile propre, en particulier l'obligation de maintenir deux sites distincts et les risques de contenu dupliqué et donc d'une moindre performance dans les moteurs de recherche. Toutefois, il s'agit d'une technologie complexe et dont les résultats sont parfois décevants, par exemple en ce qui concerne l'accessibilité.