[Fiche] Bien réussir son site. Astuces

Bonjour, amis simeurs, chroniqueurs et créateurs. Ce tutoriel s'adresse aux amateurs en programmation web qui veulent faire un site, voire un blog, pour leur chronique ou pour nous exposer leurs créations.
C'est en parcourant des sites dont j'ai trouvé les liens sur le forum que j'ai eu l'idée de ce tutoriel et de son contenu. J'ai vu des très beaux sites et d'autres comportant des défauts. Donc voici des petits conseils, à faire et ne pas faire, pour bien réussir votre site. Pour les détails de programmation, n'hésitez pas à poser une question voire à demander une aide personnalisée, je me ferais une joie de répondre.
Ce tuto pourra être progressivement complété, en fonction de vos questions et remarques (j'aurais du mal à le faire exhaustif du premier coup, soyons honnêtes ^^)

Tout d'abord, il vous faut choisir sous quelle forme vous allez présenter votre contenu. Si c'est pour une chronique, un blog est plutôt adapté. Plusieurs chroniques avec quelques autres bidules (les sims à télécharger...) peuvent mériter un site plus structuré. De même pour les créations. Si vous avez beaucoup de catégories, un site sera peut-être plus chouette. À vous de définir vos besoins, et ce que vous avez envie de faire.

1°) Un élément très important du site, c'est la navigation. Le menu, les liens, doivent être clairement identifiables et lisibles. L'ensemble doit être limpide, si l'utilisateur éprouve une quelconque difficulté de lisibilité ou de compréhension, il aura tendance à quitter le site.

2°) Les couleurs. Ce n'est pas parce-que vous aimez une couleur qu'elle rendra bien dans le navigateur. Il faut impérativement éviter les couleurs criardes sur les grandes surfaces (épargnez nos yeux pitié ** ). Accorder les couleurs est très important. Les pros créent un nuancier avant de commencer leur site (ce n'est pas ce que je vous demande hein, ce serait nawak, mais c'est pour vous en faire comprendre l'importance). Par exemple, on n'écrit pas en rose sur du rouge, c'est pas joli et en plus illisible. (c'est un ignoble exemple, j'ai jamais vu ça... j'ai déjà vu du jaune canari sur du bleu électrique... aïe)
Bref, vous m'avez comprise ^^

3°) Ensuite, pour les textes, et je pense particulièrement aux chroniques, on fait attention à la lisibilité. On évite les images de fonds, car les motifs entravent la lecture. C'est là que le choix des couleurs est primordial. Là, je n'ai pas de recette miracle, il faut tester, et il est évident que la couleur de fond et celle du texte doivent être suffisamment contrastées.

4°) Les images. Attention à la qualité. Maintenant, toutes les images sur le web sont en .png, c'est bien meilleur que le .jpg et comme ce format gère la transparence, il offre plus de possibilités. Il ne faut pas que les images soient trop grandes, à cause de leur poids, qui augmente le temps de chargement, mais aussi pour une questions d'esthétique. Il ne faut pas non plus qu'elles soient trop petites, pour d'évidentes raisons de visibilité. Ou alors faites des vignettes, quand on clique, on a l'image plus grande. A vous de trouver un juste milieu. Et faites également attention aux retouches des images. Certains effets peuvent être très chouettes, mais attention à ne pas rendre vos captures floues, surtout quand vous souhaitez présenter une création. D'ailleurs, pour les créas, les photos brutes sont souvent la meilleure solution (on ne triche pas sur le produit ^^).

5°) Les clignotements. Ça va peut-être déplaire à certain(e)s, mais c'est à bannir. C'est anti-ergonomique. Les textes, défilants, clignotants et pailletés, c'est pas super. À la rigueur, une petite icône animée pour mettre en lumière la publication d'un nouvel article peut passer. Mais il faut que ça reste discret.

6°) Les polices de caractères. C'est très important pour la lisibilité. Et les vrais geeks comprendront, mais si vous pouvez éviter le Comic Sans MS, c'est aussi bien. Ce n'est pas vraiment une police appréciée, et sur le web elle a une mauvaise image (bref ! Pas super simple à expliquer ça, je pourrais donner des détails si certains sont intéressés par le sujet). Préférez Verdana, Tahoma, Helvetica .. à la rigueur Arial pour faire classique. Pensez joli, mais pensez aussi lisibilité ^^(j'aime bien ces deux mots oui oui 8D )

7°) Les tailles des pages. Le truc auquel il faut faire très attention, c'est le scroll horizontal. Si on a besoin de se déplacer horizontalement dans le site pour voir du contenu, c'est qu'il y a un truc qui ne va pas. Soit vos blocs sont trop larges, soit votre fond est trop grand ou mal ajusté.
Là je vais vous donner une petite astuce de code pour ceux qui connaissent un peu. Si c'est le fond qui pose problème, il faut qu'il soit déclaré dans votre feuille CSS comme suit (dans le body en général) :

Code:

background : url('chemindelimage.png') top center no-repeat ;

Il sera centré et s'il est trop large, le trop sera masqué. Et hop, plus de scroll ! (Non non ce n'est pas magique). Après si vous avez un motif d'angle, vous pouvez mettre left ou right à la place de center, bottom à la place de top si c'est en bas...

8°) Les arrondis. Alors personnellement, j'adore les arrondis. Ça adoucis les blocs et c'est joli. En plus avec les nouvelles propriétés CSS3, c'est du gâteau (s'il y a des intéressés, cela pourrait faire l'objet d'un autre tuto). Par contre, il faut bien faire attention à ce que ça ne pixelise pas, sinon c'est pire que si vous laissiez les angles droits.

9°) Les effets de survol. Ils sont indispensables à l'ergonomie pour bien distinguer les liens. Mais attention à faire des choses légères, les gros trucs clignotants et roses à contour jaune, on évite ^^

10°) Les débordements. Ajustez bien vos textes et les blocs qui les contiennent. Si ça dépasse, c'est pas joli et pas ergonomique. Une partie du texte peut être masquée, on risque les chevauchements de liens et ainsi de suite. Là il faut y passer du temps et faire des essais.

Voilà, pour l'instant j'ai 10 astuces à vous offrir (même pas fait exprès), j'espère qu'elles vous seront utiles. N'hésitez à me donner matière à compléter et à exposer vos soucis.