Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


• • • LIRE 6 minutes

En 2019, 80% des utilisateurs ont utilisé un appareil mobile pour rechercher sur Internet. La façon dont votre site Web est présenté aux utilisateurs mobiles peut affecter ou affecter votre marque.

Avec le nombre d’utilisateurs qui en dépendent appareils mobilesC’est une évidence pour les développeurs de se précipiter pour trouver le Saint Graal des solutions de conception Web mobile.

Dans cet article, nous allons examiner les 7 meilleures méthodes de conception de sites Web mobiles et comment vous pouvez les mettre en œuvre dans votre entreprise.

Conception Web réactive vs adaptative

L’une des décisions les plus importantes lors de la conception d’appareils mobiles consiste à choisir une conception réactive ou adaptative. Regardons les principales différences entre les deux.

Conception réactive

La conception réactive s’adapte de manière dynamique à la taille de l’écran de chaque appareil. La mise en page utilise des requêtes multimédias CSS pour redimensionner des aspects d’une page tels que la largeur et la hauteur.

La Spark Box est un excellent exemple de conception réactive:

Générateur de modèles d’e-mails en ligne

Avec Des cartes postales Vous pouvez créer et modifier des modèles d’e-mails en ligne sans aucune connaissance en programmation! Comprend plus de 100 composants pour vous aider à créer des modèles de courrier électronique personnalisés plus rapidement que jamais.

Essayez-le gratuitementAutres produits

Conception Web réactive vs adaptative

Les utilisateurs peuvent parcourir un site Web avec design réactif depuis n’importe quel appareil. La différence est que le contenu d’une page est dynamiquement adapté à la taille de l’écran.

Avantages de la conception réactive

  • Expérience de surf fluide sur tous les appareils
  • Plus facile à mettre en œuvre et plus économique
  • Une seule version d’un site doit être maintenue
  • Google recommande une conception réactive

Inconvénients de la conception réactive

  • Non compatible avec les anciens navigateurs Web
  • Les annonces peuvent ne pas s’afficher correctement
  • Temps de chargement plus lents pour les appareils mobiles
  • Certains éléments peuvent se déplacer vers le bas de la page

Conception adaptative

La conception adaptative est toujours adaptée aux mobiles, mais elle adopte une approche différente. Les dispositions statiques sont affichées pour plusieurs tailles d’écran.

Un concepteur aurait besoin de développer des mises en page pour un site adaptatif pour six largeurs d’écran: 320, 480, 760, 960, 1200 et 1600 pixels.

Amazon utilise une conception adaptative. Voici à quoi ressemble la page d’accueil sur un bureau:

Conception de bureau

Voici à quoi ressemble le site Web sur mobile:

Conception adaptative

Les utilisateurs peuvent toujours naviguer et acheter à partir de n’importe quel appareil qu’ils possèdent. Cependant, les éléments de la page apparaissent différemment.

Avantages de la conception adaptative

  • Expérience de surf optimisée pour les appareils individuels
  • Temps de chargement plus rapides pour tous les appareils
  • Les concepteurs peuvent optimiser la publicité
  • Peut être adapté aux sites Web existants

Inconvénients de la conception adaptative

  • Plus cher et plus laborieux à mettre en œuvre
  • Nécessite une équipe de développement pour la maintenance
  • Des modifications de conception doivent être apportées à toutes les mises en page
  • Il y a toujours de nouvelles tailles d’écran qui sortent

Quel design devriez-vous choisir?

Ça dépend de.

La conception réactive est très flexible et plus facile à entretenir. Les thèmes adaptatifs sont plus difficiles à créer, mais ils vous permettent de mieux contrôler la façon dont les utilisateurs vivent votre site Web sur différents appareils.

Le design que vous choisissez dépend en fin de compte de vous. Cependant, il est important de peser le pour et le contre de chacun avant de prendre une décision.

Importance de la convivialité du site Web

La convivialité du site Web est une mesure de la façon dont les utilisateurs peuvent naviguer sur un site Web. Si les utilisateurs ne peuvent pas facilement réaliser ce qu’ils ont prévu de faire, n’hésitez pas à partir.

Il va sans dire que la facilité d’utilisation est un facteur important pour les utilisateurs mobiles. Suivez ce processus en trois étapes pour améliorer le vôtre Facilité d’utilisation du site et découvrez sur quoi se concentrer:

  • Étape 1: Évaluez chaque élément d’une page et jugez s’il s’inscrit dans le parcours du lecteur.
  • Étape 2: Déterminez si les éléments jouent un rôle secondaire et s’ils peuvent être masqués sous un onglet ou un accordéon.
  • Étape 3: Décidez de ce qu’il faut rechercher pour les visiteurs et placez-le au premier plan (par exemple, un appel à l’action sur une page de destination).

Jetons maintenant un coup d’œil aux meilleures pratiques de conception Web mobile.

Meilleures pratiques de conception Web mobile

1: Comprendre le voyage

Les appareils mobiles n’ont pas la même zone d’écran que les ordinateurs de bureau et les tablettes. Cela signifie que vous devez hiérarchiser les éléments que vous visualisez pour les utilisateurs mobiles.

Commencez par attribuer un Parcours client. Quel est votre public cible et que tente-t-il d’atteindre? Quels sont leurs points faibles et quel est leur objectif final?

En répondant à ces questions, vous pouvez optimiser l’expérience mobile et proposer un contenu pertinent pour votre public.

2: Lâchez le GPS

Les barres de navigation aident les utilisateurs à accéder à la section appropriée d’un site. Ceux-ci sont généralement situés en haut ou sur le côté d’un site où les utilisateurs peuvent les voir clairement.

L’un des défis est la mise en œuvre de barres de navigation pour les appareils mobiles. Des tailles d’écran plus petites signifient qu’une barre de navigation complète prend trop de place.

Utilisez un menu de hamburgers. Ces liens de navigation ouvrent lorsque les utilisateurs les tapent et créent une interface utilisateur beaucoup plus propre.

Voici un exemple de menu de hamburgers dans le coin supérieur droit de notre site Web:

L'importance de la convivialité du site Web

Les menus de hamburgers peuvent être mis en œuvre dans des conceptions réactives et adaptatives. C’est une bonne idée d’organiser votre menu de manière à ce qu’il contienne le moins de liens possible.

Qu’est-ce qu’il est important de garder?

3: Limitation des options

Notre cerveau ne peut contenir qu’une quantité limitée d’informations. Trop d’options peuvent devenir déroutantes et empêcher les utilisateurs de naviguer sur votre site Web.

Lors de la conception pour les utilisateurs mobiles, réduisez au minimum le nombre d’options sur une page. Si votre objectif principal est d’amener les visiteurs à démarrer un essai gratuit, cela devrait être votre objectif principal.

Voici un bon exemple de la façon dont Shopify limite les options sur sa page d’accueil:

Shopify

Il n’y a vraiment qu’une seule action que les visiteurs peuvent entreprendre ici. Pensez à vos principaux objectifs et offrez aux utilisateurs juste assez d’options pour ne pas les submerger.

4: Simplifier

Ne rendez pas la tâche plus difficile aux visiteurs que nécessaire. Si quelque chose ne sert à rien ou n’est pas nécessaire, jetez-le à la poubelle.

Cela s’applique également à tous les formulaires de vos pages. Réduisez vos formulaires et ne demandez que les informations strictement nécessaires. L’exemple de Shopify n’avait qu’une seule forme et vous pouvez parier que c’était par conception.

5: Photos et vidéos

L’ajout d’images à une page est un excellent moyen d’attirer l’attention et d’augmenter l’engagement. Les images doivent être pertinentes pour votre annonce et doivent être de la bonne taille pour les conceptions adaptatives.

Voici un exemple d’image contextuelle sur la nôtre Des cartes postales Page:

Meilleures pratiques de conception Web mobile

Un autre aspect important est la taille des images. Les images non optimisées peuvent ralentir votre site Web et affecter l’expérience utilisateur globale.

Utilisez un logiciel de retouche photo comme Photoshop pour compresser vos images avant de les télécharger sur votre site Web. Si possible, hébergez des vidéos ailleurs et incluez un lien.

6: placement

Les gens utilisent généralement leurs pouces pour naviguer sur les sites Web mobiles. Cela signifie que certaines zones d’un écran sont plus accessibles, comme illustré ici:

Meilleures pratiques de conception Web mobile

Il est important de s’assurer que la navigation et les zones interactives sont plus proches du centre. Assurez-vous de tester les emplacements, que vous choisissiez une conception réactive ou adaptative.

7: Lier les informations de contact

Les utilisateurs mobiles en déplacement veulent que les choses soient faites rapidement. Ils n’ont pas la patience de faire défiler les pages de contenu pour trouver ce qu’ils recherchent.

Les numéros de téléphone doivent être associés pour appeler instantanément votre entreprise. De cette façon, ils n’ont pas à passer de votre site Web à leur application téléphonique. Voici un exemple de BestBuy:

Conception réactive

Cliquez sur le numéro hypertexte sur le site Web de BestBuy pour ouvrir automatiquement le clavier de votre téléphone.

Les cartes doivent également apparaître lorsque vous appuyez sur votre adresse afin que les utilisateurs puissent facilement accéder à votre entreprise. Ces deux derniers points sont particulièrement importants si vous êtes une entreprise locale.

Conclusion

Le choix entre une conception réactive ou adaptative est soigneusement étudié.

La conception réactive est généralement un choix sûr pour les pages plus petites avec peu de complexité, tandis que la conception adaptative est préférable pour les configurations plus complexes.

Quel que soit le design mobile que vous choisissez, il est important de savoir comment votre public cible utilise votre site Web et de toujours tester sa convivialité. Et n’oubliez pas de garder les choses simples.



Source link

Recent Posts