21 des meilleurs exemples de conception de sites Web mobiles

Aujourd'hui plus que jamais, les entreprises se concentrent sur la création d'expériences de sites Web mobiles agréables.

Google favorise fortement les sites Web adaptés aux mobiles depuis 2015, date à laquelle il a mis à jour son algorithme de classement, puis a commencé indexation des sites mobiles en mars 2018, et a indexation mobile first depuis 2019. Ceci est crucial, car il y a eu plus de requêtes de recherche sur les appareils mobiles que sur les ordinateurs de bureau depuis plusieurs années maintenant.

À l'avenir, Google ne fera que relever la barre de ce qu'il considère comme adapté aux mobiles (y compris le temps de chargement de la page) dans ses mises à jour d'algorithme. Donc, si vous ne vous êtes pas concentré sur améliorer votre expérience mobile, vous devriez commencer maintenant ou voir votre classement de recherche chuter.

Pour vous aider à inspirer tous les changements que vous apporterez à la conception de sites Web mobiles, voici une liste de 21 entreprises qui ont vraiment réussi leur expérience Web mobile.

1. Shutterfly

Pourquoi ça marche: Le site Web mobile de Shutterfly est facilement navigable, très visuel et intuitif pour les nouveaux visiteurs et les clients expérimentés.

Shutterfly est un service en ligne qui permet aux utilisateurs de créer des livres photo, des cartes personnalisées, de la papeterie et d'autres produits similaires. Parce que de plus en plus de personnes prennent des photos et y accèdent ensuite à l'aide de leurs smartphones, Shutterfly a reconnu la nécessité de créer une expérience mobile exceptionnelle pour ses clients.

Shutterfly atteint deux objectifs clés sur son site Web mobile. Premièrement, il est facile pour les utilisateurs de trouver des informations sur leurs offres. Deuxièmement, ces informations sont complétées par de belles images.

Lorsque vous arrivez sur le site mobile, vous verrez la dernière promotion de Shutterfly à l'avant et au centre ainsi qu'un menu de navigation supérieur de la taille d'un doigt, qui ne dominent pas l'expérience utilisateur.

conception de sites Web mobiles : page d'accueil de shutterfly

Faites défiler vers le bas et vous verrez de gros boutons qui permettent aux utilisateurs de sélectionner facilement le type de produit qui les intéresse. Une fois que les utilisateurs ont cliqué sur l'une de ces options, ils sont accueillis avec de grandes photos montrant ce que Shutterfly est capable de pour une navigation facile.

mobile-website-design-emobile website design: listings de produits Shutterflyxamples-shutterfly-2

2. Google Maps

Pourquoi ça marche: Le site Web mobile pour Google Maps apporte les mêmes fonctionnalités, visuels et performances que son homologue d'application mobile.

Tout le monde a sa carte ou son application d'itinéraire préférée. Le mien est Google Maps, que j'utilise que je marche, que je conduise, que je fasse du vélo ou que je prenne les transports en commun. La particularité de son site Web mobile est qu'il est pratiquement impossible à distinguer de leur application mobile téléchargeable.

conception de site Web mobile : résultat de recherche de carte google

Ces captures d'écran ci-dessous sont prises de leur site Web mobile, mais si vous êtes familier avec l'application, vous remarquerez qu'elles ont l'air exactement le même. Non seulement l'apparence est identique, mais le site Web mobile a la vitesse et les fonctionnalités de l'application.

conception de site Web mobile: page de description de l'emplacement de la carte google

3. Forme d'impression

Pourquoi ça marche: Le formulaire de type simplifie leur site Web mobile pour améliorer les temps de chargement et offrir une expérience utilisateur plus simple.

Typeform est une entreprise technologique basée à Barcelone avec une mission simple : « rendre les formulaires géniaux ». Leur site Web de bureau est magnifiquement conçu, accueillant les visiteurs avec une copie succincte, des animations pertinentes et d'autres composants de conception complexes.

Mais pour les utilisateurs mobiles, Typeform a reconnu que cette conception complexe pourrait affecter considérablement le temps de chargement de la page, entre autres difficultés. C'est pourquoi ils ont en fait supprimé bon nombre d'entre eux, désencombrant le site et simplifiant l'expérience mobile globale. Le site mobile est une version plus simple du site Web de bureau, et il est toujours magnifiquement conçu.

conception de sites Web mobiles : page d'accueil de typeform

Prenez note des gros boutons sur leur page de menu - parfaits pour taper avec votre doigt sur un écran mobile.

conception de site Web mobile: page de description du produit typeform

4. Etsy

Pourquoi ça marche: Ce site mobile pousse ses fonctionnalités les plus importantes - recherche de site, catégories d'articles et produits tendance - sur la page d'accueil tout en évitant l'encombrement.

Etsy est un site de commerce électronique où les gens peuvent acheter et vendre des articles vintage ou faits à la main. La plupart des acheteurs qui visitent le site Web d'Etsy sont là pour faire l'une des deux choses suivantes : soit ils recherchent un article spécifique, soit ils parcourent les articles dans les catégories qui les intéressent.

Le site Web mobile s'adresse dès le début aux deux types de visiteurs. Lorsque vous accédez pour la première fois à leur site Web mobile, vous êtes accueilli avec une option pour rechercher des articles, des magasins ou des catégories spécifiques.

conception de sites Web mobiles: page d'accueil etsy

Ci-dessous se trouvent des images miniatures d'articles tendance qui présentent certaines des choses les plus populaires que vous pouvez acheter sur Etsy. Les utilisateurs mobiles peuvent afficher ces éléments tendance dans un format de collage, et les images sont suffisamment grandes pour être facilement tapées avec le doigt.

conception de sites Web mobiles: page d'accueil des articles populaires etsy

5. Adrien Zumbrunnen

Pourquoi ça marche: Adrian Zumbrunnen adopte une approche unique du site Web personnel, créant une expérience entièrement adaptée aux utilisateurs mobiles.

Il s'agit du site Web personnel d'Adrian Zumbrunnen, concepteur, écrivain et conférencier UX. Lorsque vous visitez son site Web, vous remarquerez tout de suite qu'il a quelque chose de très unique : c'est un de la conversation en ligne.

Cela ressemble presque à une conversation par SMS que vous auriez normalement sur votre téléphone, y compris les points de suspension pour montrer qu'il « tape ». Les utilisateurs disposent de deux options de réponse à la fin de chaque échange, ce qui s'apparente à une expérience « choisissez votre propre aventure ».

Bien que les expériences mobiles et de bureau soient similaires, le site Web de bureau semble avoir été conçu principalement pour le mobile, ce qui pourrait être la direction que prendront les sites à l'avenir.

conception de sites Web mobiles : page d'accueil de sites Web personnels

Et si vous préférez ne pas vous engager dans un échange semblable à une conversation, vous pouvez simplement faire défiler vers le bas pour plus de détails.

conception de site Web mobile: page de contact de site Web personnel

6. Elfe sur le plateau

Pourquoi ça marche: Le site mobile Elf on the Shelf rend sa large sélection de produits visible dès le départ et utilise des affichages de produits émotionnels et très visuels pour séduire les visiteurs.

Elf on the Shelf est, relativement parlant, une tradition de Noël relativement nouvelle basée sur un livre pour enfants. Si vous n'êtes pas familier, le principe de base est le suivant : le livre raconte l'histoire des elfes éclaireurs du Père Noël, qui sont envoyés par le Père Noël pour surveiller les enfants dans leurs maisons partout dans le monde et faire rapport au Père Noël.

Les parents peuvent acheter une figurine d'elfe, qu'ils placeront subtilement quelque part dans leur maison où leurs enfants pourront la voir. Chaque nuit avant Noël, les parents déplacent l'elfe à un endroit différent autour de leur maison pour « prouver » que les elfes scouts sont réels et qu'ils les surveillent toujours.

Lorsque vous arrivez sur le site Web d'Elf sur le plateau, vous verrez qu'il existe en fait de nombreux produits que vous pouvez acheter. Mais au lieu de forcer les utilisateurs à faire défiler chaque produit individuellement, les concepteurs Web emballent chaque produit dans une grande tuile attrayante décrivant l'objectif du parcours de chaque acheteur, avec l'article en vedette affiché sur le devant.

Vous n'achetez pas votre propre elfe ou chiot, vous l'adoption ce. C'est une expérience vraiment stimulante sur un si petit écran.

conception de sites Web mobiles : page d'accueil d'elfe sur l'étagère

7. BuzzFeed

Pourquoi ça marche: BuzzFeed s'adresse à ses utilisateurs mobiles avec un site Web qui les oriente vers leurs sujets d'intérêt.

BuzzFeed est connu pour son contenu viral et ses quiz populaires. Il se trouve également que c'est l'une de mes sources de divertissement préférées pendant mes trajets domicile-travail.

Et où pensez-vous que je consulte BuzzFeed pendant mon trajet ? Vous l'avez deviné : mon téléphone. BuzzFeed sait qu'un grand nombre de ses visiteurs visitent son site sur mobile, c'est pourquoi ils ont pris grand soin de créer une expérience fluide pour leurs lecteurs en déplacement.

Lorsque vous arrivez sur le site Web mobile de BuzzFeed, la première chose que vous verrez est certains de leurs contenus les plus populaires affichés dans un format simple de type collage utilisant de grandes images faciles à exploiter.

conception de sites Web mobiles : page d'accueil buzzfeed

Pour les utilisateurs intéressés par des catégories spécifiques, un menu en haut de l'écran répertorie toutes les catégories de publications. Chaque catégorie a sa propre page de répertoire avec des filtres cliquables en haut.

conception de sites Web mobiles : page de films et de médias buzzfeed

8. Evernote

Pourquoi ça marche: Avec un chemin de conversion clair et une conception épurée transférée depuis le bureau, le site mobile d'Evernote indique clairement ce qu'il fait et comment vous pouvez vous inscrire.

Evernote est une application qui vous permet de stocker des notes, des images et des articles Web, puis d'y accéder sur tous vos appareils. Étant donné que les utilisateurs ont tendance à télécharger l'application ou à accéder au site Web sur plusieurs appareils, notamment des ordinateurs de bureau, des smartphones et des tablettes, il est essentiel qu'Evernote offre une bonne expérience mobile.

Si vous regardez la page d'accueil d'Evernote sur votre ordinateur de bureau, vous remarquerez à quel point le design est propre. Les déclarations de valeur sont courtes et précises, et les graphiques ajoutent au positionnement de la marque mais n'encombrent pas la page.

conception de sites Web mobiles : page d'accueil de bureau evernote

Lorsque vous regardez le site Web mobile d'Evernote, vous pouvez voir qu'ils ont conservé leur palette de couleurs et le style général de la marque entièrement intacts. Le site Web mobile de l'entreprise est propre, simple et ne diminue en rien la valeur de l'application. Le chemin de conversion d'Evernote est évident à partir de l'appel à l'action centré : « Inscrivez-vous gratuitement ».

conception de sites Web mobiles : page d'accueil mobile evernote

9. Pixelgrade

Pourquoi ça marche: Les thèmes WordPress de Pixelgrade sont adaptés aux mobiles, minimaux et élégants. Plus précisément, le thème Pile est parfait pour les sites Web de portefeuille WordPress.

Pixelgrade Thème de la pile vous permet de présenter correctement vos services et vos travaux antérieurs et ne sacrifie pas la conception mobile. Le thème est optimisé pour les appareils mobiles tout en diffusant le message et l'esthétique de votre contenu en même temps.

conception de sites Web mobiles : page d'accueil pixelgrade

10. Huffington Post

Pourquoi ça marche: La publication bien connue condense son contenu pour mieux s'adapter aux dimensions de l'écran mobile et servir les lecteurs en déplacement.

Le Huffington Post est un média qui rapporte tout, de la politique et des événements actuels au divertissement et à la technologie. Ce qui rend leur site Web mobile unique, c'est qu'ils modifient légèrement leurs titres pour les utilisateurs mobiles afin que leur contenu soit plus facilement numérisable.

Si vous comparez les sites Web de bureau aux sites mobiles, vous remarquerez que le site Web mobile contient moins de mots sur la page d'accueil. Les titres sont plus courts et beaucoup plus digestes - parfaits pour quelqu'un qui survole ou lit sur un petit écran.

conception de sites Web mobiles : page d'accueil mobile de huffington post

Il existe également un menu cliquable dans le coin supérieur gauche de l'écran répertoriant toutes les catégories de publications.

conception de sites Web mobiles: menu mobile huffington post

11. Express

Pourquoi ça marche: Express utilise intelligemment les images pour créer une expérience de visualisation des produits plus réaliste - les utilisateurs glissent simplement pour voir les produits sous différents angles avant de s'engager dans un achat.

Express est un magasin de vêtements qui s'adresse aux jeunes hommes et femmes. Parce que leur public vient souvent sur leur site Web pour parcourir des vêtements, il est important que leur site Web inclue de grandes images claires de leurs vêtements, en particulier sur les appareils mobiles, lorsque les utilisateurs devront appuyer sur les éléments à l'écran avec leurs doigts pour cliquer dessus pour l'achat. informations.

Express pousse son expérience mobile un peu plus loin que la plupart des sites de vente au détail en ligne. Si vous faites glisser votre doigt de gauche à droite sur une image montrant un vêtement, l'image changera pour que vous puissiez voir le vêtement sous un autre angle. En d'autres termes, les utilisateurs n'ont pas besoin de charger une autre page pour voir plusieurs photos du même vêtement.

Regardez l'image en haut à droite dans les deux images suivantes pour voir comment elle change lorsque vous balayez d'un côté :

conception de sites Web mobiles : page d'accueil express

conception de sites Web mobiles : page d'accueil express avec une autre image en vedette

12. Nationwide Insurance

Pourquoi ça marche: Ce site mobile dessert deux types de clientèle différents et divise son site Web mobile en conséquence. Que vous soyez un particulier ou un client, il est clair où vous devez aller.

Nationwide Insurance fournit des services d'assurance et financiers. Vous pourriez penser qu'une société financière aurait un site Web compliqué, mais sur mobile, Nationwide Insurance cloue l'expérience utilisateur simple.

Lorsque vous arrivez sur le site mobile de Nationwide, vous verrez deux onglets en haut vous permettant de vous identifier immédiatement comme l'un des deux types d'utilisateurs pour personnaliser votre expérience : personnel ou professionnel. Ou, alternativement, vous pouvez « Trouver un agent » ou « Trouver un conseiller financier » pour en savoir plus sur leurs services.

Bien que limiter l'expérience à ces deux options exclue les fonctionnalités plus approfondies de Nationwide, cela rend l'expérience beaucoup plus facile pour les visiteurs utilisant de petits écrans. C'est une excellente technique pour orienter les clients potentiels dans la bonne direction s'ils ne sont pas encore titulaires de compte et visitent le site Web pour la première fois.

conception de sites Web mobiles : page d'accueil nationale

13. Carré

Pourquoi ça marche: Ce site mobile cloue la palette de couleurs, les choix de polices et les éléments interactifs sur la page d'accueil. C'est simple, engageant et ludique.

Carré est une agence basée à Dublin, en Irlande, qui aide les spécialistes du marketing à élaborer leurs stratégies de marketing entrant. Leur site Web mobile est coloré, simple et facilite la navigation.

Ce qui me frappe le plus, ce sont les combinaisons de couleurs visuellement agréables ainsi que le grand menu cliquable qui se développe pour révéler chacun des services de l'organisation.

conception de sites Web mobiles : page d'accueil squaredot

Plus bas sur la page, il y a des régions entièrement balayables. Celui illustré ci-dessous présente les réussites des clients et ajoute une autre dimension au site mobile.

conception de sites Web mobiles: page d'histoires de clients squaredot

14. Zappos

Pourquoi ça marche: Le site Web mobile de Zappos est très facilement consultable, ce qui est essentiel compte tenu de son énorme inventaire. Les dernières offres sont également claires lors du chargement de la première page.

Zappos est un vendeur en ligne de chaussures et de vêtements connu pour son excellent service client. Leur priorité absolue sur mobile est d'aider les utilisateurs à rechercher facilement les éléments qu'ils recherchent sur leur site Web. Ils ont donc placé une grande barre de recherche en haut et en bas de leur site Web mobile pour leur faciliter la tâche.

Voici à quoi ressemble le haut de leur site mobile :

conception de sites Web mobiles : page d'accueil de zappos

15. abc

Pourquoi ça marche: Le thème sombre de ce site mobile contraste avec de nombreux autres sites mobiles populaires, apportant une sensation de théâtre à l'expérience. Les pages hautement navigables aident les téléspectateurs à trouver le contenu de leur choix ou simplement à naviguer.

ABC est une société de radiodiffusion télévisuelle connue pour ses émissions populaires telles que The Bachelorette, The Rookieet Hôpital général. Les utilisateurs qui visitent le site Web de bureau d'ABC sont accueillis avec ces options et plus encore. Consultez le programme télévisé du réseau, découvrez les derniers gagnants des Emmy Awards, regardez certaines de vos émissions de télévision préférées ou même regardez les actualités de divertissement relatives à ces émissions.

Mais comme presque chaque foyer est aujourd'hui un foyer multi-écrans, ABC sait que son expérience sur un appareil mobile doit être à la fois simple et prête à être visionnée.

Lorsque vous visitez le site Web d'ABC sur un appareil mobile, vous verrez un arrière-plan sombre pour une expérience de théâtre avec des vignettes pour chaque programme que vous souhaitez diffuser. Les utilisateurs peuvent parcourir ces options et cliquer sur n'importe quelle émission qu'ils souhaitent en fonction du genre, de l'ordre alphabétique, de ce qui est populaire et de catégories similaires que vous trouverez également sur la plate-forme de diffusion en continu de votre téléviseur.

conception de sites Web mobiles : page d'accueil abc

16. Laboratoires Lean

Pourquoi ça marche: Lean Labs utilise des animations volantes et des sections de contenu distinctes pour raconter une histoire au fur et à mesure que les utilisateurs font défiler vers le bas.

Lean Labs est une agence de marketing qui crée des solutions Web attrayantes, réactives et à forte conversion. (Ils étaient aussi en vedette dans la série télévisée à succès Shark Tank.) Les gens là-bas font un excellent travail pour offrir une expérience fluide aux utilisateurs mobiles, en particulier en ce qui concerne leurs techniques de conception.

Remarquez comment le site Web mobile de Lean Labs utilise l'échelle, le contraste et la police de caractères pour distinguer certains éléments de leur page. Il intègre même des animations de vol pour ses images afin d'améliorer l'expérience de défilement.

conception de sites Web mobiles : page d'accueil lean labs

17. SAP

Pourquoi ça marche: Malgré sa pléthore d'offres, SAP règne en maître sur son site Web mobile et simplifie ses CTA et ses menus.

SAP est une société de logiciels d'entreprise qui gère les opérations commerciales et les relations clients. L'entreprise améliore son expérience mobile en condensant les informations et en combinant certains de ses appels à l'action dans des curseurs, tandis que son site Web de bureau présente ces CTA horizontalement.

conception de sites Web mobiles : page d'accueil sap

Cela permet de garder les choses simples afin que les utilisateurs mobiles ne soient pas submergés par beaucoup d'informations à la fois, et cela garantit également qu'aucun des CTA n'est trop petit pour être lu.

18. KISSmetrics

Pourquoi ça marche: KISSmetrics utilise la couleur pour séparer les sections de contenu les unes des autres et pour créer des CTA proéminents qui ressortent, même sur des écrans mobiles plus petits.

KISSmetrics fournit un logiciel d'analyse pour les entreprises. Sur leur page d'accueil, il y a beaucoup d'informations expliquant ce que fait le logiciel ainsi qu'un témoignage.

Mais leur site mobile s'affiche un peu différemment : sur un appareil mobile, les informations sur leur site sont affichées dans une liste avec des modules alternatifs sombres et clairs. Cela permet aux utilisateurs de parcourir facilement la page sans se perdre dans le texte.

conception de sites Web mobiles : page d'accueil de kissmetrics

Ils ont également rendu le texte et les champs de leurs formulaires grands et faciles à lire :

conception de sites Web mobiles : formulaire de contact kissmetrics

19. Idig Marketing

Pourquoi ça marche: idig donne la priorité à l'accessibilité sur son site Web, en présentant un menu d'accessibilité collant où les utilisateurs peuvent ajuster diverses options d'affichage.

idig Marketing est un prestataire de développement et de communication. Leur site Web mobile est présenté de la même manière que leur site Web de bureau, mais j'ai particulièrement aimé le menu d'options d'accessibilité facilement disponible sur le côté droit de l'écran.

conception de sites Web mobiles : page d'accueil marketing d'idig

Appuyez sur cette icône bleue pour afficher un menu dans lequel les utilisateurs peuvent ajuster des paramètres tels que des visuels améliorés.

conception de sites Web mobiles : menu d'accessibilité

20. IndeMART

Pourquoi ça marche: Le site Web mobile de cette entreprise est à la fois facilement consultable et consultable, en fonction de ce que les visiteurs cherchent à faire sur le site. Il affiche également les articles tendance en évidence.

IndiaMART est le plus grand marché B2B en ligne en Inde, et sa simple boutique mobile basée sur des catégories en fait l'un des meilleurs sites Web mobiles que nous ayons jamais vus dans l'industrie du commerce électronique.

La page d'accueil mobile de l'entreprise place la barre de recherche tout en haut afin que vous puissiez toujours revenir à une recherche personnalisée si la navigation ne suffit plus pour trouver l'article que vous recherchez.

Mais, IndiaMART facilite la lecture de ses allées numériques en triant chaque article par type d'article, puis sous-types au sein de chaque type d'élément - un mouvement de conception intelligent pour encourager les utilisateurs à explorer davantage votre site. Sous « Vêtements et vêtements », par exemple, vous avez des vignettes facilement cliquables pour consulter des catégories de vêtements plus spécifiques, telles que les vêtements pour hommes, les robes pour femmes et même les costumes, les saris et autres vêtements similaires originaires d'Inde.

conception de sites Web mobiles : page d'accueil d'indiamart

Sous les tuiles de navigation d'IndiaMART, la société a son propre section tendance spécifiquement pour les marchandises auxquelles les gens prêtent le plus d'attention - semblable à une liste d'actualités tendance sur une plate-forme de médias sociaux. Chaque catégorie de tendance dispose d'un bouton d'appel à l'action adapté aux mobiles permettant aux utilisateurs d'obtenir des devis pour le produit qui les intéresse.

conception de sites Web mobiles : liste de produits indiamart

21. Pipsnacks

Pourquoi ça marche: Enfin, le site Web mobile pour Pipsnacks ne sacrifie pas ses visuels pour des écrans plus petits. Même sur votre smartphone, vous êtes immergé dans l'image de marque légère de l'entreprise de collations.

Pour clore notre liste, Pipsnacks apporte les couleurs et les textures vibrantes de leur site de bureau à l'écran mobile. Les produits sont répertoriés sous forme de grandes images cliquables qui vous amènent à leurs pages de produits respectives, et le site mobile est amélioré avec des animations minimales mais efficaces qui ajoutent aux expériences sans nuire au temps de chargement.

conception de sites Web mobiles : page d'accueil de pipcorn

Sites Web mobiles pour inspirer le vôtre

De nos jours, avoir un site Web mobile efficace n'est pas seulement un avantage, c'est une nécessité, du moins si vous voulez vous classer dans les résultats de recherche et être trouvé. Si vous négligez votre site mobile, cela pourrait rebuter la moitié de votre audience.

Heureusement, les créateurs de sites Web et les plates-formes d'aujourd'hui permettent à n'importe qui de créer un site à la fois adapté aux ordinateurs de bureau et aux appareils mobiles. Mais ce sont les petits détails que vous ajoutez sur le dessus qui rendront le vôtre vraiment exceptionnel.

Vous voulez plus d'informations sur la façon d'optimiser votre entreprise avec une conception Web mobile créative ? Téléchargez le kit gratuit sur le marketing mobile ci-dessous.

Article original