Drupal 8 : Le Responsive Design

Définition :

Le terme responsive design a été créé par Ethan Marcotte. Il désigne un ensemble de techniques (grille fluide, images flexibles, medias queries CSS3), il est fortement associé aux feuilles de style CSS3.

Le Responsive Design a pour but de pouvoir s’adapter à tout type de terminaux (Mobiles, Tablettes et autres Ordinateurs…) et à toutes résolutions d’affichage possible.

Introduction :

Il y a encore quelque années, les entreprises pouvaient envisager de mettre en place un site internet sans pour autant prendre en compte l’aspect adaptation au support. En effet, l’ensemble des consultations de sites internet était effectuées essentiellement sur ordinateur.

Depuis l'arrivée sur le marché des Smartphones et des connexions express (3G+/H+/4G), le responsive design, affichage selon le support, est devenu presque indenspensable. Cette option permet alors de cibler un public plus large.

L’adaptabilité au support peut-être alors appliquée au site internet de différentes manières comme :

• Application smartphone disponible via :

• Site internet uniquement dédié uniquement aux terminaux mobile, dont l’URL est souvent composé du mot clé “mobile” ou simplement de la lettre “m” (ex: mobile.monsite.fr).

• L’ajout de Responsive design : un site internet unique mais adaptable au multiple support disponible aujourd’hui

Quelques chiffres :

- 61% des utilisateurs qui consulte un site non optimisé sur mobile, quitte rapidement le site.

- 90% est le nombre de site internet qui ne sont pas responsives.

- 31 est le nombre en milliards de dollars que pourrait peser en 2015 la vente en ligne via les mobiles aux États-Unis.

Drupal et le responsive design

Drupal 7 a prit part de ne pas intégrer par défaut le module de responsive design et s’est vue perdre des parts de marché en raison de ne pas rattacher l’ensemble de ses sites à un multi-support. L’initiative de Drupal 8 mobile est un effort qui pourrait permettre à Drupal 8 de devenir une plateforme mobile native.

Tandis que les problématiques de l’intégration de Drupal avec les application natives (Web services) ou les applications web (HTML5) sont prises en charge par les initiatives du même nom, l’initiative Drupal 8 Mobile s’est concentrée sur les points suivants :

• Administration et gestion de Drupal depuis un terminal mobile

• Tous les thèmes Drupal 8 sont responsives

• L'amélioration des performances en front

L’ensemble des performances de Drupal 8 permet initialement de développer un site responsive après l’installation. Ainsi, tous les thèmes embarqués par défaut, ainsi que les thèmes destinés à Drupal 8, seront nativement responsives tous comme le thème d’administration (Seven) qui permettra d'administrer, de gérer ou encore d'alimenter un site Drupal directement depuis son mobile.

Des breakpoints (=points de rupture) à volonté :

Les points de rupture (largeurs pour lesquelles le design d’un site change) sont implémentés dans le cœur de Drupal avec le module Breakpoints. Ce module standardise l’utilisation des points de rupture et permet à d’autres modules, ou thèmes, d’exposer ou encore d’utiliser les points de rupture définis par chacun.

Avantages et inconvénients du Responsive Design sur Drupal :