Qu’est-ce qu’un site web adapté aux mobiles et comment en créer un ?

This post is also available in:

Plus de 58 % du trafic Internet mondial provient d’appareils mobiles. C’est l’une des raisons pour lesquelles les moteurs de recherche se sont tournés vers la recherche mobile. En particulier, Google accorde beaucoup plus d’attention à l’indexation en fonction du mobile. En ce qui concerne le référencement, cela signifie que les robots de Google indexent la version mobile de votre site Web plutôt que la version de bureau. Par conséquent, si votre site web n’est pas adapté aux mobiles, vos chances d’être bien classé ne sont pas très bonnes.

Si vous souhaitez améliorer votre classement, votre site Web doit être adapté aux mobiles afin d’être apprécié par les robots d’exploration et les utilisateurs de Google.

Poursuivez votre lecture pour en savoir plus sur ce qu’est un site Web adapté aux mobiles et sur la manière de le créer.

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

Un site web adapté aux mobiles est conçu pour fonctionner de la même manière sur des appareils de tailles différentes, des ordinateurs de bureau aux smartphones et tout ce qui se trouve entre les deux.

Cela signifie qu’aucun des éléments du site Web n’est modifié ou inutilisable sur les petits appareils. Toutefois, certaines fonctionnalités sont limitées (comme les menus déroulants de navigation) car elles peuvent être difficiles à utiliser sur les mobiles.

De même, l’utilisation d’animations Flash est évitée afin de prévenir les problèmes de convivialité sur des écrans de tailles différentes. Pour la plupart, les appareils mobiles ne supportent pas le flash. Flash est obsolète, même sur les ordinateurs de bureau. Il y a beaucoup d’autres technologies compatibles à utiliser à la place, comme le HTML. Si vous devez faire quelque chose de plus compliqué sur un mobile, mieux vaut utiliser une application.

Parmi les principales caractéristiques des sites Web adaptés aux mobiles, citons

• Une navigation simplifiée
• Un contenu statique qui ne change pas
• Images et texte plus petits (mais toujours faciles à voir et à lire sans plisser les yeux)
• Des boutons et des liens affichés plus petits mais toujours faciles à toucher avec le doigt
• Les pages qui ne dépendent pas d’un système d’exploitation mobile pour fonctionner correctement.

La source

Il y a de grands avantages à avoir un site Web adapté aux mobiles, notamment un signal de classement positif, une expérience utilisateur (UX) améliorée et la possibilité d’offrir une expérience rationalisée sur tous les appareils.

Gardez à l’esprit que les sites web adaptés aux mobiles sont codés pour une interaction « facile » sur les appareils mobiles, ce qui diffère de la conception de sites webréactifs . Un site réactif change ou « répond » en fonction de l’appareil utilisé pour visualiser le site.

Par exemple, certaines images peuvent être masquées et le texte peut passer d’une disposition en trois colonnes à un affichage en une seule colonne. Par conséquent, une page adaptée aux mobiles peut être complètement différente d’une page sur un ordinateur de bureau.

Exemples concrets de sites adaptés aux mobiles

Avec des milliards d’utilisateurs accédant quotidiennement à l’internet via leurs smartphones, les entreprises reconnaissent la nécessité de disposer de sites adaptés aux mobiles, et il existe d’innombrables modèles de sites web dont on peut s’inspirer.

Voici trois de mes exemples préférés de sites Web que des entreprises ont optimisés pour les appareils mobiles.

Exemple n° 1 : Shutterfly.com

Shutterfly est une plateforme en ligne permettant de créer des livres photo, des tirages, des cartes et des cadeaux personnalisés. La majorité des gens prennent et utilisent des photos sur leurs smartphones. C’est pourquoi il est nécessaire pour un service tel que celui-ci de disposer d’un site web adapté aux mobiles.

Shutterfly y parvient exceptionnellement bien, grâce à l’accent mis par la marque sur la création d’une expérience mobile exceptionnelle pour tous ses clients.

Tout d’abord, la navigation est aisée, ce qui permet aux utilisateurs de trouver rapidement les informations dont ils ont besoin sur le site. En outre, la plateforme utilise beaucoup de belles images optimisées pour attirer les clients vers ses offres.

Pourquoi ce site Web fonctionne :

• Navigation facile
• Gros boutons pour les éléments de menu
• Utilisation de belles et grandes photos pour vendre différentes offres

Exemple n° 2 : Cheetos

Cheetos utilise une gamme intéressante d’images accrocheuses sur son site web. Ils le font d’une manière conviviale pour les mobiles qui ne sacrifie pas la vitesse du site web et l’expérience de l’utilisateur.

L’ensemble de la conception permet aux visiteurs mobiles de parcourir instantanément des sélections d’images et de vidéos qui vendent des produits populaires et maintiennent les utilisateurs engagés sur le site.

Pourquoi ce site Web fonctionne :

• Un menu de navigation simple
• Les curseurs d’images facilitent la navigation
• Utilisation d’une grille d’images qui s’affiche magnifiquement sur mobile

Exemple n° 3 : Huffington Post

Le Huffington Post est un organe de presse bien connu qui traite de tous les types d’informations, de la politique à l’actualité en passant par la technologie, le divertissement, etc.

La publication dispose d’un site web mobile unique, dont les titres sont légèrement modifiés afin de rendre le contenu plus facile à lire pour les utilisateurs mobiles.

En général, la page d’accueil de la version mobile contient moins de mots que celle de la version de bureau. Il est donc parfait pour lire ou parcourir les informations sur des écrans plus petits.

Un menu simple et cliquable répertorie également toutes les catégories d’articles pour faciliter la navigation.

Pourquoi ce site Web fonctionne :

• Menu cliquable simple à utiliser
• Moins de mots sur la version mobile du site
• Titres facilement scannables

Comment créer un site Web adapté aux mobiles

Il y a beaucoup d’idées fausses lorsqu’il s’agit de créer des sites réactifs et adaptés aux mobiles.

L’une des principales erreurs commises par les débutants lors de la création de sites Web adaptés aux mobiles est de travailler de manière isolée. C’est tellement mieux de s’inspirer de ceux qui l’ont déjà fait.

Les exemples ci-dessus constituent un excellent point de départ, mais vous pouvez également consulter d’autres sites Web dans votre secteur ou niche (en particulier les concurrents). Vous aurez ainsi un meilleur aperçu de leurs méthodes et des meilleures pratiques utilisées pour créer un site Web adapté aux mobiles.

1. Utilisez le bon créateur de sites Web

La première étape de la création d’un site Web adapté aux mobiles consiste à utiliser un constructeur de sites Web approprié. Choisissez-en un qui indique spécifiquement qu’il s’agit de concevoir des sites destinés à être consultés sur des appareils mobiles. La plupart des créateurs de sites modernes accordent la priorité à l’expérience mobile.

Un constructeur de site web vous permettra de créer et de lancer facilement un site web adapté à la fois aux ordinateurs de bureau et aux téléphones portables. Vous pouvez choisir parmi de nombreux créateurs de sites web, notamment des plateformes telles que WordPress, Zyro, Wix, Squarespace, Weebly, Shopify et bien d’autres.

La plupart d’entre eux proposent des versions gratuites, mais vous devrez passer à une version payante si vous souhaitez supprimer les limitations et accéder à des fonctions supplémentaires telles que le marketing par courriel.

Par exemple, si vous utilisez un constructeur de sites Web gratuit, vous pourrez créer un site Web adapté aux téléphones portables, mais sur un sous-domaine, tel que YourAwesomeWebsite.weebly.com, au lieu d’un domaine unique: YourAwesomeWebsite.com.

Selon votre niveau de compétence, vous pouvez choisir un constructeur de site web qui vous permet soit de créer un modèle de site web pour des sites web adaptés aux mobiles, soit de plonger plus profondément dans le processus de conception et de développement web pour utiliser HTML ou CSS et convertir votre conception de PSD à HTML.

Le langage HTML décrit la structure de votre page Web et le langage CSS indique au navigateur comment présenter cette page, notamment les couleurs, les polices et les mises en page. Il vous permet également d’adapter votre page Web à différents types d’appareils, tailles d’écran et systèmes d’exploitation mobiles.

Quelles que soient vos connaissances techniques et votre expertise, il est toujours préférable de privilégier des conceptions simples lors de la création de sites Web adaptés aux mobiles.

Les utilisateurs de téléphones mobiles sont connus pour avoir une durée d’attention très courte. En privilégiant la simplicité, vous pourrez facilement maintenir l’attention de vos utilisateurs sur le contenu que vous souhaitez leur présenter, au lieu d’avoir des thèmes élaborés et complexes.

2. Testez le site Web sur les appareils mobiles

Une fois votre site construit, l’étape suivante consiste à le tester sur des appareils mobiles pour s’assurer que tout fonctionne comme il se doit. Outre la vérification de la convivialité de votre site web sur plusieurs appareils, les tests de sites web mobiles offrent également les avantages suivants :

• Il rend votre site facilement accessible : Les utilisateurs peuvent accéder à votre site via n’importe quel navigateur sur plusieurs appareils mobiles.
• Il rend votre site plus visible : La réalisation de tests de sites Web mobiles rend également votre site plus facile à trouver, car Google donne la priorité aux sites mobiles par rapport aux applications de bureau.
• Il améliore l’expérience utilisateur : Un site Web adapté aux mobiles améliore l’aspect et la convivialité du site, ce qui se traduit par une meilleure expérience utilisateur.

Pour tester votre site Web adapté aux mobiles, vous pouvez utiliser un outil dédié comme le test Google Mobile-Friendly, auquel vous pouvez accéder ici.

Cet outil vous permet de tester la facilité avec laquelle les visiteurs peuvent utiliser les pages de votre site Web sur des appareils mobiles. Il suffit d’entrer l’URL d’une page, et vous pourrez voir les résultats de votre page.

L’outil peut montrer que votre site a besoin de beaucoup de travail. Vous devrez donc donner la priorité à la transformation de votre site en un site adapté aux mobiles afin d’améliorer sa visibilité dans les moteurs de recherche.

Si vous obtenez le feu vert, votre site Web est adapté aux mobiles et ne nécessite pas le même niveau de priorité, mais vous pouvez toujours améliorer l’expérience utilisateur par tous les moyens possibles. Chaque petit geste compte, et tout ce que vous ferez contribuera à faire en sorte que les visiteurs de votre site Web restent plus longtemps, ce qui vous permettra d’augmenter vos conversions et de réaliser plus de ventes.

Vous pouvez également opter pour un outil de navigation gratuit tel que Responsinator, qui vous permet de redimensionner votre site web à n’importe quelle taille afin de voir exactement comment il se présente sur les écrans de différents appareils.

Enfin, en plus de la convivialité mobile, Darshan Somashekar, qui dirige la plateforme de jeux Solitaired, suggère d’effectuer un test de vitesse des pages sur votre site mobile. « S’il est important d’être compatible avec les mobiles, Google mesure désormais les vitales du web. Nous le mesurons régulièrement pour nos jeux de solitaire. Si votre page ne se charge pas rapidement et efficacement, non seulement les utilisateurs rebondiront, mais cela aura un impact sur votre classement de recherche. »

3. Optimiser la taille de l’image

Une autre chose que vous pouvez faire pour vous assurer que votre site Web est adapté aux mobiles est de dimensionner correctement les images pour une visualisation optimale sur les appareils mobiles.

Lorsqu’il s’agit de petits écrans, l’objectif est d’utiliser des images dont la taille de fichier est la plus petite possible tout en conservant un aspect clair et net sur l’écran sur lequel les lecteurs les visualisent. En effet, les appareils mobiles ont une bande passante beaucoup plus étroite que les ordinateurs de bureau, ce qui peut entraîner des temps de chargement plus longs si vous ne les optimisez pas.

Si vos utilisateurs doivent télécharger un fichier JPEG de 1 Mo juste pour voir une image de la taille d’une vignette, ils seront probablement frustrés et quitteront votre site. La beauté de la conception de votre site web n’a aucune importance. Si vous ne pouvez pas améliorer l’expérience de l’utilisateur en réduisant les temps de chargement, il quittera probablement votre site pour un de vos concurrents.

Veillez donc à réduire la taille de tous vos fichiers image afin d’utiliser moins de données et d’accélérer le chargement des pages. Cela contribuera à donner une image positive de votre site Web mobile.

4. Abandonnez les publicités et les fenêtres pop-up qui bloquent le texte.

Une autre façon de s’assurer que votre site Web est adapté aux mobiles est de n’utiliser que des annonces de marketing mobile discrètes qui ne distraient pas ou ne couvrent pas votre contenu mobile.

Personne n’aime les publicités, quel que soit le contexte, et lorsque les utilisateurs essaient de lire du texte sur un petit écran, la dernière chose dont ils ont besoin est une fenêtre contextuelle qui leur bloque la vue de la page. Plutôt que de prendre le temps d’essayer de trouver le petit « x » pour minimiser la fenêtre publicitaire, les utilisateurs vont probablement cliquer pour trouver un site Web offrant une meilleure expérience utilisateur.

Évitez d’ennuyer vos utilisateurs et créez une expérience améliorée en évitant les fenêtres pop-up et les publicités qui bloquent le contenu de votre page. Si vous ne pouvez pas les supprimer entièrement, désactivez-les au moins pour les utilisateurs mobiles.

Vous pouvez aussi faire en sorte que les fenêtres pop-up ou les publicités n’apparaissent que lorsque les utilisateurs ont défilé jusqu’au bas de la page, plutôt que de les afficher dès qu’ils arrivent sur la page.

Assurez-vous également que le « X » permettant d’annuler la fenêtre contextuelle ou la publicité est suffisamment grand pour que les utilisateurs le trouvent et le sélectionnent facilement.

5. Faites de la vitesse du site Web une priorité

Enfin, vérifiez que les vidéos et autres contenus interactifs de votre site ne provoquent pas de décalage. Les utilisateurs mobiles n’aiment pas passer plus de temps que nécessaire à chercher les informations dont ils ont besoin sur le site web, vous devez donc vous assurer de leur fournir des résultats en quelques secondes.

De nos jours, les gens exigent une satisfaction immédiate, et s’ils n’obtiennent pas ce dont ils ont besoin immédiatement (c’est-à-dire presque au premier coup d’œil), vous pouvez être sûr qu’ils n’attendront pas.

Votre site web ne doit pas prendre trop de temps pour se charger complètement. Il doit être présentable, et tous les éléments importants doivent être accessibles en un ou deux défilements vers le bas. Si ces points de conception ne sont pas respectés, les utilisateurs se tourneront probablement vers un autre site web.

Conclusion

J’espère que cet article vous a aidé à comprendre exactement ce qu’est un site Web adapté aux mobiles et les étapes à suivre pour en créer un. Utilisez ces informations pour vous aider à concevoir un site Web qui sera aussi beau sur mobile que sur ordinateur.

Cet article a-t-il répondu à toutes vos questions sur la façon de créer un site Web adapté aux mobiles ? Partagez votre opinion ci-dessous !

---

PAR LIGNE :

Ron Stefanski est un entrepreneur de sites Web et un professeur de marketing qui a pour passion d’aider les gens à créer et à commercialiser leur propre entreprise en ligne. Vous pouvez en apprendre davantage sur lui en visitant OneHourProfessor.com.

Vous pouvez également vous connecter avec lui sur YouTube ou Linkedin .