Version responsive : Mode d'emploi

le Lundi 27 Juillet 2015 I 3 Commentaires

Depuis sa sortie, vous êtes nombreux à faire vos retours dans le support et nous vous remercions pour vos remarques constructives et vos encouragements :)

Certaines demandes reviennent régulièrement. Nous allons donc reprendre dans cette note le fonctionnement de la version responsive WMaker et les différents points techniques importants à comprendre.

1/ Qu'est-ce qu'un point de rupture ?

Grâce à la version responsive, les colonnes de votre site et leurs modules s'ajustent, se redimensionnent et se déplacent automatiquement selon la résolution d'écran utilisée. 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.

Nous avons défini 2 points de ruptures pour lesquels l’affichage prend 100% de la largeur du device : 800 px (affichage sur les tablettes en mode portrait) et 600 px (affichage de la version responsive sur mobile).
Version responsive : Mode d'emploi

2/ Comportement de la zone de titre

Cette zone va se transformer complètement lorsque vous atteignez le premier ou second point de rupture :
- 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.
- Un module Bannière de titre est également ajouté lui aussi paramétrable.
Ces 2 modules ne peuvent être supprimés, vous pouvez cependant les mettre en stock si vous ne souhaitez pas les afficher.

3/ Comportement de vos colonnes

Les colonnes vont s'ajuster dès le premier point de rupture atteint, 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.

4/ 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 colonnage dans certains modules (utilisant un affichage mosaïque) est arbitraire et peut ne pas refléter les paramètres définis sur le web. Si vous paramétrez un module Galerie sur 3 colonnes, le rendu sera de 4 colonnes sur tablette, 2 colonnes sur mobile, 3 colonnes en mobile/paysage.

- L'espacement du contenu de chaque 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.

5/ 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 sur la template concernée dans le menu Design > Mode responsive.

6/ Afficher vos publicités

Google est malin, avec l'arrivée du responsive il a tout prévu et a mis au point des bannières intelligentes de taille adaptable. Ce qui signifie que si vous utilisez ce type de bannières, elles s'adapteront aussi bien à la version desktop, qu'à la version mobile ou tablette.

Si vous avez déjà paramétré toutes vos bannières sur la version desktop et que vous ne souhaitez pas tout modifier, vous pouvez facilement cacher ces modules sur la version responsive puis simplement ajouter vos modules avec des bannières de taille adaptable pour la version responsive (qui seront eux cachés sur la version desktop).

A vous de jouer !

Voilà, vous avez désormais tous les éléments en main pour activer votre version responsive :) Si vous avez d'autres questions, n'hésitez pas à nous contacter via le support de vos sites.


Saveria Maroselli
Saveria s'occupe du Support de WMaker mais pas seulement :) En savoir plus sur cet auteur


Vos commentaires

1.Posté par FCrozier le 01/08/2015 15:29 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Une des fonctionnalités qui me paraît être parmi les plus importantes lorsqu'on met en place le Responsive, est la possibilité de cacher certains modules de manière sélective.

L'intérêt :

1) cette fonctionnalité permet d'alléger le poids de vos pages (moins de modules => moins de codes, d'images, de texte, etc), en fonction de la version appelée. Hors, le temps de chargement est désormais l'un des 3 principaux critères de classement chez Google, mais pas que...

2) elle permet d'optimiser l'affichage de la version Responsive sur le plan ergonomique, notamment pour les sites qui utilisent plus d'une colonne en version Desktop, en plus de la colonne principale (contenu). Rien de plus pénible en effet que de tomber sur un site mobile qui impose de scroller encore et encore...sans aucun bénéfice significatif pour le lecteur !

Exemple basique avec le module "Services Web 2.0", que tout le monde ou presque utilise sur Desktop pour linker son site avec les réseaux sociaux : cette fonctionnalité étant native dans la plupart des navigateurs mobile, le module n'a globalement aucun intérêt sur votre version Responsive... Et avec un peu de bon sens, il serait surprenant que vous n'en trouviez pas d'autres sur votre site...

;-)

FC

2.Posté par Fabien le 03/09/2016 16:00 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Article très complet mais je n'ai pas compris le message en commentaire plus haut de FCrozier :( Une explication ?

3.Posté par FCrozier le 05/09/2016 18:42 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
@ Fabien : la plupart des modules WMaker (Design) ont une option qui permet de les mettre en cache, en fonction de la résolution appelée par les visiteurs.

Certains modules -qui ont leur utilité en version desktop- perdent parfois de leur intérêt lors d'une consultation de votre site sur tablettes ou smartphones. Et vice-versa.

Il peut donc être ponctuellement judicieux d'afficher ou de cacher (stocker) un module en utilisant cette possibilité de réglage fin.

J'imagine qu'il doit y avoir le même genre de fonctionnalité sur Wordpress ?

;-)


FC

Nouveau commentaire :
Facebook Twitter