Responsive Design avec Drupal

Le Responsive Design avec Drupal

4 décembre 2012 par Adrien

A l’heure où l’utilisation d’internet mobile dépasse celle du bureau, zoom sur le Responsive Design

Responsive Web Design

Pourquoi développer son site en Responsive Design ?

Avec l’avènement des Smartphones et des tablettes tactiles, les modes de consommation du web s’ouvrent à la mobilité. Conséquence : les sites web doivent s’adapter à chaque support.

Qu’est-ce que le Responsive Design ?

Il s’agit d’une approche qui consiste à adapter la mise en page d’un site en fonction du terminal utilisé par l’utilisateur : Smartphone, tablette, ordinateur portable …

Les avantages

Un site conçu en Responsive Design présente plusieurs avantages :

  • Un seul site à maintenir : le développement d’application mobile ou tablette n’est plus nécessaire (économie des coûts)
  • Une URL unique : idéal pour une communication centralisée
  • Une bonne expérience utilisateur quel que soit le support utilisé

Les inconvénients

Il n’y a pas véritablement d’inconvénient au développement d’un site en Responsive. Cependant, on peut observer quelques freins :

  • Un design plus complexe à mettre en place
  • Un temps de développement plus conséquent

Un investissement plus conséquent certes, mais pour des résultats optimisés : le Responsive Design est un pas vers l’avenir puisqu’il anticipe la consommation de plus en plus mobile du web.

Comment développer son site en Responsive Design ?

Trois fondamentaux interviennent lors du développement d’un site en Responsive :

  

Le système de grille flexible

Le but est d’aboutir à une structure fluide pour le site concerné 

Media Queries  

Les media queries

Ils définissent la mise en page du site en fonction de la taille de l’écran, en optimisant les feuilles de style 

Les images responsive  

Les images Responsive

Elles s’adaptent à la taille l’écran par recadrage ou par redimension

Et avec Drupal ?

La mise en place d’un site en Responsive Design sous Drupal intervient dans une logique de conception globale et, idéalement, dès le début de sa conception. Les concepteurs effectuent un travail de fond sur l’ergonomie du site.

Des outils sont mis à la disposition de la communauté Drupal. Le thème Omega est l’une des solutions la plus aboutie à ce jour : Omega est basé sur un système de grilles et permet le développement rapide de site Responsive avec Drupal. Il est également possible d’utiliser la solution extrêmement populaire Bootstrap, développée par les équipes du réseau social Twitter.

Une Video d'Acquia sur le responsive Design :

 

Un exemple de site Drupal développé avec le thème Omega : university.asco.org

Des exemples de sites développés en Responsive Design : http://mediaqueri.es 

Rubrique