Article

Conception de sites Web mobiles en 2021: tout ce que vous devez savoir

La conception de sites Web mobiles est essentielle.





Pourquoi? Parce que les appareils mobiles révolutionnent la façon dont nous nous connectons et, par conséquent, la façon dont les entreprises fonctionnent. En fait, la majorité du trafic Web actuellement vient du mobile dispositifs.

«Le mobile devient non seulement le nouveau hub numérique, mais également le pont vers le monde physique», dit Thomas Husson , vice-président et analyste principal de Forrester Research. 'C'est pourquoi le mobile affectera plus que vos opérations numériques - il transformera l'ensemble de votre entreprise.'





En d'autres termes, vous avez besoin d'un site Web réactif pour mobile.

Mais qu'est-ce qu'un site Web adapté aux mobiles? Dans cet article, vous apprendrez tout sur les sites Web adaptés aux mobiles et découvrirez neuf des meilleurs exemples de conception de sites Web pour mobile. De plus, vous apprendrez à savoir si votre site Web est adapté aux mobiles.


OPTAD-3

Allons-y.

N'attendez pas que quelqu'un d'autre le fasse. Engagez-vous et commencez à donner les coups.

Commencez gratuitement

Qu'est-ce qu'un site Web adapté aux mobiles?

En termes simples, un site Web adapté aux mobiles est un site conçu et optimisé pour les appareils portables, tels que les smartphones et les tablettes.

Et la conception réactive mobile est le processus de créer un site Web qui s’adapte à la taille de l’écran sur lequel il est visualisé.

Chez Oberlo, nous avons une conception de site Web adaptée aux mobiles. Comparons son apparence sur ordinateur et sur mobile.

coût moyen pour faire de la publicité sur facebook

Dans l'image ci-dessous, vous pouvez voir que le site Web de bureau a beaucoup d'espace, les éléments de la page sont disposés côte à côte par endroits et le texte est relativement petit par rapport à la taille de l'écran.

Site Web d

En revanche, lorsque vous affichez le site Web sur un mobile, les éléments de la page sont empilés les uns sur les autres dans une longue colonne, et il y a moins d'espace autour de chaque élément. De plus, les boutons sont plus grands pour faciliter leur utilisation et le texte est plus grand par rapport à la taille de la page pour le rendre plus facile à lire.

Conception de site Web mobile Oberlo

«Les expériences riches et interactives auxquelles nous nous attendons sur les applications mobiles ont créé de nouvelles normes et attentes pour tous les médias numériques, y compris le Web». dit Raj Aggarwal , PDG de la société de marketing mobile Localytics. «Le résultat est que les sites Web évoluent pour devenir plus proches des applications dans leur riche fonctionnalité.»

L'importance de la conception de sites Web mobiles

Allons droit au but: au dernier trimestre de 2019, les smartphones étaient à l'origine d'un énorme 52,6% du trafic mondial du site Web .

Cela signifie que l'utilisation des appareils mobiles domine désormais les ordinateurs de bureau.

Plus, the nombre d'utilisateurs mobiles dans le monde, il devrait atteindre 3,8 milliards d’ici 2021.

Comme Cyndie Shaffstall , le fondateur de la société de marketing Spider Trainers, a déclaré: «Le mobile n'est pas l'avenir, c'est le maintenant. Rencontrez vos clients dans l'environnement de leur choix, pas là où cela vous convient. »

Les appareils mobiles modifient également les habitudes d'achat.

Selon Google, 59 pour cent des acheteurs dire que pouvoir magasiner sur leurs appareils mobiles est important pour décider du détaillant ou de la marque auprès duquel acheter.

Plus, 70% des propriétaires de smartphones qui ont effectué un achat en magasin se sont tournés vers leurs appareils mobiles pour rechercher l'achat au préalable.

Si cela ne suffit pas, l'algorithme de Google donne la priorité aux sites Web adaptés aux mobiles dans les résultats de recherche.

En mars 2020, Google a dit , 'Pour simplifier, nous allons passer à l'indexation mobile first pour tous les sites Web.'

Si vous vous demandez ce que cela signifie, le conseiller des développeurs Google John Mueller explique :

«Actuellement, Google examine la version de bureau d'un site, puis détermine comment il classera le site mobile en fonction de ces informations. Une fois cette mise à jour déployée, le contraire se produira. Google commencera à examiner votre site mobile et, à partir de là, classera le site pour ordinateur. '

La mise à jour entrera officiellement en jeu en septembre 2020, mais 70 pour cent des sites Web affichés dans les résultats de la recherche sont déjà classés en fonction de cet algorithme d'indexation mobile first.

Statistiques Google

Enfin, de nombreux utilisateurs chargent des sites Web mobiles en utilisant des connexions téléphoniques lentes et faibles. En conséquence, les marques doivent créer une conception de site Web mobile qui se charge rapidement.

Dans l'ensemble, le monde est désormais axé sur les mobiles. C'est pourquoi vous avez besoin d'un site Web réactif pour les mobiles.

8 conseils de conception des meilleurs sites Web mobiles

Dans cette section, nous allons examiner de plus près huit conseils de conception de sites Web mobiles que vous pouvez utiliser. De plus, vous verrez des exemples concrets de certains des meilleurs sites Web pour mobile sur le Web.

1. Utilisez de grands boutons

Les sites Web adaptés aux mobiles doivent avoir des boutons suffisamment grands pour que les utilisateurs puissent les toucher sans avoir à zoomer.

De plus, il doit y avoir un espace entre les hyperliens. Si les liens sont placés trop près les uns des autres, les utilisateurs peuvent tenter de cliquer sur un lien et cliquer accidentellement sur un autre.

Shopify utilise de gros boutons et met beaucoup d'espace entre les hyperliens sur la conception de son site Web mobile.

Grands boutons Shopify

Ainsi, lorsque vous concevez votre site Web réactif pour mobile, gardez à l'esprit l'espacement et assurez-vous que chaque lien hypertexte peut être facilement cliqué.

2. Rendre le texte suffisamment grand pour être lu

Celui-ci peut sembler un peu évident, mais il est également crucial pour la conception de sites Web adaptés aux mobiles.

Les utilisateurs ne devraient jamais avoir à zoomer - ou à faire défiler vers la gauche ou la droite - pour lire quelque chose. Le texte doit toujours être suffisamment grand pour être lu confortablement.

Dans l'exemple ci-dessous de Beardbrand , vous pouvez voir que tout le texte affiché correspond parfaitement à la taille de l'écran.

Grand texte Beardbrand

Faites en sorte que votre texte soit suffisamment grand sur des écrans de toutes tailles pour que les utilisateurs puissent facilement lire ce que vous avez à dire.

3. Simplifier les menus

Les menus du site Web de bureau ont beaucoup d'espace. Ils peuvent occuper une barre entière en haut de l'écran et disposer de nombreuses options de liste déroulante, le tout sans nuire à l'expérience utilisateur.

Ce n’est pas le cas sur les appareils mobiles - il n’y a tout simplement pas assez d’espace.

Les sites Web adaptés aux mobiles doivent utiliser des menus simples qui présentent un aperçu du site Web. Les utilisateurs peuvent ensuite utiliser des catégories, des filtres ou la fonction de recherche pour se concentrer sur ce qu'ils recherchent.

La plupart des sites Web adaptés aux mobiles utilisent le symbole du hamburger - composé de deux ou trois lignes horizontales - pour indiquer un menu.

Voyons un bon exemple de l'un des meilleurs sites Web pour mobile, Peau de Kylie .

Lorsque les utilisateurs appuient sur le menu hamburger sur deux lignes en haut à droite de l'écran, un menu plein écran avec de gros boutons et du texte s'affiche.

Exemple de menu mobile KylieSkin

Lors de la création d'un site Web réactif pour mobile, gardez vos menus simples pour permettre aux utilisateurs de trouver facilement ce qu'ils recherchent.

4. Fournir une fonction de recherche simple et intuitive

La fonction de recherche de votre site Web est particulièrement importante pour les utilisateurs mobiles.

Comme mentionné ci-dessus, des menus simplifiés peuvent faciliter la navigation mobile. Cependant, ils peuvent également rendre plus difficile pour les utilisateurs de trouver un élément spécifique.

Pour permettre aux utilisateurs de trouver facilement ce qu'ils veulent, placez la fonction de recherche au premier plan.

Utilisateur Shopify Gymshark place la fonction de recherche dans la barre supérieure de la page. Une fonction de filtrage intuitive permet également aux utilisateurs de trouver plus facilement des types de produits spécifiques.

Fonctionnalités de recherche et de filtrage de Gymshark

La clé à emporter? Intégrez une fonction de recherche simple et efficace à la conception de votre site Web mobile.

5. Facilitez la prise de contact

Si un client recherche vos coordonnées, il se peut qu'il ait rencontré des problèmes, ce qui signifie qu'il est probablement déjà un peu frustré. N'ajoutez pas d'insulte à une blessure en vous empêchant de vous contacter.

comment voir votre histoire sur instagram

En particulier lorsque 84 pour cent des consommateurs considérer Service Clients être un facteur clé lors de la décision de faire ou non un achat.

Service client Stat

Voici un autre excellent exemple de conception de site Web mobile d'un utilisateur de Shopify Brémont . Cette marque de montres de luxe place une icône de chat en bas à droite de l'écran, ce qui permet aux visiteurs du site Web de contacter rapidement et facilement un représentant.

Options de contact Bremont

Si vous ne pouvez pas proposer de chat en direct 24h / 24, envisagez de créer un lien vers un Chatbot Facebook , ou simplement fournir un formulaire de contact auquel les utilisateurs peuvent accéder via un lien «Contact» dans votre menu.

6. Créer des formulaires simples

Les utilisateurs peuvent être plus enclins à remplir un long formulaire sur un ordinateur car l'écran est plus grand et il est plus facile de taper avec un clavier.

Sur les appareils mobiles, les formulaires doivent être plus courts avec de grands champs de texte et des boutons.

Par exemple, si vous demandez aux utilisateurs de s'inscrire à votre liste de diffusion, vous ne devriez pas demander plus qu'un prénom et une adresse e-mail.

Si vous avez besoin d'inclure plus de questions, faites-leur répondre rapidement et facilement.

Dans cet exemple de conception de site Web mobile de l'utilisateur Shopify QuadLock , vous pouvez voir de grands champs avec des exigences de formulaire simples. Il existe même un menu déroulant pour aider les utilisateurs à fournir des informations sur leur demande.

Formulaire de contact QuadLock

En bref, assurez-vous que vos formulaires sont courts et simples.

7. Créez des appels à l'action accrocheurs

À appel à l'action - également connu sous le nom de CTA - est une image, une bannière ou un morceau de texte qui appelle littéralement les utilisateurs à prendre une forme d'action.

Par exemple, vous pouvez inviter les utilisateurs à s'inscrire à votre liste de diffusion , en savoir plus sur une offre ou acheter un produit.

Cette tactique de marketing joue un rôle essentiel dans la conception de sites Web mobiles.

Cependant, il peut être difficile de créer des appels à l'action convaincants avec un espace d'écran aussi limité pour jouer.

Dans cet exemple de site Web mobile de l'utilisateur Shopify Cheveux Luxy , vous pouvez voir deux bannières présentant des appels à l'action. Le premier fait la promotion d'un nouveau produit accompagné d'un cadeau gratuit, et le second invite les utilisateurs à en savoir plus sur la livraison gratuite de la marque et les politiques d'échange de 90 jours.

Appels à l

Lorsque vous créez des CTA pour votre site Web adapté aux mobiles, faites-les se démarquer en les plaçant au-dessus du pli où les utilisateurs peuvent les voir sans avoir à faire défiler vers le bas.

8. Évitez les pop-ups

Regardons les choses en face: la plupart des gens détestent les pop-ups. En fait, si vous recherchez sur Google 'Je déteste les annonces pop-up', vous obtiendrez près de 48 millions de résultats.

Pas étonnant que Google ait déployé un changement d'algorithme en 2017 qui pénalise les sites Web qui diffusent des types spécifiques de pop-ups sur les appareils mobiles.

De nos jours, vos classements de recherche risquent de souffrir si vous:

  • Afficher une fenêtre contextuelle qui couvre le contenu principal
  • Affichez un interstitiel autonome que l'utilisateur doit ignorer avant de pouvoir accéder au contenu principal.
  • Faites en sorte que le haut de la page ressemble à un interstitiel autonome et placez le contenu d'origine en dessous.

Pop-Ups qui sucent

Cela dit, certains types de pop-ups ne devraient pas avoir d'incidence négative sur votre classement, tels que

  • Interstitiels utilisés pour respecter les obligations légales telles que la vérification de l'âge, le consentement aux cookies ou RGPD .
  • Fenêtres de connexion pour accéder au contenu privé, tel que le courrier électronique ou le contenu qui se trouve derrière un paywall.
  • Petites bannières facilement supprimables et «utilisant une quantité raisonnable d'espace sur l'écran», telles que les bannières d'installation d'applications utilisées par Chrome et Safari.

Pop-Ups qui sont corrects

En fin de compte, les pop-ups mobiles frustrent les utilisateurs et peuvent nuire à votre classements de recherche , alors ne les utilisez que lorsque cela est absolument nécessaire.

Comment savoir si vous disposez d'un site Web adapté aux mobiles

Si vous vous demandez si votre site Web est adapté aux mobiles, il ne vous faudra qu'un instant pour le découvrir avec Outil de test adapté aux mobiles de Google - entrez simplement un lien vers votre site Web et cliquez sur 'Tester l'URL'.

Cet outil évaluera à quel point votre site Web est adapté aux mobiles et vous donnera une description détaillée de ce que vous pouvez faire pour l'améliorer.

Test d

Résumé: Conception de sites Web mobiles en 2021

Un site Web adapté aux mobiles est un site Web conçu pour fonctionner correctement sur les smartphones et les tablettes. Et maintenant que le monde est axé sur le mobile, votre site Web devrait l'être aussi.

En résumé, voici huit conseils de conception de sites Web mobiles:

  1. Faites des boutons assez grands pour que les gens puissent les toucher.
  2. Assurez-vous que le texte est suffisamment volumineux pour être lu sans que les utilisateurs aient besoin de zoomer.
  3. Simplifiez votre menu pour faciliter la navigation sur un petit écran.
  4. Placez la fonction de recherche au premier plan et permettez aux utilisateurs de filtrer les résultats de la recherche.
  5. Faites en sorte que les utilisateurs puissent vous contacter sans effort.
  6. Créez des formulaires simples et rapides à utiliser.
  7. Placez des incitations à l'action au-dessus du pli, de manière à ce qu'elles soient visibles.
  8. Évitez de frustrer les utilisateurs avec des fenêtres contextuelles à moins qu'elles ne soient absolument nécessaires.

Que pensez-vous de la conception de sites Web mobiles? Avons-nous manqué de bonnes pratiques de conception de sites Web mobiles? Faites-nous savoir dans les commentaires ci-dessous!

Vous voulez en savoir plus?



^