Content-is-like-water-1980

« Content-is-like-water-1980 » par Stéphanie Walter — CC BY-SA 3.0

Magneticlab Sàrl s’appuie sur ce concept pour réaliser le 99% des « sites » actuels mais à quoi correspond cette notion de « RESPONSIVE » Design ?

Principe

La notion de web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, puisqu’il ne s’agit plus de concevoir autant de parcours qu’il y a de famille de terminaux mais de concevoir une seule interface auto-adaptable. Ainsi, les sources d’information et les socles techniques ne sont pas dupliqués. Cela engendre des économies d’échelles dans la conception et la maintenance de sites internet bénéficiant de ce mode de conception.

Composants principaux

Un site web pensé sur le principe du RWD2 utilise la technologie CSS3 media queries (en)3,4, une extension de la règle @media5 pour adapter la mise en page à l’environnement de consultation grâce à une grille fluide dans laquelle se casent les différents contenus de la page6.

  • Media queries permet à la page d’utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s’agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées « points de rupture » et correspondent à un besoin de modifier la mise en page à partir d’un certain seuil critique pour la facilitation de la navigation et de la lecture du contenu.
  • Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points6.
  • Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur.

[clearline]

source: http://fr.wikipedia.org/wiki/Site_web_adaptatif 

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather