Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on avr 7, 2015 in Web & Tech | 0 comments

Qu’est-ce que le «Responsive Web Design» ?

Qu’est-ce que le «Responsive Web Design» ?

Responsive Web Design (RWD) est né suite à l’explosion de la diversité des tailles et résolutions d’écrans sur le marché, et spécifiquement depuis l’arrivée des tablettes tactiles et des smartphones.

Pour garantir une lisibilité sur tous ces formats, il fut nécessaire de créer différents sites adaptés pour chaque contenu :

  • Ecran d’ordinateur de bureau (mac ou pc)
    – Plus large, avec un contenu plus complexe
    – Plusieurs colonnes dans la page
    – Des images plus grandes avec des possibilités de plein-écran
    – Plus d’éléments pour un site plus complexe
    – etc…
  • Ecran de tablette tactile
    – Moins d’information que la version bureau
    – Des images plus petites
    – etc…
  • Ecran de smartphone
    – Encore plus complexe car les tailles varies d’un constructeur à l’autre
    – Des images très petites
    – Quelques lignes de contenu
    – Plus d’étapes de navigation et adapté pour la navigation au doigt
    – Chargement des pages plus rapide
    – Comportement différent des utilisateurs
    – Transitions et animations sont en général différentes que les autres versions.
    – etc…

Toutes ces contraintes font qu’il est difficile de construire un seul et même site qui peut gérer et s’adapter automatiquement à tous les appareils disponibles. C’est pour cela que le Responsive Web Design est né !

RWD est donc l’adaptation du contenu et des images dépendant de la résolution et de la taille de l’écran. J’ai connu pas mal de techniques durant ces 15 dernières années permettant de mettre en place ce système. Mais il y en a une qui m’a particulièrement surpris. Cette technique est vraiment efficace et ce qui est bien c’est qu’elle utilise l’une des connaissances de base du développeur web : les feuilles de styles (CSS) & les Media Queries.

DESIGN
Je souhaite mettre un point important sur le design pour l’utilisation de cette technique. Il requiert une réflexion approfondie en amont afin de vérifier que tous se réunis correctement suivant les différents formats. Vous devez définir les « breakpoints » et le « worflow » avant de construire votre site.

COÛTS
Le temps de travail se fait sentir sur la conception fonctionnelle et la disposition, mais pas nécessairement sur le développement de fonctionnalités. Vous vous retrouver enfin avec le maintien d’un site unique pour plusieurs appareils et donc une réduction des coûts.

COMPATIBILITÉ IE 7, IE 8 ET IE 6
En ce qui concerne IE 6, il n’est plus utilisé. Pour les 2 autres, il n’y a aucun problème car le site prendra sa version de bureau. Il existe cependant un panel d’options permettant de simuler les media queries sur les anciens navigateurs.

Post a Reply

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>