alpha-pyxidis
alpha-pyxidis

Un site web "responsive design"

Vincent   22/11/2015  

La multitude des équipements permettant de naviguer sur le web et leurs différentes capacités d'affichage a amené les webdesigner à concevoir des sites web différents selon que l'internaute utilisait un ordinateur ou un téléphone mobile, voire un smartphone.

Différencier les parcours de navigation...

La solution qui était d'abord proposée consistait  a rediriger vers tel ou tel site l'internaute selon l'équipement qui était utilisé. La page d'accueil du site détectait l'équipement utilisé (par exemple en  récupérant la variable HTTP_USER_AGENT de l'entête de la requête HTTP envoyée au serveur web) et redirigeait vers telle ou telle page selon l'équipement détecté.

L'inconvénient était qu'il fallait développer et maintenir plusieurs sites en paralèlle pour un même contenu (en général).

... ou créer un site adaptatif

Plutôt que de concevoir plusieurs parcours de navigation, l'idée du "responsive design" est de concevoir un site qui adapte la mise en page en fonction du terminal de l'utilisateur (et de la résolution d'affichage).

En général la conception d'un site adaptatif passe par une feuille de style CSS qui exploite des règles @media, un concept de grilles fluides et une gestion de positionnement relatif des éléments par rapport à leur conteneur.

Plus d'infos

page Wikipedia : Site web adaptatif

framework CSS, HTML5 et javascript : GroundworkCSS 2 (celui utilisé pour ce site)    Twitter Bootstrap

tutos : W3Schools

 

Retour au sommaire

Localisation

  • cet article n'est pas (encore) géolocalisé