Optimisez le site pour les mobiles

Votre site est-il “responsive” ? Le Responsive webdesign (en français : la conception de sites web réactifs) consiste à créer des sites dont l’affichage s’adapte à la largeur d’écran disponible, et en particulier, à l’écran des smartphones. 

C’est aujourd’hui un enjeu incontournable. Voyons donc, dans ce tutoriel, comment SiteW vous accompagne dans la création d’un site réactif sur mobile et tablette. Alors, votre site est-il “responsive” ? Préparez-vous à répondre oui !

Mode mobile : Optimisation automatique

Dans la plupart des cas, vous n’aurez tout simplement rien à faire ! Par défaut en effet, la vue mobile automatique est activée dans l’éditeur SiteW.

Pour vérifier si vous êtes bien dans ce mode, ou pour l'activer, il vous suffit de cliquer deux fois sur l'icône de téléphone mobile disponible dans le haut de votre éditeur.

La vue mobile automatique est générée par un algorithme qui analyse la position des modules sur chaque page, et en déduit une organisation optimale pour les smartphones. Sauf cas particuliers, le résultat convient en général parfaitement.

Exemple

Personnalisation du mode mobile Optimisation automatique

Si vous préférez modifier l'agencement proposé automatiquement par l'algorithme, c'est possible ! Vous pouvez créer des liaisons manuelles entre les modules, afin d'indiquer à l'algorithme que tel module doit toujours rester au-dessus, au-dessous, à gauche ou à droite d'un autre module. Ces liaisons manuelles se créent automatiquement en glissant-déplaçant un module sur les côtés d'un autre module.

Visibilité des modules en Optimisation Automatique.

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 : soit le module est visible, soit il est invisible !

• 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.

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

Attention

Le mode Optimisation automatique n'est disponible qu'en dessous de 50 pages. Si votre posséde plus de pages, il passera automatiquement dans le mode Personnalisation manuelle.

Mode mobile : Personnalisation manuelle

Si l’organisation des modules proposée par la vue mobile automatique ne vous convient pas, vous pouvez faire le choix du mode mobile Personnalisation manuelle. Dans ce mode, vous avez les mains libres pour créer un “responsive webdesign” entièrement personnalisé.

Lorsque vous activez la personnalisation manuelle, vous découvrez les modules de la page tels qu’ils sont disposés sur la vue ordinateur : il est donc probable qu’ils dépassent sur la gauche et la droite de l’écran du smartphone. Rassurez-vous, vous n'aurez à replacer les modules qu'à la première activation

Il est en fait très rapide de mettre les modules en ordre, à la bonne position et dans la bonne largeur grâce à cet outil supplémentaire qui apparaît sur le cadre de sélection des modules :

Cette poignée permet de positionner et redimensionner automatiquement le module entre les deux bords gauche et droite de la vue mobile.

Mobile horizontal, tablette verticale et horizontale

Le choix du mode mobile Personnalisation manuelle permet d’accéder à deux vues supplémentaires : la vue mobile horizontale et la vue tablette verticale. La vue tablette horizontale est toujours la même que le vue ordinateur.

Notez bien que les positions et dimensions des modules sont indépendantes pour chaque vue. Par exemple, le déplacement d’un module sur la vue mobile n’affecte pas sa position sur la vue ordinateur.

Attention à la mise en forme des modules !

Si les positions et dimensions des modules sont indépendantes pour chaque vue, ce n’est pas le cas pour les mises en forme. Par exemple, si vous modifiez la taille d’écriture d’un texte sur la vue mobile, cette modification s’appliquera également sur la vue ordinateur. Heureusement, il existe un moyen de contourner cela 👇.

Visibilité des modules

Chaque module, qu’il appartienne à la page d’arrière-plan ou à tout autre page du site, peut être rendu visible ou invisible selon la vue (ordinateur ou mobile) dans laquelle il est affiché.

Pour régler cette visibilité, il faut sélectionner le module et survoler l’icône “œil” dans le bas du panneau de gauche. 

Lorsque vous êtes sur la vue ordinateur et que vous insérez un nouveau module : 

• Si la vue mobile automatique est activée, alors par défaut, ce module sera également visible sur la vue mobile
• Si la vue mobile manuelle est activée, alors par défaut, le module sera invisible sur la vue mobile

De même, si vous insérez un module sur une vue mobile manuelle, alors par défaut, il sera invisible sur la vue ordinateur.

Où est donc passé mon module ?

Si vous avez l’impression d’avoir “perdu” un module, c’est probablement qu’il est invisible sur la vue où vous vous situez. Pour le retrouver, il suffit de vous rendre sur la vue où il est visible. Rassurez-vous : il est impossible de rendre un module invisible sur toutes les vues en même temps !

Barre mobile

Que ce soit en vue mobile manuelle ou automatique, vous pouvez personnaliser la barre mobile.

Pour cela, rendez-vous dans l'onglet Design et cliquez sur Barre mobile.

Notez, en particulier, que le menu de la barre mobile peut être personnalisé, y compris dans la liste des pages qu’il présente à son ouverture. Il est donc possible que la vue mobile présente un menu différent de celui qui est présenté dans la vue ordinateur.

Où est donc passé mon menu ?

Vous avez inséré un module Menu dans votre vue ordinateur, vous avez bien vérifié qu’il était visible en vue mobile, et pourtant, vous ne le retrouvez plus ? Vous êtes donc en mode mobile optimisation automatique ! En effet, la vue mobile automatique occulte les modules Menu au seul bénéfice du menu fourni par la barre mobile. Pour conserver un module Menu en vue mobile, vous devrez opter pour le mode mobile Personnalisation manuelle.

Mode mobile : Identique Vue Ordinateur

Dans ce mode, tout est dans le titre.

La version mobile de votre site sera ici identique à celle version ordinateur.

Attention cela signifie que sur la plupart des configurations, des barres de navigation horizontales et verticales seront présentes sur la version mobile de votre site.