Créer un site internet adapté aux mobiles

En termes de conception de sites Web adaptés aux mobiles, Google ne se contente pas de faire des annonces, il poursuit sa stratégie basée sur le mobile. Si vous êtes propriétaire d’un site Web et que vous pensez à long terme, vous feriez bien de prendre en compte cette nouvelle donne.

Avoir un site internet responsive est incontournable de nos jours. Le nombre d’utilisateur mobile est en croissance constante depuis plusieurs années. C’est pourquoi adopter dès le départ la bonne stratégie à ce sujet vous permettra de prendre un avantage concurrentiel.

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

L’un des faits les plus importants dont vous devez être conscient lors de la conception d’un site Web adapté aux mobiles est que les utilisateurs mobiles sont très axés sur les objectifs. Ils aiment avoir un accès instantané aux informations qu’ils recherchent de la manière la plus simple et la plus courte possible.

La conception de sites Web adaptés aux mobiles est essentielle
La part des appareils mobiles dans les statistiques augmente d’année en année. Marchez simplement dans la rue et regardez autour de vous, et vous verrez toujours au moins une personne les yeux rivés sur son téléphone.

En effet, avec la multiplication des smartphones, tablettes et phablettes, de plus en plus de contenus multimédias sont devenus consommables et accessibles aux personnes. Vous pouvez accéder au contenu plus facilement et simplement.

Google encourage également cette tendance en favorisant les pages Web adaptées aux mobiles lors de la recherche sur les appareils mobiles.

En plus de ce qui précède, Google place une petite balise sur ces types de pages pour indiquer dans les résultats de recherche que vous pouvez consulter la page en toute sécurité sur votre téléphone. L’entreprise a expérimenté plusieurs types d’étiquettes, mais la version finale semble être devenue une légende grise « mobile-friendly ».

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

• Par exemple, Google indique qu’un site Web adapté aux mobiles n’utilise pas la technologie Flash pour afficher le contenu
• Site Web adapté aux mobiles avec des tailles de police faciles à lire sans mise à l’échelle
• Les sites adaptés aux mobiles adaptent le contenu à la taille de l’écran afin que vous n’ayez pas besoin de zoomer horizontalement pour lire
• Les liens sur les sites adaptés aux mobiles sont bien entretenus et faciles à cliquer

Pour résumé disons que quiconque souhaite profiter d’une présence Web moderne pour les années à venir se doit de penser et concevoir son site Web de manière à optimiser son interface pour s’adapter à autant d’appareils multimédias que possible.

Pas seulement à cause de Google. De plus en plus d’utilisateurs peuvent accéder à Internet depuis différents appareil. Oubliez le stéréotype des personnes assises devant un PC consommant du contenu Web, car les usages ont évolués.

Les habitudes des consommateurs Web changent constamment, et si votre site Web ne s’affiche pas correctement sur les appareils mobiles, vous risquez de perdre des clients potentiels.

Tous les web designers savent que la conception Web responsive est la meilleure solution à ce problème. Oui, mais un grand pourcentage de pages Web réactives sont créées en concevant d’abord la page Web sur un écran, puis en la construisant pour un écran mobile. En règle générale, la vue mobile est une version fortement tronquée de la vue sur ordinateur de bureau !

Si vous naviguez sur votre téléphone mobile, vous trouverez un grand pourcentage de pages Web inutilisables ou difficiles à utiliser. Ce phénomène est causé par la conception bâclée du site Web, car la version mobile est une version considérablement réduite de la version de bureau.

L’approche mobile first de Google

Il existe une autre approche, l’approche « mobile first ».C’est à dire que les web designers partent d’une base mobile pour créer les pages. Une fois que les pages mobile sont terminés alors le design « classique » ordinateur de bureau est définir.

C’est parce que l’interface est conçue pour être amovible par défaut que moins de contenu devra être supprimer et des pages Web. C’est prendre le contre pied des habitudes mais c’est une stratégie qui garanti un site responsive avec une expérience utilisateur optimisée.

À quoi dois-je faire attention lors de la conception graphique d’un site Web responsive ?

Si vous recherchez un site Web utilisable et adapté aux mobiles, nous avons rassemblé quelques conseils qui ne feront pas de mal.

L’objectif du site Web doit être clair

Vos utilisateurs doivent savoir de quoi parle votre site Web en premier lieu, sinon ils auront simplement l’impression de perdre leur temps. Si possible sur le premier écran, c’est une bonne idée de leur faire savoir à quoi s’attendre lorsqu’ils commencent à parcourir votre contenu.

Evitez de bricoler du responsive desktop -> Mobile

Avoir un site Web qui n’est pas adapté aux mobiles est encore assez courant. Et le nombre de clients qui souhaite rendre leur site Web adapté aux mobiles aussi rapidement et à moindre coût que possible reste grand. Un petit ajustement CSS ici, et un petit menu hamburger là, et c’est parti pour votre site mobile.

Malheureusement, il s’agit d’une approche très courante et, dans la plupart des cas, les clients se retrouvent avec une mauvaise expérience utilisateur avec l’interface mobile. En général sur ce type de cas de figure, naviguer n’est pas si facile car la différence entre les surfaces est si grande. Différentes méthodes de saisie (souris, doigt), différentes tailles de surface (petite, grande), différents modes d’utilisation. Qu’il faudra passer par une refonte totale rapidement avant de perdre vos clients.

Seuls les éléments les plus importants restent

Malheureusement, l’espace disponible sur les interfaces mobiles est très réduit, il convient donc de se concentrer sur les éléments les plus importants. L’objectif est d’avoir le moins de surfaces cliquables possible, avec le moins de distractions de page possible. L’élimination des distractions aide les utilisateurs à rester concentrés, et les pages plus courtes aident les utilisateurs à défiler moins. Bien sûr, cela n’est pas toujours évitable lors de la conception d’un site Web.

Les éléments cliquables doivent être grands

Nos doigts sont beaucoup plus larges que les curseurs de souris précis et nécessitent donc une plus grande surface pour les utiliser. Par exemple, Apple recommande de maintenir une distance carrée de 44 pixels autour des surfaces tactiles mobiles. Bien sûr, cela ne devrait pas être fait pixel par pixel, mais cela vaut également la peine d’augmenter autant que possible la distance autour du lien, la circonférence du bouton et la distance d’arrêt. Cela gardera le contenu plus occupé et les éléments plus faciles à cliquer.

Optez pour des structures aérées, de grands espaces et un lettrage clair

Il est particulièrement important d’utiliser de grands espaces et des polices claires sur les surfaces mobiles. Un grand espacement maintient le contenu organisé et les polices plus grandes sont plus faciles à lire. Les clients aiment inclure autant de texte que possible sur une page, mais les petites lettres confuses sont difficiles à lire, en particulier sur les petits téléphones.

Le bouton d’appel à l’action sur la page d’accueil doit être disponible sans défilement

Lors de la conception d’un site Web adapté aux mobiles, il convient de noter que la page de destination d’un site Web réactif moderne commence généralement par une image principale et un bouton CTA (appel à l’action). En vue mobile, si la page n’est pas correctement optimisée, le bouton CTA n’est disponible qu’après le défilement. Il s’agit d’une erreur fatale, en vue mobile, le bouton CTA sur le premier écran devrait être disponible immédiatement.

Utiliser des menus courts et simplifiés

Les utilisateurs mobiles n’aiment pas faire défiler de longues listes de menus. Portez une attention particulière à cela lors de la planification. Répertoriez les éléments de menu sur vos pages Web afin que les utilisateurs mobiles puissent trouver l’élément de menu qu’ils recherchent aussi facilement que possible.

Sur les pages Web traditionnelles, le menu de navigation principal se trouve généralement en haut de la page. Selon le nombre d’éléments de menu, cette structure peut ne pas s’afficher correctement sur les interfaces mobiles.

En raison des problèmes susmentionnés, les menus de hamburgers se sont répandus et sont devenus plus populaires sur le bureau. Le deuxième problème, plus grave, est la navigation à plusieurs niveaux, affichant des menus déroulants pour survoler l’interface mobile. Essayez d’éviter de les utiliser sur votre téléphone.

Rendez-le accessible aux moteurs de recherche

Les utilisateurs mobiles recherchent des informations sur les pages Web. S’ils ne trouvent pas quelque chose, ils se tournent généralement vers un moteur de recherche. Lors de la conception d’un site adapté aux mobiles, si votre site comporte un champ de recherche, placez-le bien en vue dans la vue mobile et ne l’insérez pas, par exemple derrière un menu déroulant.

Laissez vos utilisateurs naviguer librement

Les utilisateurs aiment explorer et en savoir plus sur les pages Web avant de prendre des décisions différentes. Laissez vos utilisateurs naviguer librement sans aucune tâche obligatoire. Par exemple, demander des informations utilisateur trop tôt réduit le nombre d’enregistrements.

Utilisez le formulaire le plus court possible pour demander des informations

Lors de la conception web design d’un site adapté aux mobiles, portez une attention particulière au fait que les utilisateurs détestent les formulaires longs et opaques. Utilisez les champs de saisie structurés les plus simples lors de la planification.

Réduisez le pourcentage d’erreurs lorsque vous remplissez des formulaires avec des messages d’erreur explicites. Si vous ne pouvez pas éviter les longs formulaires, utilisez une barre de progression, un assistant qui montre à l’utilisateur combien il reste à la fin.

Oubliez les liens « version complète » et « version bureau » en bas de page

Des versions spécifiques à l’affichage de certaines pages Web sont également disponibles sur les appareils mobiles à l’aide des liens ci-dessus. Si vous prévoyez un site adapté aux mobiles, oubliez ces liens car ils suggèrent à vos utilisateurs mobiles qu’ils obtiendront plus de contenu à partir de la version de bureau.

Optimisez l’ensemble de votre site Web pour les appareils mobiles

Lors de la conception d’un site Web adapté aux mobiles, il est important que toutes les pages soient optimisées pour une interface mobile. Pour les sites où ce n’est pas le cas, les utilisateurs peuvent être confus et peuvent rencontrer des performances médiocres. Les concepteurs dessinent généralement des plans mobiles et de bureau de taille fixe (mieux), et la plupart des développeurs utilisent des frameworks réactifs (Bootstrap, Foundation) pour organiser le développement. Le problème commence lorsque les surfaces ne sont pas optimisées sur autant de plages de tailles, elles ne sont belles que sur certains téléphones et tablettes.

Bien sûr, il est impossible d’optimiser la surface pour chaque appareil mobile, mais si la surface est conçue dans un style mobile, elle peut couvrir une gamme plus large. Efforcez-vous de rendre votre site Web et votre application Web attrayants sur autant de surfaces que possible.

Conception de site Web réfléchie et autres arguments pour des sites Web adaptés aux mobiles

• Un français sur deux possèdent un smartphone
• Selon les tendances, plus de personnes utilisent Internet sur des plateformes mobiles que sur des ordinateurs de bureau en France
• Google préfère les sites adaptés aux mobiles lorsque les utilisateurs recherchent Google sur des appareils mobiles
• Lors de la navigation sur un appareil mobile, 40 % des internautes quitteront un site Web s’il n’est pas adapté aux mobiles
• 48 % des utilisateurs sont ennuyés lorsqu’ils visitent des pages optimisées non mobiles
• 48 % des utilisateurs déclarent que les entreprises qui n’optimisent pas leurs sites pour les mobiles ne se portent pas bien

Le mobile first pour réduire les soucis de compatibilité

L’avantage d’un site Web mobile est que la conception commence par l’interface mobile et se termine par l’interface de bureau. C’est pourquoi la plupart des problèmes ci-dessus peuvent être évités. Comme pour toute conception de site Web, une approche axée sur le mobile est recommandée pour le wireframing, le prototypage et la fabrication. Il est préférable de prédéfinir d’abord des points d’arrêt réactifs et de les optimiser pour les résolutions mobiles les plus basses.

Pour tester votre site web pour mobile-friendly selon Google, vous pouvez faire le test avec le lien suivant :

https://search.google.com/test/mobile-friendly

Cela dit, il y a beaucoup de choses à considérer pour obtenir la meilleure expérience utilisateur sur une interface mobile, mais cela vaut la peine d’y consacrer du temps et de l’argent. Les clients potentiels sur votre téléphone peuvent d’abord tomber sur votre site Web, et si vous ne trouvez pas les informations que vous recherchez ou si vous y trouvez une confusion, vous pouvez facilement passer à autre chose. Cela peut vous faire échouer.

FAQ :