Le responsive web design, nouvelle tendance

Le responsive web design, nouvelle tendance

Le responsive web design, qu’est-ce que c’est ?

 

 

Le responsive web design est la nouvelle tendance pour les sites web. Elle est une technique qui permet différents sites de s’adapter automatiquement aux différents tailles d’écrans existants  (mobile, tablette, pc, écran tv, etc).

 

Cependant, l’utilisation de cette technique demande de nombreuses réflexions à savoir l’organisation de son contenu, le choix des images, le positionnement des blocs, etc.

En effet, un site responsive ne s’adaptera pas de la même façon qu’un site internet sur sa taille classique. En fonction de la taille de l’écran, les différents blocs du site vont se déplacer et se mettre l’un en de sous de l’autre.

C’est ce qu’on appelle le point de rupture. Cela ne correspond pas forcément à une largeur dite « tablette » ou « mobile » (car, comme on l’a vu, il existe plusieurs largeurs type pour des tablettes et des mobiles). Ces points de rupture dépendent complètement de votre site. C’est votre webdesigner qui doit vous indiquer à quel moment ces points de rutpure doivent être créés.

 

Les composants principaux

 

Un site web pensé sur le principe du responsive web design utilise la technologie CSS 3 media queries, une extension de la règle @media 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 page.

Le 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.

Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels.

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.

Il existe aujourd’hui d’autre technique permettant de mettre en place la technique du responsive web design. On retrouve une des techniques le plus connu, le BOOTSTRAP de Twiter. Cette technique reste sur les mêmes principes de blocs et de grille.

 

En terme général, on doit penser mobile avant tout. On parle du « Mobile first », on part de l’évidence que le responsive doit avant tout partir et être organisé pour le mobile pour ensuite décliner sur les autres tailles d’écrans pour arriver à la taille desktop.

Aujourd’hui, beaucoup d’outils de CMS utilise et permet de mettre en place un site web avec toutes les fonctionnalités du responsive web design, facilitant ainsi la création du site internet. On retrouve, Drupal, WordPress, Joomla, etc.

 

Technetweb, permet à tous nos clients d’avoir un site responsive web design afin de rendre leur site internet professionnel et à l’image de leur société. Tous cela à un tarif peu coûteux.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>