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, comme le montrent ces statistiques, 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 !

Vue mobile 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.

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 de la vue mobile 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.

Vous trouverez plus d'informations sur la vue mobile automatique dans le guide Créer un site mobile automatiquement.

Vue mobile manuelle

Si l’organisation des modules proposée par la vue mobile automatique ne vous convient pas, vous pouvez faire le choix de la vue mobile 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.

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 de la vue mobile 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.

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 “oeil” dans le 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.

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 vue mobile 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 la vue mobile manuelle.