Webdesign : les 4 erreurs à éviter

Quand on se lance dans la création de son premier site internet, il est parfois difficile de bien structurer les pages et l’accès à l’information et donc de construire un site propre et homogène. Voici les erreurs les plus fréquentes et les conseils de la team WebAcappella pour les éviter !

Erreur n°1 : Une hauteur de page mal adaptée au contenu

En naviguant sur votre site, l’internaute arrive sur une page où le contenu s’arrête en bas de l’écran mais une barre de défilement vertical s’affiche sur le côté de la page. En utilisant le scroll (défilement vertical), le visiteur descend encore et encore sur votre page alors qu’il n’y a rien, pas de textes, pas d’images bref du vide. Voici une première erreur à éviter !

> La solution : Pour un affichage adapté au contenu, utilisez une seule et même « maquette principale » pour construire votre site, maquette à laquelle vous allez lier un « pied de page ».

Définissez une hauteur de page pour votre « maquette principale » relativement importante. Créez ensuite une nouvelle maquette pour votre « pied de page » avec la même largeur de page que votre maquette principale et une hauteur de 200 pixels par exemple. Cet espace servira à insérer les éléments de votre footer (copyright, lien vers vos mentions légales, etc). Liez ensuite ce pied de page à votre maquette principale. Pour ce faire, double-cliquez sur le fond de votre maquette puis dans la fenêtre de dialogue « Propriétés de la page », allez dans la section « Pied de page » et cliquez sur « Choisir un pied de page ». Vous allez alors pouvoir choisir la maquette de votre pied de page. Finissez par valider. Désormais, dès que vous créerez une nouvelle page, le pied de page viendra automatiquement s’insérer juste en dessous du dernier élément de votre page.

Erreur n°2 : Des pages trop larges

Une barre de défilement horizontale s’affiche en bas de la page de votre navigateur ? Votre page est trop large ! L’affichage de votre site n’est pas fixe, il peut être amené à bouger dans l’écran et parfois l’internaute devra même jouer avec la barre de défilement pour accéder au contenu. Pour un meilleur confort de lecture, erreur à corriger absolument !

> La solution : Créez votre maquette de page avec une largeur de 1000 pixels maximum.

Pour cela, faites un clic-droit sur l’espace de travail de votre maquette puis sélectionnez « Propriétés de la page ». Dans la section « Plan de travail », définissez 1000 pixels pour la largeur et indiquez la hauteur de votre choix. N’oubliez pas de cocher « Plan de travail centré lors de la publication » pour éviter que l’affichage sur les écrans ne bascule à gauche de l’écran. En effectuant ces opérations, vous serez sûr d’avoir un affichage adapté à la fois aux écrans d’ordinateurs 15 pouces (ordinateurs portables notamment) et aux écrans d’appareils mobiles comme les tablettes.

Erreur n°3 : Une navigation différente selon les pages

Un menu de navigation est le repère visuel principal utilisé par l’internaute qui visite votre site. La création des menus différents dans les pages ou leur insertion à des emplacements différents risquent de perdre l’internaute dans la lecture de votre site et au final, il pourra décider de quitter votre site prématurément sans avoir eu l’information souhaitée.

> La solution : Utilisez une seule et même navigation pour toutes les pages de votre site.

Dans votre maquette principale, insérez un élément « Menu Dynamique » ou des « Boutons » pour construire votre navigation. Lorsque vous créez ensuite vos pages, définissez toujours dans les « Propriétés de la page », la maquette principale comme design par défaut. Vous serez ainsi sûr d’avoir une navigation identique sur tout votre site.

Erreur n°4 : Des couleurs différentes

Parfois, lorsque vous avez publié un site et que vous souhaitez ajouter du nouveau contenu, vous avez oublié les couleurs par défaut du site. Ainsi, il n’y a plus d’homogénéité dans les couleurs de vos textes, de vos liens. Un vert différent, un bleu plus clair… Bref, cela ne donne pas une unité à votre site.

> La solution : Dès que vous créez votre site, fixez définitivement les couleurs.

Dans WebAcappella, allez dans le menu « Site web » puis cliquez sur l’onglet « Harmonie des Couleurs ». Cliquez sur le premier carré de couleur pour sélectionner une couleur puis faites de même pour les 4 autres carrés. Une fois votre règle fixée, vous n’avez plus qu’à cliquer dans la fenêtre de dialogue sur l’icône « + » pour sauvegarder votre combinaison de couleurs. Finissez par la sélectionner dans le menu déroulant « Choisir une harmonie » et faites « OK » pour valider. Dès que vous ajouterez un bloc de couleur ou définirez une couleur pour vos textes, l’harmonie de couleurs s’affichera en bas dans la palette de couleurs.

Vous l’aurez remarqué, pour éviter les erreurs les plus fréquentes, un seul mot d’ordre : MAQUETTE. Alors si vous voulez tout savoir sur cette fonctionnalité, un dernier conseil, lisez l’article consacré aux maquettes.