(Article mis à jour tous les ans avec de nouveaux exemples)

Un site Internet doit être au goût du jour pour pouvoir plaire à ses visiteurs et apporter des résultats, que l’objectif recherché soit un objectif de communication ou de vente. Mais comment créer un site Internet à la fois moderne et efficace aujourd’hui en 2017 ?

  • Quelle place accorder aux visuels ?
  • Quelle quantité de texte sur la page d’accueil ?
  • Faut-il faire des pages longues ou courtes ?
  • Comment adapter le design aux mobiles ?
  • L’effet parallaxe : c’est quoi ce truc ?

Je vais vous expliquer dans cet article les bonnes pratiques pour avoir un site Internet moderne et efficace aujourd’hui. C’est une étape fondamentale car c’est la première approche pour réussir à captiver l’internaute.


Un site Internet moderne avec de grandes images

La page d’accueil est la porte d’entrée de votre site. Elle doit donner le ton et captiver le visiteur.

Les pages d’accueil modernes donnent une place importante aux visuels. Nous voyons de plus en plus en arrivant sur des sites une photo pleine page, c’est-à-dire une photo qui prend toute la hauteur et la largeur de votre écran. Ce type de visuel est régulièrement utilisé par de nombreux sites (institutionnels ou e-commerce) et permet de proposer tout de suite au visiteur un rendu moderne.

Ce fond d’écran doit être attrayant, et le visuel doit être de qualité. Il en va de même pour les autres photos que vous utiliserez sur votre site, elles ne doivent jamais être floues ou pixelisées. C’est un critère très important pour l’aspect moderne du site.

Voici ce que cela peut donner par exemple fait pour un commerce local (Pressing) : http://latelierdupressing.fr

Pour une activité de consultant : http://lignesdhorizons.com


Un menu moderne

Le menu de navigation est souvent négligé, à tort. Avoir un beau fond d’écran sur un site Internet moderne est étrange si le menu n’est pas bien adapté.

Afin de s’adapter aux changements et nouvelles tendances du web design, certains sites un menu transparent, c’est-à-dire que le menu ne cache pas votre fond d’écran principal.

Par exemple, le site de Authentic products : http://www.vanille.com/authenticproducts

Autre exemple, le menu situé gauche de l’écran, une ancienne pratique qui revient à la mode :

Prévoir un menu caché est également une pratique qui tend à se répandre. Cela est lié au développement de la navigation web sur mobile. Sur mobile en effet, les menus sont cachés, remplacés par un icône « hamburger ». Certains vont donc plus loin, en gardant ce type de menus cachés même sur la version desktop de leur site.


Page « Long scrolling »

Les pages dites « Long Scrolling » sont les pages web construites toute en longueur. L’information est divisée en plusieurs sections sur la page et il faut scroller (descendre) jusqu’en bas pour tout voir.

Le Long Scrolling est de plus en plus utilisé sur le web, pour tout type de site. Nous l’utilisons le plus souvent pour créer des pages d’accueil modernes.

Nous construisons des pages en Long Scrolling pour nous adapter aux nouvelles habitudes des internautes qui utilisent de plus en plus des supports tactiles (mobiles, tablettes) sur lesquels descendre sur une page est plus agréable qu’utiliser une souris.

Ces pages Long Scrolling permettent d’afficher le contenu petit à petit, de présenter des arguments les uns après les autres et de les illustrer de visuels. Par exemple, si l’on doit « vendre » plusieurs services sur une seule et même page, nous pouvons les présenter un par un, cela facilite la lecture pour l’internaute.

Exemple avec la société Green Soluce, dans l’immobilier durable : http://www.greensoluce.com


Site Internet one page

Certains sites poussent le bouchon encore plus loin (Maurice ?!) en créant un site Internet d’une seule et unique page : le site « one page ».

Un « parfait » exemple ici avec http://iwillconsulting.com :


Effet parallaxe pour un site Internet moderne

Toujours dans l’optique de créer un site Internet moderne, je vous conseille d’utiliser l’effet parallaxe.

L’effet parallaxe est un type d’animation qui consiste à utiliser une image en arrière plan qui défile à une vitesse plus réduite que le reste de la page. Donnant une impression de deux niveaux différents, comme dans un ascenseur par exemple. Cela donne tout de suite du dynamisme à un site Internet !

Cliquez sur le lien ci-dessous pour voir ce que cela donne en live, regardez l’image derrière « Votre projet, Yes you will » : http://iwillconsulting.com/

Que vous souhaitiez utiliser ou non l’effet parallaxe ou le Long Scrolling sur votre site, gardez toujours en tête l’objectif : convertir du mieux possible les visiteurs, et avoir un bon taux de rebond.


« Mobile friendly » et responsive design

Depuis que tout le monde ou presque a un smartphone connecté à Internet dans sa poche, créer un site Internet moderne et « mobile friendly » est devenu indispensable. Un visiteur qui arrive sur un site web via mobile n’aura pas envie de continuer sa navigation si celui-ci n’est pas adapté.

Un site responsive design est un site qui s’adapte à toutes les tailles d’écran, peu importe l’appareil que l’on utilise pour naviguer. Ce terme est utilisé plus précisément par rapport aux supports mobiles comme le smartphone ou la tablette.

L’écran d’un mobile étant plus petit, le design est un facteur crucial dans l’optimisation d’un site responsive.

Version classique (sur ordinateur) :

Version mobile (responsive) :


Conclusion

Le design d’un site Internet influence beaucoup plus son efficacité que ce que l’on pourrait penser, quel que soit le secteur d’activité. Un site Internet qui ne plaît pas visuellement ne donne pas envie de lire les textes et de contacter la société. Nous le voyons aussi bien sur des marques grand public que sur des sociétés de conseils B2B ou sur des marchés de niche industriels.

Le beau aide à vendre plus et à vendre mieux.

Vous pouvez tout à faire avoir un site Internet au design sérieux et old school. Mais la navigation devra quand même s’adapter aux codes de design actuels. On peut donc tout à fait créer un site Internet moderne, tout en jouant sur l’aspect « rétro ».

N’hésitez pas à me contacter si vous ne savez pas comment bien designer un site professionnel ou si vous n’arrivez pas à faire quelque chose de beau et professionnel. Notre équipe rendra beau n’importe quel site !

2 réflexions sur “ Créer un site Internet moderne et efficace en 2017 : exemples et bonnes pratiques pour TPE & PME ”

  1. C’est vrai que le design, au-delà de sa capacité à « raconter une histoire » et refléter l’univers d’une entreprise, joue aussi un grand rôle pour établir tout de suite la confiance entre le visiteur et le site. On se méfie d’un site qui a l’air trop démodé… car après tout, y a-t-il encore quelqu’un derrière ? Pourquoi aucun budget n’a été investi dedans alors que c’est une vitrine ? Les produits/services sont-ils eux aussi pleins de toiles d’araignée et inadaptés au marché actuel ? Je caricature mais je trouve que bien souvent, c’est comme ça que l’on raisonne !

    Sur une note plus technique, les sites one page et infinite scroll sont souvent catastrophiques en termes de référencement. La pratique, en l’état, reste relativement déconseillée par Google à moins de réaliser des optimisations poussées (créer une pagination malgré tout, faire en sorte que chaque « page » puisse être accessible quand Javascript est désactivé, permettre un accès direct à chaque partie, etc).

    1. Bonjour,

      Je suis d’accord avec ces remarques, un site one page sans blog n’aura aucune visibilité. A proscrire, à moins que le site ait un objectif purement plaquette. Et même dans ce cas, ce n’est pas très stratégique. Ce sera plus utile pour promouvoir un projet particulier ou un événement.

      Yoann

Laisser un commentaire