Site optimisé pour appareils mobiles

Tous les sites Webador bénéficient de ce qu'on appelle un 'responsive design' (aussi appelé design réactif en français). Cela signifie que le site s'adapte à la taille de l'écran avec lequel le site est consulté. Le site s'adapte donc automatiquement, de sorte qu'il peut être consulté facilement sur mobile et sur tablette.

Il peut être parfois difficile de réussir à la fois la version ordinateur et la version mobile d'un même site. Nous aimerions vous donner quelques conseils à ce sujet dans l'article ci-dessous.

 

Colonnes

Pour placer plusieurs éléments les uns à côté des autres sur votre site, vous pouvez utiliser l'élément colonnes. Ces colonnes sont placées les unes sous les autres dans la vue mobile.

L'utilisation de l'élément colonnes dans votre site ajoute automatiquement trois colonnes à votre site, comme sur l'image ci-dessous. Vous pouvez déterminer vous-même le contenu de ces colonnes en faisant glisser des éléments de contenu à l'intérieur.

Sur un mobile, ces colonnes sont placées les unes sous les autres.

Une erreur fréquente consiste à ajouter un nouvel élément colonne pour l'ajout d'une colonne. Vous obtenez trois colonnes horizontales et verticales ensemble et un nouvel élément est placé dans chaque champ.

Voici un exemple ci-dessous.

Voici ce qui se passe sur un mobile :

Ce n'est naturellement pas le but. Il est donc important que vous placiez tous les éléments qui appartiennent à une colonne dans un élément Colonnes, comme dans l'exemple ci-dessous.

Et voici le résultat obtenu sur un mobile :


Tableaux

L'élément tableau est parfait pour ajouter des horaires d'ouverture ou un menu dans votre site. Il est vraiment essentiel que les horaires et les jours apparaissent bien (les bons horaires en face du bon jour !).

Étant donné que les colonnes sont affichées les unes sous les autres sur mobile, les heures d'ouverture ne sont pas clairement visibles sur mobile si vous utilisez l'élément colonnes. Vous obtiendrez alors le résultat suivant :

Vous voyez immédiatement le problème, les données apparaissent les unes sous les autres.
En plaçant les horaires d'ouverture dans un tableau, on obtient un résultat correct sur mobile.

Horaires d'ouverture dans un élément tableau depuis l'éditeur sur ordinateur.

Rendu sur mobile.


Espace

Afin de créer un espace entre des colonnes dans la vue mobile, il est important d'utiliser un élément espace sous chaque colonne individuelle plutôt que sous l'élément colonnes entier.

Dans l'exemple ci-dessous, on aperçoit l'effet si on ajoute un élément espace sous l'élément colonnes.

Résultat sur l'ordinateur.

Résultat sur un mobile : l'espace n'apparaît que sous la dernière partie.

Dans l'exemple ci-dessous, on voit le résultat après l'ajout d'un élément espace sous chaque colonne individuelle.

Sur l'ordinateur.

Sur le mobile : des espaces sont bien ajoutés entre chaque partie.


Alignement des colonnes

Si vous utilisez des colonnes sur votre site, tenez également bien compte de l'alignement de ces colonnes dans la vue mobile.

Une erreur courante ici est que les éléments de la colonne de gauche sont alignés à gauche, ceux de la colonne du milieu sont centrés et les éléments de la colonne de droite sont alignés à droite.

Sur l'ordinateur tout apparait correctement.

Aperçu sur ordinateur avec alignement à gauche, au centre et à droite.

Aperçu sur mobile du même alignement.

Il est donc important que vous aligniez les éléments au centre de chaque colonne. Le résultat est soigné à la fois sur l'ordinateur et sur mobile.

Résultat sur ordinateur d'un alignement centré dans chaque colonne.

Résultat sur mobile.

Cet article vous a-t-il été utile ?

Vous ne trouvez pas la réponse ? Posez-nous votre question.