2
La réflexion
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Le site web est un outil qui sert à communiquer. Avant de le réaliser, il est
donc essentiel de connaître le public visé car ce dernier donnera
l’orientation de la charte graphique et le ton du contenu. Si vous vous
adressez à une tranche 15-24 ans avec la musique rock comme thème,
vous aurez un ton familier, avec le vocabulaire adéquat, pour créer un lien
immédiat avec ce public. Le design d’un site parle immédiatement au
visiteur, mais il est le résultat d’un travail en amont.
Le site est donc au cœur d’un projet et le projet ne se construit pas au fur
et à mesure de l’élaboration du site. Ce projet doit se voir au premier coup
d’œil, sur la page d’accueil. Internet relie des millions de sites ; il est donc
nécessaire de se démarquer des autres sites par une intention originale et
annoncer immédiatement le contenu et le ton.
2.1
Les types de sites
Il existe plusieurs types de sites selon l’objectif visé. Ils demandent une
charte graphique différente. Par exemple, le site vitrine est avant tout un
travail de graphiste. Le contenu doit être court et efficace, alors que le
portail communautaire sera davantage centré sur l’interactivité.
Les sites vitrine ou sites plaquette
Les sites vitrine ou sites plaquette ont comme objectif de présenter une
société sur Internet pour des internautes qui ne connaissent pas la société.
Ils contiennent quelques pages présentant les produits et services, la
situation géographique, une page contact, des points pratiques (heures
d’ouverture, plan d’accès…). Cette catégorie de sites reprend souvent le
graphisme de la plaquette de la société et leur interactivité est restreinte à
la page contact avec éventuellement un formulaire.
Les internautes viennent y chercher une information précise s’ils connais-
sent l’entreprise. Ils peuvent découvrir le site à travers un moteur de

de feuilleter tout le catalogue. Les pages ont parfois tendance à être
lourdes, ce qui a pour effet d’agacer le visiteur. Il est judicieux, en plus de
classer les produits en de nombreuses catégories, d’insérer un moteur de
recherche avec plusieurs modes de recherche (mots-clés, catégorie,
référence produit, nom du produit…). La documentation des articles peut
être présente sur une page web ou un document à télécharger. Une foire
aux questions (FAQ), avec un formulaire pour le SAV, pourront être
proposés.
m
Figure 2.2 : Le site de Feu Vert
2
La réflexion
454 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Les sites d’information
Les sites d’information approfondissent un thème et diffusant des infor-
mations avec une visée professionnelle. Les pages doivent être dé-
pouillées pour en faciliter la lecture, avec un beau graphisme restant sobre.
Le design est là pour souligner le contenu mais c’est le contenu qui
importe le plus. Les liens de navigation sont explicites. Un exemple de
beau site d’information sur la typographie est www.planete-
typographie.com.
Les sites marchands
Les sites marchands vendent directement leurs produits sur Internet avec
la possibilité de payer en ligne ou par un autre moyen. Le design dépend
du type de produit vendu et de la ligne de marketing suivie. Un site qui
construit toute sa publicité sur les prix va mettre en avant les promotions
sur sa page d’accueil et tenir au courant les inscrits par un mailing
m
Figure 2.3 : Le site Planète Typographie

Figure 2.5 : Le site de l’Unesco
m
Figure 2.6 : Le site Les Mains
Les types de sites
Double Poche CSS • 457
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Les sites communautaires
Les sites communautaires sont des portails qui permettent à des internau-
tes de partager un intérêt commun, avec beaucoup d’interactivité. Ils sont
faits par les internautes eux-mêmes, le webmaster n’étant là que pour
animer et lancer une dynamique. Leur ambition est de réunir le maximum
de passionnés et de devenir incontournables sur le sujet traité, comme
Wikipédia ou encore
www.agoravox.fr.
m
Figure 2.7 : Le site Agoravox
m
Figure 2.8 : Le site Wikipédia
2
La réflexion
458 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Les sites intranet et les sites extranet
Les sites intranet sont accessibles de l’intérieur d’une entreprise ou d’une
direction. Ils ont pour objet la mise à disposition et le partage d’informations
professionnelles. Leurs pendants sont les sites extranet sur le Web qui, grâce
à une authentification, permettent à des salariés d’une entreprise d’accéder à
une interface personnalisée et d’administrer des informations. Ils peuvent
cibler les fournisseurs, les acheteurs, les commerciaux itinérants, etc.
2.2

La difficulté consiste à réunir ces trois activités sans qu’il n’y ait de hiatus
entre elles. Le but est donc de trouver une charte homogène, qui
différencie cependant les trois pôles. La gageure est ici de faire en sorte
que chaque partie du site trouve son public, ou plutôt que chaque public
identifie bien ce qu’il vient chercher sur le site.
2.4
Le public
À qui le site est-il destiné ? Il s’adresse aux curieux, aux personnes
indécises quant à leurs prochaines vacances, qui cherchent à passer un
séjour convivial, au calme. Il doit contenir de nombreuses photos et mettre
en valeur le gîte, l’accueil et les activités possibles dans les environs. Un
m
Figure 2.9 : Écoute S’il Pleut
2
La réflexion
460 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
gîte rural n’est pas différent d’un hôtel ; il est simplement plus convivial
et cultive davantage la proximité.
Le public a besoin d’être séduit et rassuré, de connaître les propriétaires
du gîte, la région, les activités. Nous allons faire ensemble le site les
Jardins d’Écoute S’il Pleut (www.ardaee.com), un lieu qui conjugue
horticulture, jardinage et accueil. L’accent sera mis sur le gîte.
Pour cibler les futurs visiteurs, il est intéressant de créer des profils types
et de dresser la priorité de chacun. Plusieurs profils sont envisageables :
¶ personnes ou familles en recherche de gîtes accessibles aux handica-
pés, portant le label "Tourisme et handicap" et "Gîtes de France", dans
le cadre d’une ferme horticole ;
¶ personnes ou familles en recherche d’un lieu d’accueil pour courts
séjours de repos ;

Le visiteur parcourt les pages du regard. Il est important de hiérarchiser
l’information pour donner une direction à la navigation, en mettant le lien
le plus important bien en vue, soit au-dessus des autres, soit à un endroit
où il sera repéré en premier.
Les liens répertoriés sont les suivants :
¶ Les gîtes : une page par gîte ;
¶ Les pépinières (méthodes de production, plantes, vente) ;
¶ Conseil ;
2
La réflexion
462 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
¶ Contact ;
¶ Partenaires ;
¶ Liens amis ;
¶ Comment venir ?.
Par la suite, la carte du site pourra évoluer, mais en l’état, elle constitue
une base pour facturer les services au client, le travail est facturer sur le
temps évaluer pour réaliser cette arborescence ; tout ce qui s’ajoutera par
la suite sera facturé en plus.
2.6
Identifier le contenu sémantique
Chaque page contient un titre principal et au moins un autre secondaire.
Sous un titre, quand le texte de la page est long, il est souvent utile de
mettre un résumé, introduisant les sujets évoqués dans ce qui suit.
L’article est entrecoupé de sous-titres. La page contient aussi un ensemble
de mots-clés, qui aideront le visiteur à identifier les thèmes et permettront
au site de bien être référencé par les moteurs de recherche.
b
Figure 2.11 :

.bradsoft.com/download. Il existe des versions payantes et une gratuite,
TopStyle Lite, qui possède une fonction de validation de style selon les
différentes normes CSS (voir Figure 2.13).
TopStyle Pro propose, en plus, des outils de validation de HTML et de
XHTML Une fonction permet aussi de normaliser un code en un clic, avec
la fonction de vérificateur de mise à jour (Style Upgrade), en transposant
les balises obsolètes (balises de police…) dans la feuille de style. La
fonction de vérification de style inspecte le style CSS en fonction aussi de
la compatibilité avec les différents navigateurs.
TopStyle accompagne en toute transparence les logiciels Dreamwea-
ver MX et HomeSite.
2
La réflexion
464 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Master Styler
Master Styler est un outil pratique pour manipuler le contenu des feuilles
de style et identifier certains sélecteurs. Les erreurs sont mises en évidence
par un surlignage. Le résultat est visualisé dans différents navigateurs, à
condition que ces navigateurs soient installés. L’interface est ergonomi-
que et agréable. Il est téléchargeable sur www.westciv.com/
style_master, avec une version d’évaluation qui devient payante un
mois après.
m
Figure 2.13 : TopStyle
m
Figure 2.14 : Master Styler
Choisir les outils
Double Poche CSS • 465
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

créer un dégradé ou d’avoir un florilège de couleurs. Color Schemer est
payant et téléchargeable sur www.colorschemer.com/download.php.
b
Figure 2.16 :
Colourificator
b
Figure 2.17 :
EclipsePalette
Choisir les outils
Double Poche CSS • 467
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
IconArt
Pour avoir une identité graphique dans la barre d’adresse d’un navigateur
ou dans la liste des favoris, il est possible d’insérer une icône de 16 pixels
sur 16 sur le site en lui donnant comme nom favicon.ico. Pour créer ce
genre d’image, il existe un certain nombre de logiciels. IconArt est gratuit,
téléchargeable sur www.conware-pro.com/products/ia.
m
Figure 2.18 : Color Schemer
b
Figure 2.19 :
IconArt
2
La réflexion
468 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Web Developer
L’extension Web Developer de Firefox (illa
.org/extensions/moreinfo.php?id=60) est un outil intéressant et
indispensable. Il permet de voir les coulisses des pages web et, entre

Figure 2.21 : Élaboration
2
La réflexion
470 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.