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

Quel format audio choisir et pour quels usages

Entre les différents formats et codecs audio disponibles, il n’est pas toujours facile de s’y retrouver. Encore plus en sachant que les caractéristiques de chacun de ces formats...

Publié le par Solenne Ricard
Graphisme

Photoshop : 5 étapes pour transformer une photo en un dessin au crayon

Sous Photoshop, il est possible d’appliquer de nombreux effets à une photographie pour lui donner du style. Dans ce nouveau tutoriel, vous allez apprendre à...

Publié le par Charlotte Chollat