Créer site internet facile
Créer son site web pour les nuls
Créez votre propre site Internet
Gratuit, Facile, Rapide
Découvrez SiteW Inscription gratuite

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

Vue ordinateur pour la page du tutoriel Créez un entête pour votre site
Vue mobile automatique pour la même page

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, comme visible sur cette vidéo :

Mobile horizontal, tablette verticale et horizontale
Info def
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 !
Info warning
Si les positions et dimensions des modules sont indépendantes pour chaque vue, ce n’est pas la cas pour les 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. 

Ce module est invisible en vue mobile (cercle rouge) et visible en vue ordinateur (cercle vert)

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 ?
Info warning
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.

Aperçu de l’onglet Contenu lorsque la barre mobile est sélectionnée

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.

Le bouton “Gérer les pages” permet de personnaliser les pages listées dans le menu mobile
Où est donc passé mon menu ?
Info warning
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.

 

Dernière mise à jour : 11 juin 2020

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.