Comment donner vie à vos pages ?
Presque incontournable : intégrer des images
Rares sont les sites qui n’en contiennent pas !
En effet, à part si votre page a pour seul objectif de fournir des informations précises (d’ordre administratif par exemple), vous avez tout intérêt à inclure des images. Cela semble évident mais une page terne, ou à l’aspect rébarbatif aura un effet négatif sur l’impression que vous allez susciter chez votre visiteur. Il est donc, dans la plupart des cas, fortement conseillé de trouver des images pour agrémenter vos pages.
Images sous forme de galerie
Ce choix peut s’avérer intéressant pour une présentation rapide de votre activité. Outre son intérêt esthétique, une galerie peut être une sorte de résumé en images de votre page.
Au clic, les images peuvent être affichées en grand format dans une visionneuse, comme c’est le cas dans la galerie ci-dessous. Ceci permet au visiteur d’interagir avec vos pages; ce qui peut contribuer à lui donner envie de rester sur votre site, et de poursuivre la visite (surtout si vos images présentent un réel intérêt, qu’il soit esthétique ou autre).
Les carrousels d'images
On les appelle aussi « sliders ».
Une image à la fois (avec, ici, une transition sous forme de fondu)…
… ou plusieurs images affichées simultanément (si la largeur de l’écran du visiteur le permet).
Pourquoi pas des vidéos !
Si elles sont pertinentes, quelques vidéos peuvent enrichir votre site.
La vidéo est un excellent moyen de capter l’attention de vos visiteurs. C’est pourquoi, intégrer une courte vidéo (2 à 3 minutes) à la page d’accueil peut s’avérer très bénéfique pour votre site. Cette vidéo peut être un résumé de votre activité, ou simplement une accroche dynamique donnant envie au visiteur d’en savoir davantage.
Autre argument en faveur de la vidéo, elle permet aux internautes de vous trouver par le biais des plateformes d’hébergement : on pense en priorité à YouTube, leader dont l’impact est très important.
Un classique : le formulaire de contact
Aujourd’hui présent sur de très nombreux sites, le formulaire de contact vous permet de communiquer avec vos visiteurs.
Mais pourquoi utiliser un formulaire alors qu’il suffit d’afficher une adresse mail cliquable ?
Le recours à un formulaire présente plusieurs avantages. En premier lieu, il vous permet d’éviter de recevoir des spams car il vous dispense de faire apparaître directement votre adresse mail sur votre site. A noter qu’il existe des extensions qui permettent de crypter l’adresse mail de destination, la rendant illisible pour les robots. On peut également inclure le ReCAPTCHA (que vous avez probablement déjà rencontré) qui permet de s’assurer que c’est bien une personne qui tente de soumettre le formulaire, et non un robot.
Un autre intérêt du formulaire est que, contrairement à un mail, il vous permet de récupérer immédiatement toutes les informations dont vous avez besoin pour donner suite à la demande de votre visiteur. Il suffit pour cela de bien intégrer les champs de saisie nécessaires.
Les exemples de formulaires présentés ci-dessous sont fonctionnels. Vous pouvez les tester librement : cliquer sur le bouton de validation ne transmettra aucune donnée. Le message qui s’affiche à la validation prouve simplement que les champs obligatoires ont été correctement renseignés.
Dans ce premier exemple, nous avons un formulaire simple et classique où les champs « Prénom », « Nom » et « E-mail » sont obligatoires. Si ces champs ne sont pas correctement renseignés, un message d’erreur s’affiche, et les données ne sont pas envoyées.
Voici un exemple de formulaire plus complet (qui pourrait être associé à une invitation à une soirée). Comme vous le voyez, on peut inviter le visiteur à exprimer ses choix sous des formes variées. Notez que dans le premier formulaire, les champs à remplir étaient blancs, ici ils sont translucides : l’apparence des formulaires peut, elle aussi, être modifiée de nombreuses façons.
Une carte interactive
Lorsque vous souhaitez que vos visiteurs puissent venir vous voir, vous situer sur une carte interactive est une option intéressante. L’adresse qui a été définie lors de la création de la carte vient se placer au centre du plan qui s’affiche, et le niveau de zoom à l’affichage est fonction du choix que l’on fait lors de la création de la page.
Quel design choisir ?
L'organisation d'une page
Il existe plusieurs façons d’agencer une page web.
En-tête
Corps de page
Pied de page
En-tête
Menu
latéral
Corps
de page
Pied de page
Les deux exemples ci-dessus illustrent l’organisation d’une page web classique. Certains font le choix d’intégrer une barre latérale. Le menu principal peut apparaître seulement dans l’en-tête (en haut de la page d’accueil), ou bien être dupliqué dans le pied de page.
Remarque : si vous êtes, en ce moment, sur un smartphone, vous constatez que la section « menu latéral » du deuxième exemple apparaît non pas à côté du « corps de page » mais au-dessus. En effet, inclure une barre latérale sur un téléphone n’est pas l’idéal car l’écran n’est pas assez large pour ce type d’affichage. Il est généralement préférable de configurer le site de façon à ne pas faire apparaître la barre latérale en version mobile.
Bien à savoir : le choix des éléments qui s’affichent sur l’écran du visiteur peut être paramétré en fonction du terminal que ce dernier utilise (ordinateur, tablette ou smartphone).
Le pied de page va généralement reprendre votre menu principal, en y ajoutant la page des mentions légales. Les liens vers les réseaux sociaux peuvent également y figurer.
La charte graphique
Quand on évoque la conception d’un site internet, on entend souvent parler de « charte graphique ». Ce concept n’est pas forcément évident de prime abord. En fait, on pourrait aussi parler de cohérence esthétique : il s’agit de l’identité visuelle d’un site.
Celle-ci va être déterminée en priorité par une gamme de couleurs que l’on va retrouver sur l’ensemble des pages. Pour exemple, le site que vous consultez présentement a pour couleur de base, le bleu. L’idéal est presque d’obtenir une véritable signature visuelle, qui ferait que, au premier coup d’œil, le visiteur ayant déjà consulté votre site se rappellerait qu’il l’a déjà visionné.
Le deuxième aspect important d’une charte graphique est le respect d’une cohérence au niveau des textes. En effet, il est nécessaire de déterminer 2 ou 3 polices d’écriture au maximum, et de s’y tenir. Pour la clarté du contenu, il faut également que les titres de même niveau d’importance s’affichent de la même manière (taille de police, couleur de fond…).
La présence de cette cohérence esthétique améliorera le confort du visiteur au fil de sa navigation, et elle lui permettra d’associer (parfois inconsciemment) votre contenu à votre site. Enfin, le respect d’une charte graphique va contribuer à un bon positionnement dans le référencement naturel.