Vous êtes sur la page 1sur 24

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Dabne
carolina@dabne.net
ana@dabne.net
Rabat 2011- Comment faire un projet web? Manuel de Style Web

À envisager...
Nous savons que le bon contenu et son organisation est essentiel pour
attirer les visiteurs. Mais, ils resteront là s’ils trouvent notre page
confortable et agréable à l’œil.
La plupart de nos lecteurs sont à la recherche de l'information, et
ils/elles ne le trouvent pas en lisant la page web mot à mot, mais en
balayant des yeux les items importants.
En général, nous devons utiliser les images alternant avec du texte,
pour faciliter la lecture, utiliser les couleurs peu agressives et
harmonisées avec le design général de la page. Nous pouvons dire la
même chose pour les typographies.
http://creatuweb.espaciolatino.com/tutorhtml/tema21.html

2
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Recommandations
En général, nous allons écrire nos contenus sur notre site nous mêmes,
après qu'un/e informaticien/ne ait mis en œuvre le graphisme par
défaut. Peut-être que l'informaticien/ne a mis en œuvre aussi un
éditeur WYSIWYG ("What You See Is What You Get") pour rendre plus
facile notre écriture, et avec cet éditeur, nous pourrons mettre les mots
en gras, souligner, les paragraphes... C’est pourquoi, on tiendra compte
du style général du site, et nous allons donc voir quelques
recommandations:

3
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Rédaction
Huit conseils pratiques pour rédiger une page web:
• Utiliser un langage simple et clair
• Développer une seule idée par paragraphe
• Mettre la conclusion en premier
• Insérer des sous-titres descriptifs
• Mettre en gras les mots importants
• Faire des liens descriptifs (pas Lire ici)
• Présenter ses idées sous forme de listes
• Aligner le texte à gauche (a droite pour le écriture en arabe)
• http://www.ecrirepourleweb.com/ergonomie/des-besoins-des-utilisateurs-2-comportements

4
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Le texte. Les typographies

Les typographies sur les différents navigateurs


Les navigateurs (IExplorer, Opera, Safari, Firefox, Google Chrome, etc)
sont les logiciels qui peuvent interpréter les codes du design web, et
pour ça, ils utilisent les typographies installées dans le système
d'exploitation (Windows, Linux, MacOS, etc.) où ils s'exécutent. Comme
chaque ordinateur a différentes typographies installées, il est fortement
recommandé d'utiliser les polices les plus populaires, pour s'assurer
que tout le monde voie le page de la même manière.

5
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Les typographies les plus utilisées sont


Arial, Helvetica, sans-serif;
Arial Black, Gadget, sans-serif;
Bookman Old Style, serif;
Comic Sans MS, cursive;
Courier, monospace;
Courier New, Courier, monospace;
Garamond, serif;
Georgia, serif;
Arial
Impact, Charcoal, sans-serif;
Lucida Console, Monaco, monospace;
Lucida Sans Unicode, Lucida Grande, sans-serif;
Helvetica
Comic Sans MS
MS Sans Serif, Geneva, sans-serif;
MS Serif, New York, sans-serif;
Palatino Linotype, Book Antiqua, Palatino, serif;
Symbol, sans-serif;
Tahoma, Geneva, sans-serif; Georgia
Times New Roman, Times, serif;
Trebuchet MS, Helvetica, sans-serif;
Verdana, Geneva, sans-serif;
Trebuchet MS
Verdana
Webdings, sans-serif;
Wingdings, Zapf Dingbats, sans-serif;

6
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Le texte. Les caractères spéciaux

“ $ % &&&
-----
Évitez tous les caractères spéciaux si c'est ####
possible. Ils peuvent interférer avec le code HTML.
Par exemple, les traits d'union, guillemets, la
@@@---
césure automatique... faits avec le "Word", ______
peuvent ajouter des caractères non standards qui {}
ne sont pas bien montrés sur les navigateurs. []
**********
'''''
\\\\\\\\\\\

7
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Le texte. L'alignement du texte


Lisibilité ou esthétique, il faut choisir. L'alignement d'un texte se fait à
gauche, à droite, centré ou justifié. Dans un navigateur, le texte (alphabet
latin) est aligné par défaut à gauche et c'est très bien comme ça. Les
paragraphes alignés à droite ou centrés diminuent la lisibilité et fatiguent la
lecture. Ils conviennent bien pour des textes courts: titre, surtitre, légende,
annotation.
Un texte justifié est un texte dont la longueur des lignes est identique pour
un même paragraphe, à l'exception de la dernière ligne. Pour réaliser une
telle disposition, le logiciel ajoute des espaces plus ou moins importants
entre les lettres et entre les mots. Des études sérieuses ont démontré
qu'un texte en drapeau est plus accessible à l'œil. Les fins de lignes
servent de repère visuel. D'un point de vue esthétique, un alignement
justifié donne un résultat plus agréable et une impression de plus grande
régularité.

8
Rabat 2011- Comment faire un projet web? Manuel de Style Web

La justification en pratique
Voir:
(http://www.tutoweb.be/typog
raphie/texte-justifie/).
Il faut penser à la longueur de
ligne.
Il devient donc extrêmement
délicat d'imposer une
justification surtout pour des
lignes courtes. L'alignement traditionnel à gauche est un choix
judicieux et souvent plus pertinent surtout à l'heure de la multiplicité
des supports: écran d'ordinateur, TV, projecteur, iPod, etc.
http://www.tutoweb.be/typographie/texte-justifie/

Voir: http://elpais.com (izda) // http://www.almassae.ma/

9
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Le texte. L'interlignage
L'interlignage doit également tenir compte de l'œil de la police. Plus
l'œil est grand, plus grand sera l'interlignage. L'espace entre les lignes
d'un Georgia sera différent d'un Times. Idem pour la longueur de ligne:
de longues lignes obligent à augmenter l'interlignage pour faciliter le
saut de l'œil au début de la
ligne suivante. D'autres
facteurs influencent le choix
de l'interlignage comme la
graisse, la justification, le
choix typographique, etc.
http://www.tutoweb.be/typographie/texte-justifie/

10
Rabat 2011- Comment faire un projet web? Manuel de Style Web

En résumé, le site web serait conçu et mis en œuvre par


l’informaticien/ne avec une typographie, un interlignage, un
alignement... par défaut. C'est possible que notre site ait un éditeur de
texte similaire à Word (WYSIWYG: "What You See Is What You Get")
pour nous aider à mettre nos contenus, mais, on recommande de ne
pas en abuser.

11
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Les liens
C'est important que notre page renvoie bien à d’autres pages, parce
que cela augmente l’optimisation dans les moteurs de recherche, et
nous collaborons aussi à partager l'information sur la toile.
D'habitude, les liens sont marqués avec une couleur différente, ou un
soulignement, pour aider les lecteurs.
Nous pouvons écrire nos contenus en mettant les liens appropriés, mais
il ne faut pas oublier qu’il n’est pas poli de mettre un lien brisé.
De plus, un texte plein de liens peut rompre l'homogénéité de la page,
parce que les couleurs des liens peuvent distraire de la lecture.

12
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Les barres de défilement


Il serait préférable qu’au moins la page principale se voie sur plein
écran; si ce n’est pas possible, il faudrait qu’au moins la largeur ne soit
pas plus grande. La barre de défilement
horizontale est horrible.

13
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Les couleurs
... ne sont pas les mêmes que sur le papier.
Il y a des couleurs pour le web. Si on écrit
avec l'éditeur WYSIWYG, on choisira les
couleurs que notre informaticien/ne a
choisies précédemment.

14
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Les images

Le poids de l'image
Les navigateurs doivent télécharger tous les fichiers de la web, et aussi
les images. Habituellement un texte est moins lourd qu'une image.
C'est pour ça qu’il n’est pas recommandé de mettre beaucoup d’images
dans une même page.
Aussi, le poids de l'image est très important. Il dépendra de ce que le
navigateur peut supporter, mais en général on téléchargera des images
de moins de 1MB). Plus elles sont petites, mieux c’est. Pour faire les
images petites, il faudra penser à la taille, à la résolution et au format)

15
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Les formats de fichiers graphiques

• JPG comprime avec un taux de perte réglable des images codées


en 24 Bits (Mode RVB). Le poids du fichier est inversement
proportionnel au taux de compression, la qualité de l’image
également). JPG ne permet aucune transparence. Ce format
convient aux photographies et aux images comportant de nombreux
effets de matière.

16
Rabat 2011- Comment faire un projet web? Manuel de Style Web

• PNG8 ou GIF compriment sans pertes des images codées en 8 bits


(Mode Couleurs indexées ou Niveaux de gris). GIF est un format
propriétaire tandis que PNG8 est un format libre prôné par le
W3C. Ils ne permettent pas plus de 256 couleurs mais permettent
une transparence par index (une couleur transparente). Le poids
du fichier est proportionnel au nombre de couleurs et à la structure
du fichier. Ces formats conviennent aux logos, pictos, images en
aplats de couleurs ou dessins vectoriels.

17
Rabat 2011- Comment faire un projet web? Manuel de Style Web

• PNG24 comprime sans pertes des images codées en 24 Bits


(Mode RVB). Il est un format libre prôné par le W3C et permet la
transparence par degré. Il n’est malheureusement pas bien
supporté par tous les navigateurs (Explorer par ex.) et produit des
fichiers plus lourds que JPG. Ce format convient aux images
comportant de nombreux effets de matière et de la transparence et
est idéal pour importer en Flash des images Bitmap détourées (des
silhouettes par ex.).
http://arts-numeriques.net/spip.php?article72

http://www.hooping.net/faq-formatos-imagenes.aspx#jpeg

18
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Le texte alternatif pour les images


Le texte alternatif c'est la façon dont le navigateur montre l'image si
elle n’est pas chargé. Par exemple, les personnes aveugles "lisent" avec
un lecteur tous les éléments de la page, ainsi que les images.
Aussi, le texte alternatif montre aussi un petit cadre sur l'image quand
nous mettons la souris dessus. Il est utile pour en savoir plus.
En ayant à l’esprit l’accessibilité, nous mettrons un texte alternatif qui
décrive le mieux l'image. Par exemple: "Photo de la réunion de l'AMDH
à Rabat", ou "Graphique de la structure d'un logiciel", ou "Logo de
l’association..."

19
Rabat 2011- Comment faire un projet web? Manuel de Style Web

La taille et la résolution de l'image


Qu’est ce que c’est? La taille correspond à la largeur et la hauteur de
votre image. La résolution d’une image correspond quant à elle au
nombre de points par unité de surface de l’image, soit le rapport entre
le nombre de pixels et les dimensions.
Pourquoi? Puisque votre image est destinée au web une résolution de
72 pixels par pouce suffit amplement. La taille dépend en revanche
de l’utilisation que vous voulez en faire, mais il faut envisager les
recommandations que nous fera l'informaticien/ne pour chaque partie
de notre page.
http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-son-site-pro#resolution-et-
taille

20
Rabat 2011- Comment faire un projet web? Manuel de Style Web

21
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Multimédia

(audio, diaporama, vidéo, animations)


Pour insérer d’autres éléments multimédias que nous avons sur notre
ordinateur, comme les audios, vidéos, diaporamas ou animations, on
envisagera aussi le poids de l'élément.
Mais, d'habitude, on pourra intégrer ces éléments qui viennent d'un
autre site web dans le nôtre. C'est la façon de faire la plus populaire,
parce qu’ héberger des vidéos sur notre serveur peut être difficile. Par
contre, nous pouvons les héberger sur des sites comme YouTube, Flickr,
Scribd...
Voir: http://christian.aubry.org/2010/06/integrer-une-video-youtube/

22
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Références
• http://creatuweb.espaciolatino.com/tutorhtml/tema21.html (en espagnol)

• http://www.ecrirepourleweb.com/ergonomie/des-besoins-des-utilisateurs-2-comportements

• http://www.tutoweb.be/typographie/texte-justifie/

• http://www.tutoweb.be

• http://arts-numeriques.net/spip.php?article72

• http://www.hooping.net/faq-formatos-imagenes.aspx#jpeg

• http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-son-
site-pro#resolution-et-taille

• http://christian.aubry.org/2010/06/integrer-une-video-youtube/

• http://www.webstyleguide.com/wsg2/style/online-style.html

• http://www.webtaller.com/manual-estilo-web/indice_manual_estilo_web.php

23
Rabat 2011- Comment faire un projet web? Manuel de Style Web

Cette oeuvre est mise à disposition selon le contrat


Attribution-ShareAlike 3.0 Unported disponible en ligne
http://creativecommons.org/licenses/by-sa/3.0/ ou par
courrier postal à Creative Commons, 171 Second Street, Suite
300, San Francisco, California 94105, USA.

24