De nos jours, il est très important d’optimiser votre site web pour une utilisation mobile, car une grande partie du trafic des sites web se fait aujourd’hui par le biais des mobiles. En outre, un site web bien optimisé contribuera également à une meilleure visibilité sur Google.
Mais est-il difficile d’optimiser son site web pour les mobiles ? Non, pas si vous utilisez Webador. En effet, tous les sites Webador sont dotés d’un design dit « responsive ».
Un design responsive signifie que le site web s’adapte à la taille de l’écran avec lequel il est consulté. Le site web s’ajuste donc automatiquement pour qu’il puisse également être facilement consulté via un mobile et une tablette.
Même si tous les sites web Webador sont responsives, nous avons quelques conseils pour vous assurer que votre site web ait une apparence optimale sur mobile.
5 conseils pour optimiser votre site web pour les mobiles
Conseil #1 : Les colonnes
Pour placer plusieurs éléments côte à côte sur votre site web, vous pouvez utiliser l’élément Colonnes. Ces colonnes sont placées les unes sous les autres dans la vue mobile.
Lorsque vous ajoutez l’élément Colonnes à votre site web, trois colonnes sont ajoutées par défaut à votre site web, comme vous pouvez le voir sur l’image ci-dessous. Vous pouvez déterminer vous-même le contenu de ces colonnes en y faisant glisser des éléments, comme par exemple du texte ou une image.
Une erreur fréquente consiste à ajouter un nouvel élément de colonne sous la colonne existante pour chaque nouvel élément à ajouter. Par exemple, pour chaque nouveau texte que l’on souhaite ajouter, une nouvelle colonne est d’abord insérée. Il en résulte des colonnes à la fois horizontales et verticales sur votre page.
Ce n’est évidemment pas l’apparence que votre site web devrait avoir sur mobile.
Pour éviter ce problème, il est important de placer tous les éléments qui appartiennent à une même colonne dans cette même colonne. Veuillez consulter l’exemple ci-dessous :
Lorsque vous consulterez ensuite votre site web sur mobile, les colonnes s’afficheront correctement.
Conseil #2 : les tableaux
Si vous souhaitez ajouter des heures d’ouverture ou un menu à votre site web, l’élément Tableau est une option idéale. Pour les heures d’ouverture, vous souhaitez naturellement que le jour s’affiche clairement à côté de l’heure sur un appareil mobile.
Étant donné que les colonnes sont affichées les unes sous les autres sur mobile, les heures d’ouverture ne seront pas bien visibles via mobile si vous utilisez l’élément Colonnes pour cela. Vous obtiendrez alors le problème suivant :
Étant donné que les heures sont placées dans des colonnes, elles sont affichées les unes sous les autres. Mais lorsque vous placez les heures d’ouverture dans un tableau, vous verrez qu’elles s’affichent désormais correctement sur mobile.
Conseil #3 : l’espace blanc
Un ingrédient important d’un bon site web mobile est l’utilisation d’espace blanc, car l’ajout d’espace blanc permet d’éviter que les éléments ne soient trop rapprochés les uns des autres.
Pour créer un espace blanc entre les colonnes dans la vue mobile, il est important que l’élément Espace blanc soit ajouté sous chaque colonne individuelle au lieu d’être placé sous l’ensemble de l’élément Colonnes.
Pourquoi ? Si vous ajoutez l’élément Espace blanc uniquement sous l’élément Colonnes, seul l’élément le plus bas aura un espace blanc.
Lorsque vous ajoutez l’élément Espace blanc sous chaque colonne, votre site web aura une apparence parfaite sur la vue mobile.
Conseil #4 : Alignement
Si vous utilisez des colonnes sur votre site web, tenez également compte de l’alignement de ces colonnes dans la vue mobile.
Une erreur fréquente est que les éléments de la colonne de gauche sont alignés à gauche, ceux de la colonne du milieu au centre et les éléments de la colonne de droite à droite.
Lorsque votre visiteur consulte votre site web via un ordinateur, cela a l’air bien, mais pas lorsqu’il consulte votre site web via un mobile.
Il est donc très important d’aligner les éléments de vos colonnes au centre.
De cette façon, votre site web aura une belle apparence sur ordinateur, mais aussi lorsqu’il sera affiché sur des appareils mobiles.
Conseil #5 : Testez votre site web
C’est peut-être un conseil logique, mais certainement pas sans importance : testez votre site web sur un mobile ! Lorsque vous créez votre site web, il est important de vérifier régulièrement son apparence sur un mobile.
C’est pourquoi chez Webador, nous avons imaginé quelque chose : la vue mobile. En cliquant sur l’icône « mobile » dans l’Éditeur, vous voyez en un coup d’œil l’apparence de votre site web sur les appareils mobiles.
Une erreur que beaucoup de gens commettent est de terminer complètement leur site web avant de commencer à l’optimiser pour les mobiles. Cela peut les obliger à modifier de nombreux éléments. En sélectionnant régulièrement la vue mobile et en effectuant les ajustements nécessaires, votre site web est immédiatement optimisé pour les mobiles lorsque vous souhaitez le lancer.
Vous souhaitez également créer et lancer votre site web en moins de 10 minutes ? Inscrivez-vous dès aujourd’hui chez Webador et lancez votre site web dès aujourd’hui.
