Photos HDR
 

Qu'est-ce Que Le Responsive Design ?

Qu'est-ce que le responsive design ?

Le responsive design est la nouvelle tendance en matière de conception de sites web. Son but est de permettre une consultation optimale du site quel que soit le support utilisé (ordinateur, tablette ou smartphone). Explications.

Définition du RWD

Le responsive design, aussi appelé RWD (abréviation de Responsive Web Design) est une nouvelle façon de concevoir les sites web afin qu’ils puissent être consultés de manière optimale quel que soit le support utilisé.

Avec la mode des tablettes et des smartphones, les habitudes des internautes changent. Les sites Internet doivent donc s’adapter à ces nouveaux supports dont les définitions d’écran sont quasiment toutes différentes.

C’est là tout l’intérêt de la technologie du "responsive web design" qui signifie littéralement "conception web adaptive".

Fonctionnement du RWD

Le principe du responsive design est simple : une seule interface accompagnée d'une URL est prévue pour fonctionner avec une ergonomie adaptée quel que soit le terminal de lecture (ordinateur, tablette ou smartphone).

Cette technologie relativement récente utilise les media queries des feuilles de style. Cette fonction en CSS 3 permet de cibler la largeur, la hauteur ou encore l’orientation d’une page dans une seule et unique feuille de style.

Au final et pour une même adresse web, les pages du site s’adaptent automatiquement au format de lecture utilisé. Sur les plus petits écrans, seuls les contenus les plus intéressants restent affichés sur la page et il n’est plus nécessaire de zoomer pour lire le texte.

Si vous voulez en faire l’expérience, il vous suffit de vous rendre sur un site utilisant cette technologie (par exemple photoreview.fr ci-dessous) et de réduire la taille de la fenêtre avec votre souris. Vous verrez alors, comme par magie, le contenu du site s’adapter à la taille de la fenêtre.

Avantages du RWD

Le responsive design a des avantages évidents pour les internautes, puisqu’il leur assure une lecture et une navigation agréables quel que soit l’appareil utilisé.

Mais cette technologie est aussi avantageuse pour les concepteurs de sites. Elle leur évite de développer des versions spécifiques pour smartphones et tablettes.

La coexistence de versions mobiles comporte toujours des risques d'erreurs et de déperdition en terme de référencement naturel. Et bien sûr, avec le RWD, le coût de développement est moins élevé qu’un site mobile dédié.

En contrepartie, avec le responsive web design, les pages sont souvent plus longues à charger qu'avec une version mobile dédiée.

Exemples de RWD

De plus en plus de sites adoptent le responsive design, à commencer par le site officiel de Barack Obama (http://www.barackobama.com/).

En France aussi, quelques sites utilisent cette technologie, notamment :
• ZDNet, site spécialisé dans les nouvelles technologies
• le site officiel de l'Élysée
• Photoreview, un site consacré à la photographie.

Plus d'information :

Visitez le site : http://www.photoreview.fr/

Tag : responsive design, responsive web design, RWD, web design responsive, responsive design definition, definition responsive design, sites responsive design, avantages responsive design, media queries

Avis

Devenez membre pour donner votre avis !

Donner votre avis