image004 image005

Web Responsive

Qu’est-ce que c’est ?

C’est une technique de réalisation de site web, qui permet de faire des sites qui s’adaptent automatiquement à l’espace disponible sur l’écran. Cette technique basée sur le CSS permet ainsi de développer un seul site web, avec un seul code source, s’adaptant à la taille de l’écran de façon transparente.

Version PC

Version Mobile

image006 image009

Il s’agit ici des mêmes blocs HTML agencés de façon « classique » ou  « mobile ».

 Techniquement :

Le Web Responsive se base sur les Media Queries, fonctionnalité offerte par le langage CSS permettant de mettre en page les sites web. Celles-ci permettent un paramétrage de  « points de ruptures »   pour le site web. Ces ruptures serviront à définir des modèles de conception adaptés aux différents devices. image010

Concrètement :

Ces ruptures vont permettre de délimiter des blocs de code css adaptés aux devices et ainsi de décrire de façon spécifique le design. (ici taille écran max 480px) On admet généralement les dimensions d’écran / types d’affichages suivant :

ScreenHunter_32-Feb.-21-10.45

Bonnes pratiques :

  • Déclaration d’une gestion du site responsive via l’utilisation de balise meta tel que spécification du doctype et meta viewport.
ScreenHunter_32-Feb.-21-10.34
  • Les <table> HTML sont à proscrire, en effet il est impossible de réagencer facilement des <td> ou des <tr> afin de les faire basculer sur le coté ou le dessus. Le code HTML Reponsive afin d’utiliser la puissance du CSS devra donc s’architecturer en arborescence d’élements HTML naturels et s’appuyer sur une hiérarchie de class CSS.

ScreenHunter_13-Feb.-20-21.58

Ainsi un container HTML sera décrit grâce à sa classe CSS dans une ou plusieurs Media Query. Ici le bloc .bloc-container est décrit pour la gestion classique et mobile.

Pour aller plus loin :

La façon de développer en responsive est radicalement différente d’une approche de développement classique. Afin de faciliter le développement une bonne compréhension du positionnement CSS en flux est indispensable.

=> Confère utilisation des propriétés CSS :

  • display : inline-block / block (permet de rendre inline des éléments non inline :  a, img, span et inversement)
  • display : table (permet à des blocs HTML de se comporter comme des tables : alignement, même hauteur…)

Remerciements : 

Remerciement spécial à Christophe Lau pour sa formation express mais complète sur le Web Reponsive.

Plus d’info :

Site zero http://fr.openclassrooms.com/informatique/cours/qu-est-ce-que-le-responsive-web-design

Web Responsive http://objetdirect.developpez.com/tutoriels/css/responsive-design/

Attributs css3 http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Alex

 Last News