12 conseils pour créer un site web adapté aux mobiles

Ce n’est pas parce que votre site Web peut être consulté sur un appareil mobile qu’il est adapté aux mobiles.

Pour savoir comment faire en sorte que vos clients mobiles vivent une expérience positive, suivez ces suggestions d’experts en téléphonie mobile et de professionnels de la conception et du développement Web.

Si votre site Web ou votre site de commerce électronique n’est pas optimisé pour le trafic mobile, vous risquez de perdre des clients et des ventes potentiels.

1. Soyez réactif

Utilisez un cadre technologique réactif.

Ces cadres sont essentiellement des moyens simples de disposer les éléments dans une grille, puis de déplacer cette grille en fonction des différentes tailles d’écran, de sorte que les éléments sur un grand écran sont espacés aussi bien qu’ils le seraient sur un iPad ou un smartphone.

Les frameworks comme Bootstrap sont open source (gratuits), bien documentés et très faciles à mettre en œuvre.

Le responsive est une approche plus unifiée du développement Web qui permet de créer une expérience similaire pour l’utilisateur, quelle que soit la façon dont il accède au site (ordinateur de bureau, tablette ou smartphone).

En plus d’être une meilleure expérience utilisateur sur tous les appareils, cela consolide votre site Web afin que vous n’ayez pas besoin d’une URL mobile distincte, cela présente des avantages en termes de référencement et c’est également beaucoup plus facile à gérer.

2. Pensez avec votre pouce (ou votre index)

Assurez-vous que votre site est entièrement navigable avec un pouce et qu’il ne nécessite aucun pincement pour être utilisé.

C’est l’un des conseils les plus importants pour tout site mobile, car vous voulez que les utilisateurs puissent naviguer sur votre site avec leur ‘main de téléphone’ sans avoir recours à une seconde main.

De plus, s’il faut pincer pour zoomer, c’est que votre contenu est probablement trop petit ou n’est pas parfaitement optimisé pour cet appareil de navigation.

Trop souvent, un site web adapté aux mobiles se contente de redimensionner l’écran à l’aide de CSS (media queries) et ne tient pas compte du fait que les doigts peuvent provoquer des clics mal placés.

De même, lorsque vous concevez des interfaces mobiles, vous devez faire en sorte que vos cibles soient suffisamment grandes pour être facilement sélectionnables.

L’index moyen de la plupart des adultes mesure 15 à 20 mm, ce qui correspond à 45 à 57 pixels.

La « règle empirique » est de donner aux boutons ou aux éléments de tapotement au moins 45 pixels d’espace pour les zones de sélection. Cela permet aux cibles à l’écran d’être facilement sélectionnables et supprime de nombreux tapotements accidentels de l’expérience utilisateur.

3. Gardez un design simple

Un design épuré et une copie ciblée peuvent être très utiles. N’oubliez pas que vous n’avez que quelques secondes pour faire comprendre qui vous êtes en tant qu’entreprise.

C’est vrai pour toute conception de site web, mais c’est particulièrement important lorsque vous concevez pour des appareils plus petits.

Un trop grand nombre d’éléments :

• graphiques
• textes
• vidéos

…peut nuire à la capacité de chargement rapide du site et détourner l’attention de votre message.

Si vous prévoyez d’utiliser des images, essayez de proposer des images dont la taille en octets est plus petite, car cela réduira le temps que les utilisateurs passent à attendre le chargement de la page.

4. Gardez un contenu court et agréable

Parfois, les gens tombent amoureux du contenu de leur site web et le site mobile devient trop encombré. Alors trouvez comment raconter votre histoire avec moins de mots.

Allez-y doucement avec le texte

L’écran d’un smartphone est beaucoup plus petit que celui d’un ordinateur de bureau, alors essayez de minimiser la quantité de texte sur votre site Web mobile.

Les utilisateurs de mobiles ont intérêt à défiler rapidement, alors n’incluez que les textes essentiels pour maintenir l’attention du lecteur.

5. N’oubliez pas qu’une icône vaut mille mots

Pour que votre site n’ait pas l’air encombré, utilisez des icônes mobiles classiques, plutôt que des mots pour :

• tapoter
• se connecter socialement
• trouver le menu

L’utilisation de ces symboles permet aux spectateurs de savoir que le site est optimisé pour les mobiles.

6. Faites vite – en proposant des images optimisées pour le téléphone

Le Web mobile est considérablement plus lent que ses cousins câblés (jusqu’à l’arrivée de la 5G).

1. Veillez donc à supprimer les fichiers multimédias lourds qui existent sur votre site de bureau, tels que les vidéos.
2. Utilisez des requêtes multimédia pour transformer les images prêtes à être affichées sur votre site de bureau en versions à résolution plus faible.
3. Et envisagez de remplacer les bibliothèques JavaScript volumineuses comme jQuery Mobile par des JavaScript autonomes.

Les résolutions et les rapports d’aspect des appareils mobiles sont très fragmentés, allant de 240 x 320 à 2560 x 1440 et plus.

Il faut également tenir compte du fait que les appareils mobiles fonctionnant sur un réseau 4G accusent toujours un certain retard en matière de vitesse de téléchargement et que de nombreux utilisateurs mobiles paient pour l’utilisation de la bande passante.

Si l’on tient compte de tout cela, il est crucial de redimensionner, de recadrer et d’optimiser les images pour qu’elles s’adaptent au mieux à la résolution et au rapport hauteur/largeur de chaque appareil.

• Cela peut permettre d’économiser une énorme quantité de bande passante
• de réduire considérablement les temps de chargement des pages Web mobiles
• tout en améliorant grandement l’expérience de navigation des visiteurs

7. N’abusez pas de Java

Dans la mesure du possible, évitez d’utiliser excessivement JavaScript dans vos sites Web mobiles, car il s’exécute différemment selon les navigateurs et les appareils.

Même les différents modèles d’un même téléphone peuvent souvent se comporter de manière assez différente en ce qui concerne JavaScript.

Cela ne veut pas dire que vous ne devez pas utiliser JavaScript, mais soyez plutôt malin à ce sujet et gardez à l’esprit que cela pourrait affecter les performances de votre site adapté aux mobiles.

8. Faites en sorte qu’il soit facile de trouver votre numéro de téléphone, votre emplacement et vos coordonnées

Gardez à l’esprit le contexte dans lequel votre site sera utilisé sur mobile.

• Souvent, les utilisateurs recherchent les heures d’ouverture du magasin
• un numéro de contact ou de réservation
• voire l’emplacement le plus proche de l’entreprise

Plus il est facile pour les utilisateurs d’accéder à ces informations et d’y donner suite, meilleure est l’expérience de l’utilisateur.

9. Envisagez la vidéo, mais ajoutez-la à bon escient

La vidéo est une nécessité absolue pour tout site mobile. En effet, les consommateurs utilisant des appareils mobiles sont trois fois plus susceptibles de regarder des vidéos que les utilisateurs d’ordinateurs portables/de bureau.

Cela dit, utilisez une technologie vidéo qui offre une expérience mobile sans faille. Votre lecteur vidéo mobile doit fonctionner en HTML5 pour garantir qu’il peut être lu sur la plupart des appareils mobiles.

En plus, utilisez un lecteur vidéo léger (qui ne consomme pas de précieuses ressources de bande passante et de traitement) afin d’améliorer considérablement le temps de chargement des pages et offrir une meilleure expérience globale.

10. Assurez-vous que les formulaires sont conçus pour le mobile

Demandez le minimum d’informations dont vous avez besoin pour contacter un prospect.

• Réduisez autant que possible le nombre et la taille des champs de formulaire
• Tirez parti de la technologie intégrée aux appareils mobiles pour optimiser la convivialité

Par exemple, le GPS est généralement accessible. Ne demandez donc pas à quelqu’un de saisir sa ville, son état et son code postal si vous pouvez les pré-remplir à la place.

11. Tenez compte de la géolocalisation

Tirez parti des capacités mobiles telles que la géolocalisation.

Les entreprises peuvent utiliser la géolocalisation pour :

• donner des indications
• permettre aux visiteurs de vérifier la disponibilité en magasin à l’emplacement le plus proche
• proposer des promotions ciblées
• offrir aux acheteurs en ligne des prix dans leur devise locale
• se connecter aux communautés sociales telles que Yelp

12. Faites des tests pour vous assurer que votre contenu peut être consulté correctement sur différents appareils, plateformes et systèmes d’exploitation

N’oubliez pas de tester l’expérience de l’utilisateur mobile par système d’exploitation pour améliorer l’expérience globale du site grâce à des tests d’utilisabilité.

Parmi les outils de test mobile, citons :

• LambdaTest – Effectuez des tests interactifs et automatisés en direct sur plus de 2000 navigateurs et systèmes d’exploitation réels en ligne
• Kobiton – plateforme de test d’applications mobiles basée sur le cloud permettant aux utilisateurs d’exécuter rapidement et facilement des tests manuels et automatisés sur des appareils Android et iOS réels
• BlazeMeter – logiciel de test de performance open-source permettant de tester les API, les applications web et mobiles

➦ Cliquez pour lire :