Démo vidéo en ligneCréer votre site mobile

Responsive Web Design (Design Réactif)

“Les medias queries     
       ne suffisent pas !”

Le Responsive Web Design (RWD) est un ensemble de principes/méthodes permettant de rendre un site web adaptable à chaque terminal afin d'apporter la meilleure expérience utilisateur, quel que soit le contexte de visualisation.

Qu'il soit consulté depuis un ordinateur, une tablette ou un téléphone mobile, le site s'adaptera automatiquement aux capacités du terminal utilisé.

Ce concept, très à la mode ces dernier temps, n'est pas nouveau. Il fait d'ailleurs parti des principes de base de l'accessibilité prônés par le W3C (et plusieurs autres organismes) depuis de nombreuses années.

Les sites conçus avec une mise en forme "élastique" (largeur du site variable en fonction de la taille de l'écran) intégraient déjà en partie ce principe ergonomique simple : Adapter la présentation à la taille de l'écran.

Avec l'arrivée des media queries, la mise en forme conditionnelle a ouvert d'autres possibilités : Changer la présentation de différents éléments dans la page en fonction de la taille de l'écran voire du type de terminal utilisé.

Mais l'adaptation du design ne suffit pas, il faut tenir compte des capacités du terminal utilisé et du contexte de consultation !

Poids des pages et des images

Un internaute en situation de mobilité (mobinaute) n'a pas encore le même débit qu'avec un ordinateur et sa connexion ADSL. Il n'attendra pas le chargement du page lourde prévue pour un écran de grande taille (avec des photos dimensionnées en conséquence). Masquer simplement certains éléments pour les écrans de petite taille (pour ne garder que les informations essentielles) est une bonne chose, mais elle ne permet pas d'alléger le poids de la page. C'est donc la page qui doit s'adapter et pas seulement sa présentation.

Interactivité

L'absence possible de clavier ou de souris et l'utilisation d'un écran tactile changent considérablement l'interaction entre l'internaute et le site. Les éléments de navigation et les boutons d'action doivent s'adapter à chaque type d'événement : "click", "tap", "swipe"... et doivent fonctionner dans toutes les circonstances : Un élément ou un menu de navigation visible en roll-over restera totalement inaccessible pour la plupart des terminaux mobiles !

Navigation, ergonomie générale, fonctionnalités...

L'idéal serait de pouvoir tout adapter en fonction du type de terminal. Pour cela, certains choisissent de faire un site dédié à chaque famille de terminaux. C'est ainsi que sont apparus les premiers sites dédiés mobiles (et que naquis Pixmobi).

Responsive CMS

Pour faire du véritable "Responsive Web Design", il faut tout d'abord bien reconnaître le terminal de l'internaute. Pixmobi sait détecter tous les types de terminaux et connait les caractéristiques techniques de plus de 5000 terminaux mobiles.

Une fois reconnu, il faut pouvoir adapter la présentation (naturellement), mais également la composition de la page. Dans la plupart des CMS, il faut coder des gabarits spécifiques ce qui multiplie les charges de développement.

Adapter la composition

Avec Pixmobi, c'est beaucoup plus simple : Les adaptations techniques sont automatiques (exemple: absence de JavaScript) et pour chaque page et/ou chaque module dans une page, il est possible de restreindre son affichage à un ou plusieurs types de terminaux et ainsi changer dynamiquement la composition du site ou d'une rubrique en fonction du terminal utilisé.

Adapter la présentation

Les media queries n'étant pas encore reconnus par tous les navigateurs ni parfaitement bien interprété, Pixmobi permet de créer des feuilles de styles qui peuvent n'être appliquées que pour les mobiles, les tablettes et/ou les écrans d'ordinateurs et ainsi éviter l'usage de média queries pour détecter les types de terminaux.

Adapter les images et les vidéos

Les images (et les vidéos) sont également automatiquement adaptées à la taille de l'écran de consultation. Qu'elle soit paramétrée pour être affichée en taille fixe (pixel) ou en taille variable (pourcentage), Pixmobi ré-échantillonne automatiquement l'image car il connaît la résolution exacte de l'écran. Ceci permet d'obtenir le meilleur compromis entre poids et qualité de l'image (et facilite grandement le travail des contributeurs qui n'ont pas besoin d'uploader les images dans différentes tailles).
Un système de cache permet d'éviter de recalculer ces images à chaque consultation.

Gérer les "événements mobiles"

"Touch move", "Swipe left", Swipe right", "Tap"... Tous les événements des écrans tactiles sont reconnus par Pixmobi, ce qui permet par exemple de faire défiler des carrousels en "glissant" le doigt sur l'écran à droite ou à gauche.
Le changement d'orientation (ex : passage du mode portrait en mode paysage) est également détecté afin notamment de réactualiser automatiquement les images (en Ajax).