Réussir Apprendre
Retour

Les bonnes pratiques dans la conception d'un site web « mobile first »

Téléchargez un manuel gratuit, qui vous aidera à concevoir votre site en toute confiance.

L’adresse e-mail saisie n’est pas valide.

Nous vous remercions de vous être abonné(e).

Lorsque les internautes visitent votre site web, ils peuvent y accéder à partir d'un ordinateur portable, un ordinateur de bureau, un smartphone ou une tablette. Compte tenu de la diversité des tailles d'écran, il est important de réfléchir à la manière de créer un site web dont l'aspect sera cohérent et qui restera fonctionnel pour les visiteurs de votre site, quel que soit l'appareil qu'ils utilisent. Adopter une approche « mobile first » pour la conception de votre site web vous permettra d'offrir une expérience utilisateur (UX) réactive

En savoir plus sur le design « mobile first » et sur la façon d'assurer une interaction positive des internautes avec votre site web.

Comprendre le concept de « mobile first »

Le « mobile first » est une philosophie de conception qui offre une expérience de navigation plus conviviale en donnant la priorité aux petits écrans. Elle se base sur l'idée d'une évolution progressive : il s'agit de développer d'abord la version la plus petite, puis de la réviser pour l'adapter aux versions plus grandes (comme les ordinateurs de bureau ou les télévisions connectées).

Les principes du « mobile first » encouragent les concepteurs d'expérience utilisateur à tirer le meilleur parti d'un espace limité pour mettre en avant les éléments importants d'un site web (tels que la navigation du site et les appels à l'action).

Le design réactif intégré de Squarespace redimensionne automatiquement les cases et les images de contenu afin qu'elles s'adaptent à différentes tailles d'écran.

Un design pensé pour les utilisateurs

L'objectif principal du design « mobile first » est de permettre aux personnes qui visitent votre site à l'aide d'un téléphone portable d'accéder aux informations rapidement, facilement et efficacement. La commodité est le mot d'ordre, voici donc ce que vous devez garder à l'esprit lorsque vous concevez votre site :

  • N'incluez que l'essentiel. Construisez votre site autour du contenu qui intéresse réellement les internautes. Éliminez les distractions afin que les utilisateurs mobiles soient facilement dirigés vers les éléments qui les intéressent et les actions que vous souhaitez qu'ils effectuent. Il s'agit d'éviter qu'ils partent avant d'arriver à cette étape parce que votre site est trop chargé.

  • Mettez le contenu en valeur. Les éléments cliquables sont-ils facilement identifiables ? Par exemple, vos boutons d'appel à l'action (CTA) sont-ils en visibles, cohérents et faciles à repérer ? Vos choix d'iconographie, de couleur et de typographie sont-ils lisibles sur les petits écrans ? Le visuel d'un site web doit rendre aussi bien sur un écran mobile de 5.5 pouces que sur un écran d'ordinateur portable de 17.3 pouces.

  • Privilégiez l'agilité. Une vitesse de chargement lente du site web peut avoir un impact négatif sur votre marque ou votre entreprise, car elle augmentera votre taux de rebond (le nombre de personnes qui quittent votre site après avoir visité une seule page) et diminuera le temps moyen passé sur une page. Vous pouvez facilement augmenter la vitesse de chargement sur mobile en compressant vos images, en réduisant vos redirections depuis d'autres sites et en minimisant les liens vers des sites avec des redirections.

Création d'une hiérarchie visuelle du contenu

 

L'ordre d'importance de chaque élément de contenu doit être évident sur un site web conçu en priorité pour les appareils mobiles. En un coup d'œil, les utilisateurs mobiles doivent savoir où regarder et sur quoi cliquer. Vous pouvez planifier à l'avance la façon dont les utilisateurs liront, idéalement, votre site.

 

Commencez par dresser un inventaire du contenu : il s'agit d'une feuille de calcul contenant tous les éléments que vous souhaitez intégrer à votre site web. Établissez ensuite une liste de priorités. Que voulez-vous que vos clients voient en premier, et que ne doivent-ils pas manquer ?  

 

Votre logo, par exemple, doit être la première chose que l'utilisateur voit, car il contribue à la reconnaissance de la marque. Il peut apparaître en haut de chaque page, immédiatement suivi des titres de ces pages. Assurez-vous que les boutons d'appel à l'action sont également une priorité dans la hiérarchie visuelle du contenu de votre site web.

 

Ne développez la maquette de votre site qu'une fois que vous avez défini cette hiérarchie visuelle. Cela vous évitera de devoir apporter des modifications structurelles importantes pendant la phase de test.

 

Améliorer votre classement sur les pages de résultats des moteurs de recherche

 

Dans la plupart des cas, les plus grands moteurs de recherche du monde étudient d'abord les versions mobiles des sites Web (c.-à-d. avant les versions de bureau) lors de leur classement. Il est donc essentiel de veiller à ce que votre site mobile fonctionne aussi bien, voire mieux, que votre interface de bureau pour améliorer votre classement dans les pages de résultats des moteurs de recherche (SERP).

 

Bien que les conversions continuent d'avoir lieu plus souvent sur ordinateur que sur mobile, la majorité de la notoriété et de l'engagement envers la marque se fait sur les appareils mobiles. Cela est dû au fait que les gens recherchent des produits sur leur téléphone et les achètent ensuite depuis leur ordinateur de bureau, une fois de retour chez eux ou au travail.

 

Il faut donc limiter au maximum les fenêtres pop-up, rendre le contenu lisible et facile à trouver, et donner la priorité aux informations essentielles. Cela contribuera à renforcer votre référencement au-delà d'un simple contenu bien produit et riche en mots clés, en veillant à ce que le plus grand nombre possible de clients potentiels voient votre site web.

Vous développez encore votre site web ? Découvrez comment concevoir une page de destination.

Articles associés

  1. Apprendre

    Créer une expérience utilisateur et des appels à l'action efficaces

    Créer une expérience utilisateur et des appels à l'action efficaces

  2. Apprendre

    Comment créer des pages de destination

    Comment créer des pages de destination

S’abonner

Abonnez-vous et recevez les derniers billets de blog « Réussir » ainsi que des actualités, des promotions et des partenariats de la part de Squarespace.

L’adresse e-mail saisie n’est pas valide.

Nous vous remercions de vous être abonné(e).