Ce n’est pas la taille qui compte. Petit ou grand écran, votre site doit être irréprochable. Et ce pour une bonne raison : l’usage d’Internet sur mobile continue de croître.
Avoir une version mobile performante est donc essentiel lorsque vous créez un site internet. Non seulement cela permet d’améliorer l’expérience de vos utilisateurs, mais c’est aussi un moyen de remonter dans le classement Google depuis que l’index Mobile-First a été mis en place. Pour un web design digne de ce nom découvrez notre guide complet sur le web design et lancez-vous dans la création de votre site internet
Pour vous aider à optimiser votre web design sur mobile, découvrez les meilleurs générateurs d'image IA puis, inspirez-vous de notre liste de 15 sites créés avec Wix. Ils sont tous premiers de la classe et utilisent les meilleures pratiques du secteur. Nous décryptons chaque fonctionnalité pour vous permettre de les appliquer sans difficulté à votre propre site.
Les meilleurs exemples de design mobile
01. S&W Beauty
Ce site fait partie d’un projet plus grand réalisé par Stefan Sagmeister et Jessica Walsh : Beauty. Il inclut une exposition et un livre, le tout célébrant l’esthétisme de façon générale. On peut dire que le message est passé grâce au visuel hypnotisant qui apparaît dès le chargement de la page.
S&W Beauty utilise un langage visuel cohérent : du noir, du blanc et des ornements en mouvement. Cependant, la version mobile diffère légèrement de celle sur ordinateur. Premièrement, les animations de la page d’accueil sont supprimées pour plus de clarté. De plus, le menu dispatché laisse place à un menu hamburger qui affiche les différentes sections sur l’intégralité de l’écran. Ces changements sont subtiles et ils permettent de garder l’identité du site tout en adaptant sa navigation pour les mobinautes. On n’en attendait pas moins de ces designers de renom.
02. Charcoal
Charcoal est une revue d’art en ligne. Elle utilise une palette de couleurs automnale et présente son contenu sur mobile à l’aide de bandes. Chacune d’entre elles contient un élément visuel ou un paragraphe de texte. Ainsi, les utilisateurs peuvent faire défiler la page sans qu’aucun contenu ne se chevauche. Une fois arrivé en bas, une flèche s’affiche sur la droite pour vous permettre de revenir à tout moment au début du site.
Pour faciliter la navigation, on retrouve ici aussi un menu hamburger. Contrairement à notre exemple précédent, celui-ci s’affiche sur la partie droite du site uniquement. Ainsi, vous pouvez voir la page sur laquelle vous vous trouvez, ce qui est très judicieux au regard de la multiplicité de contenu du site.
03. Piboco
Picobo est une application de livres numériques pour enfants. La version mobile s’ouvre sur une animation qui permet à l’utilisateur de patienter le temps du chargement de la page. Cette introduction est en parfaite adéquation avec le thème du site et son identité visuelle. On retrouve d’ailleurs ces personnages animés dans la section “Collection” du site.
Pour rester dans le thème, un point jaune est présent en bas de toutes les pages et vous donne accès en un clic aux informations de contact, au téléchargement de l’application et aux chaînes de réseaux sociaux. Voilà une bonne idée pour faire gagner de précieuses minutes à vos visiteurs.
04. AutoFleet
Le site mobile d’AutoFleet est riche en contenu. On retrouve à la suite des images vectorielles animées, un diaporama et des blocs de texte mettant en avant les fonctionnalités du produit. Malgré la complexité et la diversité des éléments, AutoFleet simplifie la navigation sur smartphone grâce à l’utilisation de bandes. C’est définitivement votre meilleur allié pour organiser votre contenu.
Le bouton d’appel à l’action sur la partie supérieure du site se démarque grâce à son dégradé de bleu et de vert fluo. Il va à l’essentiel et nous incite à rentrer nos coordonnées pour recevoir plus d’informations et pourquoi pas réaliser une vente.
05. SomiSomi
Ce site de restaurant spécialisé dans les desserts coréens affiche fièrement son image de marque. En effet, il présente son logo en grand et sur la partie supérieure du site. Simple design ? Que Nenni. Le logo vous permet de revenir à la page d’accueil à tout moment en un simple clic. C’est une pratique répandue sur le web. Si elle est utile sur la version ordinateur d’un site, elle est essentielle à l’expérience de navigation sur mobile.
On note aussi la présence d’icônes au milieu de la page pour expliquer le concept. Puisque vous n’avez pas beaucoup de place pour ajouter des paragraphes de texte sur un site mobile, les visuels sont une excellente façon de faire passer efficacement un message.
Enfin, profitant de desserts très “Instagramables” (on parle tout de même de crème glacée mauve dans un cône en forme de poisson), Somi Somi s’est assuré que son flux d’actualité soit intégré à sa page web. On met +1 pour les réseaux sociaux !
Les badges des prix reçus, un lien pour voir le film sur YouTube et la liste des projections organisées : ce site a tout pour promouvoir un film efficacement.Sans parler de Wix Event qui vous permet de vous inscrire à l’une des séances.
Avez-vous remarqué l’aperçu de la bande d’annonce qui s’affiche sur la pleine largeur de l’écran en utilisant une boîte vidéo ? Vous n’avez qu’à cliquer sur le bouton “Lecture” pour voir ce qui vous attend sur la toile - la vraie cette fois-ci.
07. Sophie Brittain
Sophie est spécialisée en design UI/UX. Elle a donc forcément beaucoup de choses à nous apprendre. Elle sort des codes en nous accueillant sur son site avec un texte et non un visuel. Pourtant, elle capte facilement notre attention avec des couleurs et des animations amusantes sur un fond blanc épuré.
Sur le reste de son site, cette pro fait aussi dans la subtilité. Elle choisit un design très minimaliste pour faire ressortir des textes amusants : elle remplace l’icône LinkedIn par “Me being a pro” (moi, en tant que pro) et son numéro de téléphone par “You, calling me maybe” (on vous laisser fredonner la chanson).
08. Sparx
Voilà un site qui excelle dans l’art du storytelling. Avant de comprendre ce que fait Sparx, vous devez passer par une liste d’étapes vous expliquant la situation actuelle dans le secteur de l’enseignement (chiffres à l’appui). C’est seulement ensuite que l’entreprise vous apporte sa solution. Les visuels et les animations participent activement à nous plonger dans un monde à part.
Sur la version mobile de ce site fascinant, l’esprit est gardé, mais l’ensemble du contenu est réduit. On passe de 10 pièces de monnaie à une seule et de 10 éléments en mouvement à 1 seul. Sparx a trouvé une façon intelligente de faire passer le même message sur les deux supports.
09. Atelier / Blanc
Le wedding planner et designer Romain Deligny nous offre un site sobre et distingué. Il utilise des couleurs chaudes et une police de caractères classique. Le tout est simplifié sur mobile pour proposer une navigation agréable aux utilisateurs.
Astuce : Consultez notre guide pour identifier une police dans une image.
Le menu horizontal se transforme en menu hamburger, les colonnes deviennent des bandes et même le flux instagram intégré a droit à une légère retouche : le diaporama est de mise pour rendre le contenu plus lisible. On appelle cela l’élégance à la française.
10. Hollie Fuller
Hollie Fuller fait fureur (sans mauvais jeu de mot) sur le web avec ses illustrations. Elle utilise la Wix Pro Gallery pour créer un portfolio qui s’adapte automatiquement sur petit écran. Ainsi, la grille de visuels devient une liste à faire défiler. De cette façon, vous pouvez profiter de chaque image pleinement.
Sur la page “À propos”, l’artiste ajoute une photo d’elle suivie d’une brève description ainsi que des magazines dans lesquels elle figure. Présenter l’humain derrière l’écran est un bon moyen de gagner en crédibilité et de travailler son personal branding.
11. Noni Ceramica
En provenance du Brésil, Noni Ceramica est un commerce familial spécialisé dans la céramique. Sur son site, on découvre ses tasses et carafes en faisant défiler la page au rythme des effets parallaxe nous donnant un sentiment de 3D.
Le menu hamburger en haut à gauche est revisité pour correspondre aux formes géométriques et épurées caractéristiques de la marque. Dans le même style, on retrouve le logo qui mène vers la page d’accueil et le bouton d’appel à l’action qui nous incite à visiter l’e-shop. Noni Ceramica a tout misé sur le minimalisme et l’efficacité.
Cette association à but non lucratif présente sa mission de sauver les océans avec un site à la fois simple et complet. Les sections sont divisées en bandes et répondent à des questions basiques telles que “Qui sommes nous”, “Ce que nous faisons” et “Comment devenir membre”. Il suffit de cliquer sur l’un des liens pour découvrir un puit d’informations : des chiffres, des projets et même un blog.
Pour la version mobile, Ocean Data Alliance a trié sur le volet les informations à afficher. Ce site étant très riche en contenu, il est important de ne pas perdre le visiteur. En utilisant des icônes, des textes simples et en organisant correctement tous les éléments, cette association parvient à nous transmettre l’essentiel : préserver notre planète.
13. Michelle Carlos
Nous changeons d’univers avec cette artiste d’Afrique du Sud. Michelle Carlos nous accueille sur son site avec un logo et une jolie illustration. Cette page nous met directement dans l’ambiance et nous donne un aperçu de ce qui nous attend.
En plus de présenter ses dessins, peintures et designs, Michelle a créé un blog pour s’exprimer. Elle y partage ses astuces Photoshop et ses conseils d’artiste. Enfin, elle utilise le même logo pour maintenir une image cohérente sur l’intégralité de son portfolio. Chapeau l’artiste.
14. Sunny
Le site de Sunny est parfaitement en accord avec les dernières tendances de web design. L’image XXL de tournesol associée au logo fait le plus grand effet. Les visuels sont joyeux et les couleurs lumineuses. C’est tout ce que l’on attend pour cette fin d’hiver.
L'en-tête s’estompe dès l’instant où le visiteur fait défiler le site. C’est une fonctionnalité que vous pouvez mettre en place dans les paramètres de défilement de l’entête. Cela permet une expérience plus immersive. Pour autant, le logo et le menu restent figés pour permettre au visiteur de changer de page ou de revenir à l'accueil à tout moment.
Cette agence design a tout misé sur les visuels. L’énoncé de mission s’affiche en haut du site, puis il laisse place au portfolio de projets. Chaque image s'accompagne d’un effet de survol : il suffit de poser son doigt pour découvrir le nom du projet et de cliquer dessus pour en savoir plus. De cette façon, vous ne surchargez pas vos pages tout en permettant aux visiteurs d’accéder à l’ensemble des informations.
Nos conseils pour créer un site mobile irréprochable
Vous l’aurez compris, votre site mobile est plus qu’une version compressée de vos pages sur ordinateur. Il y a des ajustements à faire pour obtenir un design clair et une navigation qui va droit au but.
Si vous créez votre site avec Wix, il s’accompagne automatiquement d’une version pour smartphones. Les visuels, les polices et les titres sont faits pour s’adapter à la taille de l’écran. Cependant, c’est à vous d’optimiser votre contenu pour obtenir le design idéal.
Voici quelques conseils pour vous aider :
Réduire les éléments : on ne vous apprend rien en vous disant que les espaces sont plus petits sur mobile. Voilà pourquoi vous ne pouvez pas y intégrer l’ensemble de vos images et de vos textes. Vous allez devoir choisir et nous vous suggérons vivement de ne garder que l’essentiel et de cacher le reste des éléments.
Utiliser des boutons d’appel à l’action : sur mobile, votre doigt fait office de souris et de clavier. Pour s’y retrouver, les boutons doivent être assez gros et se démarquer du reste du contenu. De plus, pensez à les placer à des endroits stratégiques pour inciter au clic.
Utiliser un bouton “Retour en haut de la page” : généralement, les pages mobiles sont plus longues car le contenu se place à la verticale. Voilà pourquoi un bouton “Retour en haut de la page” facilitera grandement la vie des mobinautes.
Lier le logo à votre page d’accueil : cette bonne pratique s’applique aussi sur mobile. Elle permet aux visiteurs de retrouver la page d’accueil en un clic, quel que soit l’endroit où ils se trouvent sur votre site.
Repenser le menu : quand bien même vous optez pour un menu classique horizontal sur ordinateur, votre menu mobile, lui, doit être adapté aux petits appareils. Sur tous les sites présentés plus haut, on retrouve un menu hamburger. Il s’agit d’une icône composée de 3 barres horizontales qui s’ouvrent sur un menu plus détaillé lorsque l’on clique dessus. Une autre option est la barre d’action rapide, elle rend les sections les plus importantes de votre site à portée de doigts.
Utiliser les fonctionnalités mobiles : on pense notamment à l’écran de bienvenue, aux animations sur mobile ou à la personnalisation du menu. Wix met à votre disposition tout ce qu’il faut pour créer le plus beau des sites mobiles.
