Conseils de mise en page pour éviter l’effet zapping

La team a décidé aujourd’hui de vous faire une petite prescription (avant le froid de l’hiver et du mois de décembre) pour soigner vos textes. En effet, votre site internet peut souffrir d’un mal très embêtant si vos textes ne sont pas bien mis en forme : l’effet zapping de l’internaute. Peut-être l’avez-vous constaté par vous même en allant visiter un site internet : si l’accès à l’information n’est pas rapide ou simple, vous avez vite l’impression d’être perdu et avez tendance à zapper vers le concurrent. Comme pour vos plaquettes et vos documents commerciaux, le fond est aussi important que la forme dans la construction d’un site web. Alors, pour éviter une crise de zapping aiguë à votre site, voici quelques conseils pratiques autour de la fonctionnalité « texte ».

Conseil n°1 : les polices de caractère

Il vous faut absolument utiliser au maximum deux polices différentes mais surtout (et avant tout) il faut que ces fontes soient compatibles avec TOUS les navigateurs et TOUS les ordinateurs. Pourquoi utiliser de telles fontes ? Pour éviter d’avoir à transformer votre texte en image et alors perdre du contenu pour le référencement naturel de votre site.

policesLimitez votre choix à des polices de caractère :

1/ dites STANDARD et installées par défaut sur votre ordinateur comme Arial, Verdana, Helvetica, Georgia, Courier, Times, Times New Roman

2/ ou proposées sur le site Google Web Fonts, fontes qui seront également compatibles avec tous les types d’appareils et navigateurs. Pour les reconnaitre, c’est facile, puisque dans le logiciel WebAcappella, elles sont identifiées par un petit icône jaune. Pour plus d’informations, lisez notre article Et si on s’amusait avec la police !

La fonte de vos rêves ne doit pas être ni trop serrée (narrow) ni trop grasse et être facilement lisible à l’écran. N’hésitez pas à tester plusieurs polices avant de fixer votre choix définitif. Si vous éprouvez des difficultés à lire vos textes alors cela sera pareil pour l’internaute et c’est un risque à ne pas prendre !

Dernier conseil : ne justifiez jamais vos paragraphes. Privilégiez un alignement à gauche ou à droite selon vos besoins…

Conseil n°2 : l’alignement

Simplifiez la lecture de vos textes en structurant votre page grâce à la fonction alignement proposée dans le logiciel. Alignez les différents éléments insérés dans votre page pour éviter tout effet de flottement qui ne permettrait pas à l’oeil de l’internaute de se fixer sur une structure claire.

Pour aligner différents éléments dans votre page, commencez par vérifier le positionnement de vos éléments grâce à l’onglet « Propriétés géométriques » représenté par une règle dans l’inspecteur de propriétés de votre élément. Dans la section « Positionnement », deux données vont être importantes : la position horizontale X et la position verticale (en hauteur) Y. Il ne vous reste qu’à bouger, un à un, les éléments pour ensuite les aligner.

Vous pouvez également effectuer des alignements plus « automatisés ». Sélectionnez plusieurs éléments à aligner puis cliquez sur le menu « Disposition ». Choisissez ensuite le type d’alignement que vous souhaitez :

  • Alignement à gauche : va aligner les éléments avec celui qui est situé le plus à gauche
  • Alignement à droite : alignement des éléments avec celui qui est le plus à droite
  • etc

Petit rappel : ces fonctions d’alignement sont également accessibles grâce à un simple clic droit.

Conseil n°3 : les marges

Il est important d’aérer votre contenu et de ne pas coller plusieurs éléments entre eux. Plus vous collerez du texte avec une photo par exemple, moins cela sera lisible pour l’internaute.

Deux règles sont à respecter :

textes

1/ Si votre page fait 1000 pixels de large, ne collez pas vos textes aux bords de votre espace de travail. Positionnez vos éléments à minimum 20 pixels à gauche et 20 pixels en haut. Si vos textes commencent à 20 pixels à gauche alors il faudra qu’ils s’arrêtent à 20 pixels à droite pour respecter la marge interne dans votre site.

Vous pouvez vous aider des « règles » pour positionner ces marges. Cette fonctionnalité native à WebAcappella 4 peut s’activer depuis le menu WebAcappella en cliquant sur l’onglet « Affichage » puis « Activer les règles ». N’hésitez pas à lire notre article sur le sujet Les outils pour construire son design

margeinterne2/ Si vous appliquez un fond de couleur à votre élément « texte », pensez à utiliser les marges internes pour éviter de coller le texte au bord de la couleur. Pour cela, après avoir appliqué votre fond de couleur, sélectionnez le premier onglet de l’inspecteur de propriétés de l’élément « texte » puis dans la section « Marge intérieure », appliquez la marge qui vous semble la plus adaptée à votre cas : 5, 10, 20, etc…

Conseil n’°4 : la mise en page

Notre dernier conseil : pensez à uniformiser le design de vos textes d’une page à l’autre. En ayant une homogénéïté sur votre site, l’internaute aura des repères fixes et son oeil ne sera pas « perdu » dans la page.

Pour résumer, si vous écrivez vos titres en noir, en 16 et en gras sur votre page d’accueil, cela doit être pareil sur toutes vos autres pages. Cette uniformisation s’applique à tous les éléments textes que vous disposerez sur vos pages : sous-titre, paragraphe, lien hypertexte, légende, citation, etc…

La team vous a maintenant tout dit. A très bientôt pour un nouvel article 🙂