Comment rendre un site Web adapté aux mobiles

En 2016, pour la première fois, l’utilisation d’Internet mobile a dépassé celle de l’ordinateur. Cela n’aurait pas dû être une surprise pour quiconque y prête attention.

L’utilisation des appareils mobiles est en augmentation depuis la sortie d’Apple du premier smartphone et les appareils mobiles sont devenus une partie si régulière de la vie quotidienne que nous nous attendons tous à voir des gens regarder leur téléphone chaque fois que nous quittons la maison.

Pour les propriétaires de sites Web, ce changement dans la façon dont les gens interagissent avec le Web n’est pas surprenant, mais il augmente l’urgence dont vous avez besoin pour créer un site Web adapté aux mobiles. Si vos visiteurs mobiles n’ont actuellement pas une bonne expérience lorsqu’ils atterrissent sur votre site Web, vous éloignez une énorme partie de votre trafic potentiel (et nuit à votre classement dans les moteurs de recherche).

Vous l’avez déjà entendu auparavant, mais nous le répétons. Vous devez rendre votre site Web convivial pour les mobiles. Mais savoir que vous devez faire quelque chose et savoir comment le faire sont deux choses différentes.

10 étapes pour rendre votre site Web adapté aux mobiles

Voici quelques étapes que vous pouvez suivre dès maintenant pour vous assurer que votre site Web fonctionne aussi bien pour vos visiteurs mobiles que pour vos utilisateurs de bureau.

1. Rendez votre site Web réactif.

Un site Web réactif comprend le même contenu et les mêmes informations sur tout appareil sur lequel vous y accédez, mais il modifie la façon dont il est affiché et organisé en fonction de la taille de l’écran de l’appareil. Il s’agit de la meilleure option pour rendre votre site Web convivial pour les mobiles, car vous ne limitez pas les informations auxquelles vos visiteurs mobiles peuvent accéder – ils obtiennent toujours le même contenu que les autres visiteurs. Et le design réactif est également bon pour le référencement. Google a déclaré que c’était leur format préféré pour les sites Web mobiles.

Vous pensez peut-être que vous ne pouvez pas créer un site Web réactif par vous-même. Mais, comme la conception réactive est devenue la norme, il existe de nombreux outils pour le rendre possible. Découvrez les 20 meilleurs outils de conception Web pour une conception Web responsable.

Et la manière super facile? Tous les modèles de conception de notre constructeur de sites Web par glisser-déposer sont déjà optimisés pour les mobiles.

2. Rendez l’information plus facile à trouver.

Certaines personnes qui naviguent sur le Web sur leurs appareils mobiles n’hésitent pas à prendre le temps de parcourir ou de lire le contenu au même rythme que sur un ordinateur, mais d’autres veulent trouver les informations dont elles ont besoin aussi rapidement et aussi facilement que possible. Pensez aux informations que les utilisateurs d’appareils mobiles sont les plus susceptibles de rechercher lorsqu’ils se rendent sur votre site Web et mettez-les dans un endroit évident et facile à trouver sur la page d’accueil mobile.

Considérez également les FAQ que les gens recherchent le plus souvent lorsqu’ils visitent votre site Web. Il n’est peut-être pas logique de placer toutes les réponses au premier plan sur votre page d’accueil mobile, mais vous devez les rendre faciles à trouver et à naviguer sur un appareil mobile.

3. N’utilisez pas Flash.

L’utilisation de Flash sur votre site Web est une erreur de référencement. Cela peut ralentir le temps de chargement d’une page et il existe de nombreux navigateurs et appareils où cela ne fonctionne tout simplement pas.

Ni les appareils Android ni iOS ne prennent en charge le flash, donc si vous créez un site Web qui dépend en aucune façon de l’expérience d’une animation Flash, vos utilisateurs mobiles seront exclus. À ce stade, il est préférable de supprimer complètement la technologie sur votre site Web et de trouver une conception Web solide qui fonctionne sans elle.

4. Incluez la balise Meta Viewport.

La balise META Viewport est un moyen facile de contrôler la façon dont votre site Web s’affiche sur mobile. Si votre page s’ouvre sur la même largeur sur le petit écran de votre téléphone que sur votre bureau, vous devrez faire un peu de défilement maladroit d’un côté à l’autre pour lire chaque ligne de texte et voir les différents côtés de la page. La balise META Viewport indique aux navigateurs d’adapter la largeur de votre page à l’écran du type d’appareil dont le visiteur provient.

L’ajouter à votre html est assez simple. Collez-le simplement sur le HTML de chaque page:

<meta name = ”viewport” content = ”width = device-width, initial-scale = 1 ″>

5. Activez la correction automatique pour les formulaires.

Il est facile de ne pas penser aux petites façons dont la correction automatique peut rendre l’interaction d’un utilisateur avec votre site Web plus gênante. Si vous avez des formulaires sur votre site Web qui demandent des informations de nom ou d’adresse, une petite façon de faciliter la fourniture de ces informations sur vos visiteurs mobiles est de désactiver la correction automatique pour chaque champ de formulaire, sinon leur téléphone essaiera de changer leur nom ou nom de rue à des mots plus courants et ralentir le processus de remplissage de votre formulaire.

Dans le champ de saisie, assurez-vous d’inclure la correction automatique = off dans le html.

6. Faites en sorte que vos boutons soient suffisamment grands pour fonctionner sur mobile.

Il est assez facile de cliquer sur un bouton de n’importe quelle taille avec une souris, mais lorsque vous essayez de «cliquer» avec vos doigts sur un petit écran de smartphone, les petits boutons sont difficiles à gérer. Et cela est particulièrement vrai s’il y a plusieurs petits boutons proches les uns des autres – appuyer sur l’un tout en essayant d’appuyer sur un autre gênera réellement vos visiteurs.

La meilleure façon de sauver vos visiteurs de cette frustration est d’utiliser des boutons plus gros. Chaque fois que vous ajoutez un bouton à votre site (et à tous ceux qui s’y trouvent déjà), prenez le temps de les tester vous-même sur le nombre d’appareils mobiles que vous pouvez trouver parmi vos employés et votre famille. Assurez-vous que la sélection de chaque bouton est raisonnablement facile sur tous les appareils et, si ce n’est pas le cas, mettez-le à jour pour qu’il soit.

7. Utilisez de grandes tailles de police.

La lecture sur un petit écran est d’autant plus difficile si la police est petite. Il est préférable d’utiliser une taille de police d’au moins 14 pixels sur vos pages Web, mais allez-y et testez à quoi cela ressemble pour voir si l’agrandissement pourrait être mieux ici.

Il est également préférable de s’en tenir aux polices standard. Toute police que le navigateur de votre visiteur peut avoir besoin de télécharger ralentira le temps de chargement de votre site Web, ce qui est une mauvaise nouvelle sur mobile.

8. Compressez vos images et CSS.

En parlant de temps de chargement du site, vous voulez toujours que la vitesse de votre site soit rapide. Mais si quelque chose, cette vitesse est plus importante sur mobile. Cela signifie qu’une autre bonne étape pour rendre votre site Web adapté aux mobiles est de compresser tout ce qui prend beaucoup d’espace et ralentit le temps de chargement, comme vos images haute résolution et CSS.

Si vous compressez la taille de vos fichiers image, ils se chargeront plus rapidement sans affecter négativement la qualité de ce que les gens voient sur le site.

9. Permettez un moyen facile de passer à la vue Bureau.

Certains de vos visiteurs mobiles peuvent préférer voir la version de bureau de votre site Web à la place (surtout si vous choisissez une version mobile de votre site Web plutôt qu’un site réactif).

Assurez-vous de leur donner un moyen de le faire si c’est leur préférence. Vous voulez que vos visiteurs puissent interagir avec votre site Web de la manière qui leur convient le mieux.

10. Effectuez régulièrement des tests mobiles.

La meilleure chose que vous puissiez faire pour vous assurer que l’expérience mobile de votre site Web est bonne est de la tester régulièrement vous-même sur votre appareil mobile. De temps en temps, affichez votre site Web sur votre téléphone et votre tablette et passez un peu de temps à parcourir pour voir si quelque chose est difficile à voir ou à faire. Demandez à vos employés de faire de même et envisagez d’embaucher des utilisateurs pour effectuer des tests également (car ils verront tout cela avec un regard neuf).

Rendez votre site Web adapté aux mobiles

Même si tout est correct aujourd’hui, l’apparence et le fonctionnement des appareils mobiles changeront continuellement et le site Web adapté aux mobiles d’aujourd’hui pourrait ne pas faire le travail demain. Continuez à tester, à peaufiner si nécessaire, et continuez à considérer vos utilisateurs mobiles comme une priorité et tout devrait bien se passer.