Qu’est-ce que le responsive design ?

Qu'est-ce que le responsive design ?
Share Button

Définition 

Un site web est responsive lorsque son contenu est adapté selon la taille de la fenêtre de navigation et, par conséquent, le support sur lequel le site est visité (ordinateur, smartphone, tablette). Pour savoir si un site est responsive, il suffit de redimensionner la fenêtre de navigation pour voir si celui-ci s’adapte. Ce fonctionnement est différent des sites mobiles, qui eux se basent sur le type d’appareil mobile utilisé pour choisir la bonne apparence.

Quels avantages pour le responsive design ?

  • Que ce soit sur ordinateur, smartphone, ou tablette, le contenu du site reste le même. Pas besoin de s’occuper du contenu pour chaque terminal.
  • Le développement d’un site responsif revient beaucoup moins cher que le développement d’un site mobile et d’un site pour Web.

 

Quels inconvénients ?

  • La différence entre les différentes versions (ordinateurs, tablettes, smartphones) n’est pas si grande. Dans certains cas, une ergonomie destinée uniquement au mobile peut être un facteur de performance par rapport au responsive design. L’objectif n’est généralement pas le même.

 

Comment créer un site responsive ?

A la différence des sites mobiles, le site web responsive utilise les mêmes fichier css et html quel que soit le terminal utilisé.  3 éléments à tenir en compte dans le responsive design :

  • Les « grilles flexibles » qui repositionnent les éléments de la page internet lors de la redimension de la fenêtre. Ces repositionnements se font à l’aide des blocs <div>.
  • La redimension des médias et éléments de la page pour qu’ils ne « débordent » pas de l’écran
  • Les « media queries » permettant (par exemple) d’appliquer des instructions conditionnelles, en fonction de la taille de l’écran, dans le fichier CSS.

 

Si cet article vous a plu, nous vous invitons à consulter régulièrement notre blog.

Share Button
Aucun commentaire

Sorry, the comment form is closed at this time.