Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quel que soit l'appareil utilisé (téléphones mobiles, tablettes, écrans d’ordinateur etc.)

En d'autre termes, le responsive permet de faire des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran.
Vous paramétrez une seule version de votre site, qui selon la largeur de l'écran utilisé va s'adapter pour déterminer comment les éléments du site doivent s'afficher.

Les colonnes de votre site et leur modules s'ajustent, se redimensionnent et se déplacent automatiquement selon la résolution d'écran utilisé. Les modules de votre site s'adaptent en largeur, quand il n'y a plus assez de place, les modules sont réorganisés.
Chaque moment où les modules de votre design sont réorganisés est appelé un point de rupture.

Il y a 2 points de ruptures pour lesquels l’affichage prend 100% de la largeur du device :

Lorsqu'un point de rupture est atteint, les zones de votre site vont s'adapter de manière spécifique pour un affichage plus cohérent selon la taille de l'écran.

La zone de titre :
Cette zone va se transformer complètement :

- Tous les modules sont cachés à l’exception des modules typés de contenu (A la une, Fil de l'eau, slideshow etc.)

- Un module Swipe est ajouté automatiquement. Il s'agit d'un module de navigation (Menu principal) paramétrable dans le menu Design > Design mobile.
- Un module Bannière de titre est également ajouté, paramétrable aussi dans le menu Design > Design mobile.
Ces 2 modules ne peuvent être supprimés, vous pouvez cependant les mettre en stock si vous ne souhaitez pas les afficher.

Les colonnes :

Les colonnes maigres passent en dessous de la colonne centrale.
La colonne 1 (colonne centrale) se retrouve toujours en haut de la page.

Les modules dans les combos restent alignés sur les tablettes, mais au second point de rupture (affichage mobile) passent également les uns en dessous des autres.

Affichage des modules :

Selon le point de rupture atteint, l'affichage des modules est différent de celui paramétré pour la version desktop.

- Pour un affichage mobile par exemple, le design est épuré et certaines informations ne sont plus affichées (résumé dans les modules de unes...). La taille des polices paramétrée sur la version desktop est conservée pour la version tablette, mais fixe et non paramétrable pour la version mobile.

- Le système de colonage dans certains modules (utilisant un affichage mosaïque) est arbitraire et peut ne pas refléter les paramètres définis sur le web.
- L'espacement du contenu de chaque module (l'espacement défini dans Paramètres de module > Design du module) est fixe et ne peut être paramétré.

- Si vous ne souhaitez pas afficher tous vos modules une fois le point de rupture 1 atteint, vous avez la possibilité de cacher un module directement dans les paramètres de ce dernier.
Et inversement, vous pouvez ajouter des modules qui seront cachés uniquement sur la version desktop.
Onglet Gestion du module > Mettre en stock ce module. Vous choisissez sur quelle version le module sera caché.

Affichage des templates :

Par défaut, lorsque la version responsive est activée, le design adaptatif de la home est appliqué à toutes vos templates.

Pour activer les versions responsives spécifiques de chacune de vos templates en plus de celle de la home, rendez vous simplement dans le menu Design > Template concernée.