Créer un site mobile automatiquement

Créer un site responsive, c’est-à-dire qui s’adapte aux écrans des smartphones, est aujourd’hui incontournable. Comme toujours, notre parti-pris consiste à vous offrir en même temps un maximum de liberté et un maximum de facilité.

Créer un site pour mobile est désormais une nécessité et n'est pas si compliqué que ça en a l'air... 

Comme le montre le tutoriel 👉 Optimisez le site pour les mobiles, il est possible de construire manuellement une vue mobile totalement personnalisée. Dans ce guide, découvrez comment l’optimisation automatique permet d’obtenir un site responsive en moins de temps qu’il n’en faut pour lire cet article !

Activation de la vue mobile automatique : 3-2-1, paré au décollage ! 🛩

Activation de la vue mobile automatique

Passer à la vue mobile automatique

Pour gérer le site mobile, il faut sélectionner cette vue dans la barre d’outils de l’éditeur :

1. Choix de l’optimisation automatique

2. Panneau d’informations sur l’utilisation de la vue mobile

3. Vue mobile de la page en cours

4. Panneau de gestion de la visibilité des modules

Le choix de l’optimisation automatique concerne le site en entier, et agit instantanément. 

Personnaliser la vue mobile automatique

Lorsque la vue mobile automatique est activée, un puissant algorithme analyse les pages de votre site et génère le site mobile sans aucune intervention de votre part. Tous les modules sont redimensionnés et repositionnés de façon à obtenir des pages mobiles optimisées. Dans la plupart des cas, le résultat est parfait, et vous n’avez rien d’autre à faire ! 

Toutefois, vous pouvez intervenir sur chaque page individuellement, afin de personnaliser la vue générée automatiquement. La personnalisation d’une page du site mobile se fait à partir de deux actions simples :

👉 Changer l’ordre des modules

👉 Changer la visibilité des modules

Voyons cela de plus près...

Changer l’ordre des modules

Liaisons verticales et horizontales

Comme le montre la vignette vidéo ci-dessous, vous pouvez déplacer les modules dans la vue mobile pour qu’ils se positionnent autrement vis-à-vis des autres modules.

Les déplacements peuvent se faire au-dessus, au-dessous, à gauche ou à droite. De plus, nous avons deux bonnes nouvelles supplémentaires (youpi ! ✌). 

👉 Ces déplacements sont indépendants par rapport à la vue ordinateur : vos pages restent inchangées sur ordinateur ;

👉 Ces déplacements sont mémorisés, donc si vous changez l’ordre de ces modules dans la vue ordinateur, l’ordre dans la vue mobile automatique ne sera pas impacté.

Ces déplacements créent une liaison manuelle entre les modules, ce qui permet leur mémorisation.

💡 Pour supprimer une liaison manuelle et revenir à l’ordre par défaut de la vue mobile automatique, il suffit de cliquer sur le marqueur de cette liaison.

Liaisons intérieures

Dans certains cas particuliers, vous pourrez souhaiter placer un module à l’intérieur d’un autre module. Rassurez-vous : c’est possible ! 🚀

Pour qu’un module puisse accueillir un autre module sous forme d’une liaison intérieure, il devra d’abord être déclaré en tant que conteneur.

Ici, le module Image a été coché en tant que conteneur. Dès lors, il devient possible de créer des liaisons intérieures comme dans la vidéo ci-dessous :

Changer la visibilité des modules

Vous pouvez, si vous le souhaitez retirer de la vue mobile certains modules figurant dans la vue ordinateur. Cela consiste à gérer la visibilité des modules. C’est en fait très simple (promis) : soit le module est visible, soit il est invisible !

1. Dans la vue mobile, il suffit de cliquer sur l’icône Oeil barré pour rendre le module invisible. Celui-ci disparaît alors de la vue mobile et apparaît dans la liste des modules invisibles.

2. Dans la liste des modules invisibles, un clic sur l'icône Oeil permet de rendre le module à nouveau visible dans la vue mobile.

Et voici le résultat :

Site mobile automatique : en conclusion

La vue mobile automatique est le meilleur moyen d’obtenir un site responsive sans aucune intervention de votre part ! Comme vous avez pu le découvrir dans ce guide, quelques actions très simples suffisent à personnaliser cette vue mobile afin d’obtenir des pages absolument parfaites sur smartphone.