Conception d`un site (débutant)

Conception d'un site (débutant)
Je reprends ici des articles provenant de mon ancien site GuideWebmaster.net, sur les bases de la conception de
site Web. A l'époque mes connaissances dans le domaine étaient plutôt limités, mais ces conseils ne sont pas
inutiles pour tout débutant.
Organisation des fichiers
Quoi de plus énervant de voir un message d'erreur 404 sur son site et en prime de ne pas savoir qu'elle en est la
cause !
Pour palier à ses problèmes, voici quelques conseils qui pourront vous être utiles dans les noms de vos fichiers :
•
•
•
•
•
Ne pas mettre de majuscule dans les noms des fichiers et des pages qui composent votre site.
Effectivement, la plupart des serveurs hébergeant des pages Web fonctionne sous un système Unix,
comme Linux. Ces systèmes font la différence entre les majuscules et les minuscules dans les noms de
fichiers. Or, si un lien en minuscule <a href="page.htm"> pointant vers une page ayant un nom en
majuscule PAGE.HTM, celle-ci ne sera pas trouvée. Pour vous aider, Windows (qui confond les deux) est
toutefois capable de faire la différence à l'affichage entre majuscules et minuscules.
Pour cela, allez dans le poste de travail, dans le menu "Affichage" => "Option des dossiers". Sélectionner
alors l'option "Permettre l'utilisation des majuscules dans les noms de fichiers".
Ne pas utiliser d'accents ou de caractères spéciaux (ceux-ci ne passent pas toujours sur certains
serveurs).
Ne pas utiliser d'espace (utilisez de préférence le caractère _).
Ne pas dépasser les 16 caractères (au-delà, il peut y avoir des problèmes).
N'encombrez pas votre site avec des fichiers inutiles (qui ne sont pas liés à vos pages). Je vous conseil
donc de bien séparer la partie "Développement" de votre site de la partie "Opérante", celle qui servira en
ligne.
L'arborescence
La première chose à faire avant de ce lancer, c'est de concevoir une arborescence de ce que sera votre site.
Bien entendu, vous pourrez la modeler au fur et et mesure de l'évolution de celui-ci, mais les bases doivent être
fondées avant tout, pour garantir une bonne productivité et gestion du site. Croyez-moi, la bonne organisation des
fichiers qui composent votre site est vitale, qui plus est s'il est destiné à évoluer.
Pour exemple, voici une petite liste des choses qui devraient vous aider :
•
•
•
Les images principales du site, notamment celles utilisées dans toutes les pages devraient se trouver dans
un répertoire images ; les fonds dans un sous-répertoire fonds, les bannières dans un sous-répertoire
bannières...
Exemple d'arborescence
Veuillez à utiliser des noms de fichiers explicites, du moins assez pour que vous puissiez vous y repérez
sans effort. Essayez de faire en sorte qu'une personne étrangère pourrait naviguer dans les dossiers de
votre site et s'y repérer (presque) instantanément.
Restez logique !
La compatibilité
Voici un sujet un peu plus délicat...
Certaines balise HTML, ou animations (DHTML), ne passent pas sur certains navigateurs. Par exemple, la balise
<blink>, qui permet de rendre un texte clignotant, ne fonctionne que sur Netscape, alors que la balise <marquee>,
qui permet de faire défiler un texte, ne fonctionne que sous Internet Explorer.
Voici une petite liste des choses à ne pas oublier pour une compatibilité maximale :
Les javascripts
Les javascripts sont à utiliser avec une grande prudence ! Énormément ne sont que compatibles avec un
navigateur. Certaines fonctions changent d'un navigateur à l'autre. L'explication vient tout simplement du fait que
ces scripts sont exécutés par le navigateur, et non par le serveur.
<script language="JavaScript"><!-- Votre script //-->Code HTML à afficher en cas de
navigateur ne comprenant pas le Javascript ( ! sur une seule ligne ! )<script>
Pour personnaliser le script selon les navigateurs, vous pouvez détecter celui-ci via un petit code.
Lorsqu'un vous utilisez un script pour afficher un lien qui ne fonctionne que sur certains navigateurs, préférez
toujours mettre tout le lien (y compris les attribut de police, ou encore la puce qui va avec si celui-ci se trouve dans
une liste), pour qu'il n'y est pas texte du genre : "Ajouter ce site aux favoris" qui apparaisse sous Netscape, sans
lien.
La résolution
Un autre aspect de la compatibilité concerne la résolution d'écran ainsi que le nombre de couleurs (256, 24bits,
32bits...). Les dégradés par exemple passent très mal en 256 couleurs.
Un écran en 800x600 affichant un site conçut pour du 1024x768 peut casser complètement le design de celui-ci.
C'est pourquoi je vous conseil de vous méfier des attributs width et height des tableaux principalement :
•
Vous pouvez les exprimer en %. Le problème vient que la mise en page peut devenir complètement
déséquilibrée, avec un sommaire très resserré (du genre un mot par ligne) et une page prenant toute la
place.
Votre menu tout écrasé.
La page, occupant toute la place.
Petit écran
•
En pixels, le problème vient du fait des barres de défilement. Certes, la mise en page ne bougera pas,
mais imaginez un simple sommaire prendre la moitié de l'écran, étouffant ainsi la page se trouvant à côté.
Votre menu trop large.
La page, trop petite.
Petit écran
C'est d'ailleurs pour cette raison que de nombreux sites n'occupent pas tout l'écran pour ne pas sembler immenses
dans les basses résolutions. Mais la encore, aimez-vous beaucoup les sites ne prenant que la moitié de votre écran
avec des caractères presque illisibles ?
Le site, limité à la partie bleue de l'écran.
Les frames
Les frames, ou cadres permettent de charger plusieurs pages dans une seule fenêtre. Cela peut être très pratique,
pour un sommaire par exemple. D'un autre coté, elles peuvent aussi donner un manque de souplesse dans la mise
en forme de vos pages. Personnellement, je ne suis pas contre les frames, du moins si on sait les maîtriser. Mais
pour un site pro, oubliez ;-)
Exemple
Sommaire
Titre
Page
Arguments pour les cadres
•
•
•
Barre de navigation toujours présente, ce qui facilite la navigation dans le site (un conseil : incluez dans
la barre de navigation le bouton Précédent. L'utilisateur pensera plus à cliquer dessus que sur celui du
navigateur). Puisque plusieurs pages se chargent dans une même fenêtre, lorsque vous ouvrez une
nouvelle page, les autres pages déjà chargées, comme un sommaire par exemple, n'aurons pas besoins
d'être rechargées.
Place pour la publicité : un cadre permet de bien séparer publicité et contenu du site, pour ne pas altérer
celui-ci.
Maniabilité de l'hypertexte : en utilisant des JavaScripts, vous pouvez tout faire avec des cadres !
Exemple : charger deux pages en même temps dans deux cadres ; charger un nouveau sommaire pour
chaque rubriques du site... Des dizaines de possibilités s'offrent à vous.
Arguments contres les cadres
•
Le Target : lorsque vous cliquez sur un lien d'un sommaire, à gauche, la pages devra normalement se
charger dans la frame à côté, celle de droite. Il peut arriver, en ayant mis un mauvais target, qu'elle se
charge autre part, comme dans une nouvelle fenêtre, et même à la place du sommaire lui-même ! Cela
peut très vite devenir un cauchemar si vous ne maîtrisez pas les hyperliens.
•
•
Compatibilité : bien que les frames soit compatibles avec les navigateurs de génération 2 et plus (moins
de 2% des navigateurs non compatibles), je vous conseil de penser au utilisateurs qui ne veulent pas
naviguer avec des frames. C'est à dire de concevoir le site de telle manière qu'il puisse fonctionner aussi
sans cadres.
Mauvais Référencement : les frames peuvent provoquer une baisse sensible de visites sur votre site,
certains moteurs ne les prenants pas en compte. Pensez donc à reproduire votre page d'accueil dans la
partie NOFRAMES.
Encore une chose : n'abusez pas trop des frames ; 3 cadres dans une seule page être un maximum pour une
navigation et aussi une visibilité correcte (pensez aux écrans ayant une résolution de 640x480 par exemple).
Les couleurs
Le choix des couleurs est un point important dans la réalisation de pages Web, et peu changer entièrement la
présentation et l'atmosphère d'un site. La première erreur à ne pas faire, c'est de ne pas marquer de contraste
entre la couleur du texte et le fond de la page.
En effet, un texte gris sur un fond noir est difficilement lisible, ce qui restreint les personnes étant capables de le
lire. Encore un conseil : préférez les fonds clairs (même blancs) aux fonds sombres et noirs.
Ce choix n'est pas judicieux
Texte peu lisible
Préférez des teintes moins vives
Texte parfaitement lisible
Ce choix n'est pas judicieux
Texte peu lisible
Préférez des teintes moins vives
Texte parfaitement lisible
Mais le font noir n'est pas un bon choix.
N'utilisez donc pas des couleurs trop vives. Vous préférez "Les trucs à ne pas faire" ou "Les trucs à ne pas faire"
?
Vos couleurs préférées
Pour la plupart des personnes, c'est le bleu (35% selon des études) ; le bleu fort et vif étant pour les hommes et le
bleu ciel, plus léger pour les femmes.
•
•
•
•
•
Le vert est la deuxième couleur la plus couramment citée par des groupes de personnes appréciant
également l'orange.
Le violet est la troisième couleur la plus citée, dans une teinte tournant au rouge. Les personnes de 18 29 ans aiment cette couleur car ils la trouvent sexy.
Le rouge et le noir sont également cités (généralement le rouge pour les hommes et le noir pour les
femmes, mais certaines personnes d'âge moyen y voient un symbole de deuil).
Les adolescents aiment le violet, l'orange et un ton de vert de vase.
Les couleurs les moins appréciées sont les jaunes verts intenses, les oranges vifs et toutes les couleurs
fluorescentes en général.
Les couleurs peuvent êtres déclinées en plusieurs teintes et il est parfois préférable d'utiliser des tons plus adoucis.
Signification des couleurs
COULEUR
VIE
PHYSIQUE
SOCIALE
SPIRITUELLE
AFFECTIVE
Blanc
Noir
Rouge
Orange
Jaune
Vert
Bleu
Indigo
Violet
hygiène
mort
force
appétit
santé
repos
calme
guérison
sommeil
justice
nihilisme
puissance
ambition
richesse
fortune
arts
humanité
politesse
sagesse
pessimisme
volonté
orgueil
intelligence
activité
vertu
résolution
bonté
loyauté
tristesse
passion
joie
infidélité
espérance
tendresse
ardeur
jalousie
Les graphiques
Les graphiques, comme les GIF animés sont là pour égailler et animer vos pages. Il faut trouver un compromis
entre graphiques et temps de chargement. Effectivement, une image ne doit pas dépasser les 5 Ko pour un temps
de chargement optimal (5 Ko = environ + 2,5 secondes de temps de chargement sur un modem et une connexion
moyenne (2 Ko/s)).
Les formats de fichiers
Dans la pratique, on distingue 2 formats de fichiers graphiques couramment utilisés pour les pages Web : le format
PNG (successeur du GIF) et le format JPEG. A noter qu'ils sont utilisés pour des images bien distinctes.
JPEG
Avantages :
•
•
C'est l'un des format qui prend le moins de place (possibilité de comprimer les images de façon
importante).
L'image est en 16 millions de couleurs (24 bits) quelque soit le format de compression.
Inconvénients :
•
•
La compression altère les images, et surtout le texte qu'elles contiennent.
Impossibilité de rendre une partie de l'image transparente.
Utilisation : le JPEG est utilisé pour des images comme des portraits ou des paysages, avec beaucoup de
couleurs et peu de texte (photos, dégradés...).
PNG (GIF)
Avantages :
•
•
•
La compression n'altère pas l'image.
Possibilité de faire des formes rondes (l'image peut être en partie transparente).
Possibilité de créer une animation (pour le GIF uniquement).
Inconvénients :
•
•
Plus l'image est grande et a de couleurs, plus la taille augmente significativement.
Nombre de couleurs limité : 256 couleurs maximum (8 bits), la restitution des dégradés est donc mauvaise
(PNG 8 bits et GIF uniquement). Le PNG 24 bits offre 16 millions de couleurs.
Utilisation : le PNG est utilisé pour des images comportant du texte et peu de couleurs. Il est aussi utilisé lorsque
l'on veut rendre une partie d'une image transparente (on utilise alors une couche Alpha).
N'utilisez jamais des images brutes sur vos pages, comme le format BMP. De plus, je ne vous recommande plus
d'utiliser le GIF, qui est désormais un format dépassé.
Optimisation des images
L'optimisation d'une image consiste à réduire la taille de celle-ci tout en conservant sa qualité "visible", c'est à dire
sans que l'on puisse distinguer une trop forte baisse de qualité. Un fond très foncé par exemple, peut être bien plus
compressé que le même fond en plus clair.
Il existe également des logiciels, tel JPEG Optimizer pour le JPEG, ou Advanced GIF Optimizer pour les GIF. Ces
programmes permettent de supprimer des informations inutiles dans le fichier, non visibles sur l'image ; ou encore
permettent, pour les fichiers JPEG, de compresser qu'une partie de l'image, tout en gardant intacte une autre partie
sensible, contenant du texte par exemple.
Il existe également des sites qui permettent d'uploader des images GIF sur le site, qui se chargera de réduire sa
taille, en jouant principalement sur les couleurs et la taille de l'image.
Des outils comparables existent pour le PNG. Je ne citerais que l'excellent outil PngOptimizer.
Les fonds - création de fonds
Le fond d'un site est un élément de primordiale de celui-ci. C'est lui qui jouera sur l'atmosphère et l'ambiance du
site. Pour un site orienté professionnel, préférez un fond clair, même blanc, avec le texte en noir ; c'est et ça reste
un excellent compromis.
Créer un fond n'est pas très difficile, à condition d'avoir la matériel pour, et de ne pas chercher à en faire un trop
compliqué...
Sachez d'abord que sur une page Web, le fond se répète indéfiniment. Vous pouvez comparez un fond avec une
tapisserie : si les côtés ne correspondent pas, il y aura une coupure, ce qu'il faut dans la mesure du possible éviter.
Prenez par exemple les dégradés de ce site. Voici l'image, tel quel (en réduisant sa largeur pour qu'elle ne sorte
pas de l'écran) : Dégradé de fond
Celle-ci est donc répété verticalement, et si vous aviez une résolution plus élevée, vous remarqueriez que le
dégradé se répète aussi horizontalement.
D'autres astuces permettent de créer des fonds très petits, comme par exemple une brique : Brique
Répétée sur tout l'écran, on croirait voir un mur !
Les polices de caractère
Le premier point que vous devez considérez lorsque vous utilisez une police de caractère est sa répandue dans le
monde : la police doit être courante pour que la majorité des ordinateurs arrivent à la lire. Si vous utilisez une police
exotique et que l'internaute ne l'a pas, la police par défaut du navigateur sera utilisez, et tout l'effet escompté par
l'utilisation de cette police disparaîtra. Si vous désirez utiliser une police peu courante, le mieux est de mettre le
texte sous forme d'image, pour des titres par exemple.
Voici certaines polices que vous pouvez utilisez sans crainte : Helvetica, Verdana, Arial, Time New Roman, Courrier
...
•
•
Les polices Serif : Les polices Serif, tel "Time New Roman" ou encore "Book Antiqua" possèdent des
petits traits de raccord entre les lettres, ce qui facilite grandement la lecture dans un texte dense, comme
les livres, les documents, car les traits de raccord aident le lecteurs à rester sur la même ligne.
Voici quelques exemples d'utilisation de police :
Verdana : très lisible
Time New Roman : lisible, mais demande plus d'effort
Comic sans MS : très lisible
Impact : demande un effort pour le lire et départager les mots
Verdana : encore lisible
Time New Roman : encore lisible, mais mal adapté à des petites tailles
Comic sans MS : encore lisible, mais un peu moins confortable
Impact : très difficilement lisible
Verdana : toujours lisible...
Time New Roman : lisible, mais sans plus
Comic sans MS : très lisible
Impact : toujours aussi difficilement lisible
•
Les polices Sans Serif : Ces polices, contrairement au polices Serif, ne possèdent pas ces petits traits de
raccordement. Exemple : "Arial", "Verdana" ou encore "Lucida". Ces polices sont rarement utilisées dans
des longs textes, comme des livres. On les utilisera plutôt pour des titres, des descriptions brèves... Mais
ces polices sont également bien adaptées à l'écran et au petites tailles.
Ecrit par Olivier BICHLER, le 15/02/2007 23:39:22