Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

6 erreurs à ne pas faire sur un site responsive

L’heure est à la mobilité, vous le savez ! Alors pour offrir une expérience agréable et ergonomique à vos visiteurs mobiles, vous devez proposer un site responsive...

Publié par Camille

L’heure est à la mobilité, vous le savez !

Alors pour offrir une expérience agréable et ergonomique à vos visiteurs mobiles, vous devez proposer un site responsive parfaitement pensé pour ce type de navigation. Il ne s’agit pas d’en proposer une version réduite, mais bien d’offrir une version optimisée pour les petits écrans.

À cet effet, voici 6 erreurs que nous ne voulons plus jamais voir sur les sites responsive !

 

Définition : qu’est-ce qu’un site responsive ?

Source : Fastcompany.com

 

Définition
Un site responsive est créé de sorte à s’accommoder à toutes les résolutions d’écran (mobiles, tablettes, etc.).

En effet, un écran d’ordinateur peut mesurer entre 15 et 27 pouces, tandis que celui d’un téléphone peut varier de 4 à 6 pouces. Entre deux, nous avons les tablettes numériques qui mesurent entre 7 et 10 pouces.

C’est dans ce sens que votre site web doit pouvoir se lire et se consulter aussi bien sur un petit écran de téléphone que sur un large écran d’ordinateur, pour une meilleure expérience utilisateur.

 

1. Un menu s’inscrivant sur deux lignes

Source : Emilie_Chenorio (Graphiste.com)

En adoptant un design responsive, le menu de votre site doit automatiquement s’adapter à tous types d’écrans. Cette redimension ne fonctionne pas toujours, notamment si vous avez un menu très large. Par défaut, il va donc apparaître sur 2 lignes, ce qui diminue l’ergonomie de la navigation.

Vous disposez alors de trois solutions.

  • Soit vous réduisez le nombre d’éléments dans votre menu et préférez les listes déroulantes,
  • Soit vous créez des menus spécifiques en fonction des appareils utilisés par les internautes,
  • Ou alors vous avez la possibilité de céder à la tendance du menu hamburger.

Cela consiste à ajouter une icône avec 3 lignes, sur laquelle les utilisateurs doivent cliquer pour avoir accès au menu complet.

 

2. Utiliser des images à largeur fixe

La compatibilité des affichages sur tous les appareils est aussi valable pour les images. Évitez d’utiliser des photos à largeur fixe qui compliquent la navigation sur téléphone ! Le visuel tronqué affichera une barre de navigation vers la droite ou la gauche pour que l’utilisateur puisse le voir en entier. Ergonomie = 0.

Bon à savoir
La taille des images doit alors être codée en valeur relative et non fixe.

 

3. Développer le site bureau et le site mobile indépendamment

Source : Webodea (Graphiste.com)

Beaucoup de développeurs et de web designer croient que leurs efforts se concentrent prioritairement sur les sites pour ordinateur. La conception des sites pour mobile pouvant se faire plus tard. Plus à l’heure actuelle !

Les deux versions doivent être conçues en même temps et le design doit faire l’objet d’une double réflexion.

C’est le meilleur moyen de concevoir un site parfaitement responsive qui facilitera la conversion de vos visiteurs.

Source : Webodea (Graphiste.com)

 

4. Vouloir afficher tous les contenus

La création d’un site responsive implique de nombreuses contraintes, notamment concernant l’affichage des contenus.

Vous devez trouver la bonne formule entre le pas assez (comme vu dans le point précédent) et le trop de contenu.

Notre conseil
Veillez à alléger votre site mobile tout en vous assurant que les mobinautes accèdent à toutes les informations dont ils ont besoin pour être convaincus par les prestations de l’entreprise.

Parmi les contenus que vous pouvez supprimer en priorité afin d’alléger le chargement de vos pages sur mobile, vous trouverez :

  • Les images
  • Les pop-ups
  • Les formulaires de contact ou de téléchargement.

 

5. Oublier d’optimiser l’affichage des pages sur mobile

Certaines technologies ne s’affichent pas sur mobile, comme les contenus Flash par exemple. Google a assez prévenu les utilisateurs sur le sujet et, si vous utilisez encore cette technologie pour le site sur bureau, vous devrez passer au HTML5 pour la version mobile

De plus, les erreurs 404 sont très fréquentes en raison d’une mauvaise redirection entre le site mobile et le site principal. Tomber sur des URLs inexistantes finit par lasser les mobinautes et ils risquent de rapidement déserter le site.

Notre conseil
N’oubliez jamais d’utiliser Google Webmaster Tool pour vérifier si des erreurs 404 se cachent sur votre site et les corriger.

Indispensable pour accroître votre visibilité et capter les mobinautes, votre site responsive doit offrir une expérience utilisateur optimale pour remplir vos objectifs.

 

6. Vouloir tout faire vous-même

Source : aksapix std

La création d’un site responsive de qualité nécessite des compétences fondées en codage, graphisme, HTML, mise en page, etc. Bien-sûr, toutes ces compétences ne s’inventent pas et même si Internet saura vous apporter des éléments de réponse, vous aurez probablement besoin d’aide à un moment donné.

C’est la raison pour laquelle il est parfois plus intéressant pour vous de faire appel à un professionnel qui saura vous fournir un travail de qualité et dans des délais convenables.

 

Si vous avez besoin d’aide pour améliorer votre site, postez votre projet sur Graphiste.com  ! Des centaines de graphistes freelances professionnels sont prêts à répondre à vos besoins et à vous envoyer un devis.

5
/
5
(
1

vote

)
Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Symbolique des formes : que signifie un logo avec des lignes ?

Nous entamons notre dernier volet sur la symbolique des formes et nous allons aborder les lignes. Alors oui, une ligne en soit n’est pas vraiment une forme, pourtant selon...

Publié le par Charlotte Chollat
Graphisme

5 façons d’utiliser les textures dans vos créations graphiques

Les textures, c’est la vie. Ou du moins, en graphisme, c’est ce qui permet de s’en rapprocher. C’est ce qui va conférer un aspect réel...

Publié le par Melanie De Coster