DirecteurArtistique.net | Utilisation des feuilles de styles

DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
votre e-mail
Accueil
Team Freelance
Devenir membre
Annuaire des créatifs
Dossiers
Ressources
Contact
Espace membres
Bienvenue Stéphane BAZAN !
Mettre à jour mes infos
Modifier mon mot de passe
Supprimer mon compte
Statut de votre profil : non publié
Soumettre mon profil
Dossier à la Une
Publicité en ligne
Interview
Thierry Aymard - Responsable du laboratoire créatif de Wanadoo Régie
"les dispositifs et le choix des formats atypiques restreints à la bannière ou
au skyscraper n’ont jamais donné au web une vraie crédibilité d’un support
média pour les annonceurs." D.A. et responsable du laboratoire créatif de
Wanadoo Publicité, Thierry Aymard scénarise et créé de nouveaux formats
publicitaires pour les campagnes des annonceurs sur l’ensemble des portails
de Wanadoo.
Crédits : Benoit DROUILLAT
Mis à jour le : 21 février 2005
DOSSIERS
1 sur 7
04/03/2005 11:51
DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
Standards du Web
Utilisation des feuilles de styles CSS en conception web
En général méconnues ou mal utilisées par les graphistes, les feuilles de
style ont pourtant atteint aujourd’hui un degré de sophistication et de
richesse qui en font une véritable révolution dans le monde du design web.
L’apprentissage du code CSS peut paraître long et complexe, mais au final,
leur utilisation apporte des avantages considérables.
Crédits : Thierry Bultingaire
Mis à jour le : 18 novembre 2004
1) Le standard CSS dans la conception web
a) Le standard CSS
Les feuilles de styles en cascade CSS (Cascading Style Sheet) sont des
gabarits de styles écrits dans un langage normé appelé aussi CSS.
Comme le HTML, le code CSS est un standard validé par une instance qui
fait des recommandations sur le Web, le W3C. Des versions de ces normes
sont mises à jour aux cours des années et portent un numéro.
Actuellement, la dernière version de la norme CSS est CSS2. Il faut ensuite
un certain temps pour qu’elle soit adoptée massivement sur le Net.
Ce code CSS permet d’isoler tous les attributs graphiques d’une page web
de manière propre. Ces attributs concernent à la fois l’agencement, le
positionnement, la couleur, l’image de fond, les polices de caractère, la
taille et la forme d’éléments (puces, lettrines, ...), les comportements
graphiques (survol d’un lien par la souris par exemple). De manière plus
générale, CSS s’utilise pour le rendu d’un contenu, sa mise en forme.
b) Ré-apprendre le HTML
HTML ( Hyper Text Markup Language ) est un langage sémantique. C’est à
l’origine, un langage balisé qui structure un contenu. De même que l’on
structure un livre en préface, introduction, chapitres, conclusion... on balise
un contenu en HTML avec un titre, un intertitre, un paragraphe, une citation,
une liste, etc...
Le HTML n’étant pas destiné à l’origine pour la mise en forme d’un contenu,
les designers web l’ont détourné de sa mission première pour qu’il réponde
à leurs besoins en terme de fonctionnalités graphiques afin de reproduire la
richesse qu’ils connaissaient en production imprimée, notamment en faisant
intervenir massivement des images à la place de contenus textuels et en
détournant certaines balises, comme les tableaux à des fins de mise en
page.
Avec l’apparition des CSS qui fournissent une richesse considérable en
terme de fonctionnalités graphiques, on revient aux fonctions initiales du
HTML et à une séparation claire des rôles : le balisage HTML (ou XHTML ou
XML) pour structurer le contenu et CSS pour sa mise en forme.
2 sur 7
04/03/2005 11:51
DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
Par exemple :
<h1>Ré-apprendre le HTML</h1>
ne signifie pas que la phrase « Ré-apprendre le HTML » sera en police
Times New Roman de vingt pixels et en gras !
signifie simplement que le titre premier du document sera « Ré-apprendre
le HTML », c’est un langage sémantique !
c) Le couple HTML/CSS
Tout ce qui concerne la mise en forme, c-a-d le contenant d’une page, peut
et doit être externalisé dans la feuille de style. Au final, la page HTML est
épurée de tout ces éléments.
On l’aura compris, HTML et CSS s’occupent de tâches différentes, ainsi,
physiquement, ils sont constitués par deux fichiers séparés. Cela permet
d’utiliser la CSS avec d’autres pages HTML. On voit parfois du code CSS
dans la page HTML elle-même, l’intérêt est relatif car le style ne peut pas
être ré-utilisé.
d) Autres standards web
Le W3C est un organisme qui préconise des standards pour l’Internet, c’est
à dire des normes qui permettent un partage clair de l’information sur
Internet. Pour des raisons évidentes, l’industrie met en avant ses propres
formats et rechigne souvent à les rendre compatibles avec des standards.
Sans rentrer dans un débat pour ou contre les formats propriétaires, nous
tenterons de comprendre pourquoi il est important d’adopter des standards
lorsque cela est possible.
Format propriétaire Format standard associé
Images GIF
Images PNG
Images JPEG
Images PNG
Animation Flash
Animation vectorielle SVG
Sons RAM,WMA...
Sons Mp3 ou Ogg Vorbis
Document MsOffice PDF,PostScript ou format OpenOffice
Si les formats standards existent, leur mise en place n’est pas toujours
pertinente (pour le moment). Par exemple, pour les animations vectorielles,
le plug-in flash est le plus répandu, passer au SVG n’a pas trop de sens, car
cela obligerait l’utilisateur à en télécharger un nouveau. De plus, les outils
de développement SVG n’ont pas atteint l’ergonomie de ceux que vous
utilisez pour vos animations Flash.
2) Avantages des CSS
a) Fonctionnalités
Tout d’abord, il est important de préciser que l’on ne perd rien en terme de
richesse graphique. Tout ce que l’on faisait avant, en mélangeant attributs
graphiques et code HTML, est faisable aujourd’hui, uniquement avec les
CSS. Il suffit de regarder ce que font les contributeurs des sites CSS Zen
3 sur 7
04/03/2005 11:51
DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
Garden ou CSS Vault pour s’en convaincre.
Mieux, les feuilles de style permettent d’adapter le rendu en fonction du
média de sortie. Lors de la déclaration de la feuille de style on peut préciser
pour quel média elle est destinée. Si le rendu à l’écran doit être différent de
celui à l’impression, il suffit de créer une feuille de style propre à
l’impression.
Pour aller plus loin, les informations d’un même site peuvent être
visualisables sur écran, sur papier, et plus tard sur un PDA et sur un
téléphone mobile, et de façons différentes, simplement en sélectionnant la
bonne feuille de style pour chacun de ces médias. On voit déjà un autre
avantage, l’économie de code.
La norme CSS3 promet des avancées très intéressantes comme les arrondis
de bords, elle permettra aussi d’embarquer une police de caractère si
celle-ci est peu répandue.
b) L’organisation
La séparation de la page HTML et de la feuille de style est à l’image de ce
que devrait être l’organisation des compétences dans la conception de sites
web. La conception de la page HTML, la structuration de son contenu est le
rôle d’un responsable éditorial, et la création d’images et la mise en forme
du contenu le métier du graphiste ou du designer web. Deux technologies
différentes pour deux métiers différents. Cela demande de repenser en
profondeur la façon de concevoir des sites.
Donc l’utilisation des CSS permet au final de recentrer le métier du
graphiste sur l’essentiel. Dans le meilleur des cas, le graphiste n’a à
travailler que sur les images du site et un seul fichier CSS ! On peut
d’ailleurs voir les images comme une forme "externalisée" du style d’une
page, puisqu’elles constituent des fichiers autonomes et ré-utilisables.
c) Ré-utilisation et évolution
Le principal intérêt de passer aux CSS est de ré-utiliser un style par
plusieurs pages d’un site (en cascade). L’externalisation dans un fichier
permet par simple appel dans la page d’utiliser le style sans avoir à le
recoder.
Aujourd’hui de plus en plus de sites web ne sont plus des sites statiques,
mais des sites dynamiques. C’est à dire que le contenu du site n’est pas
écrit en dur dans le code HTML, mais dans une base de donnée, ce que l’on
appelle généralement le back-office. Ceux -ci doivent être rapidement
modifiables sans toucher au code HTML. Les blogs, les sites de publication
de news ou CMS (Content Management System) en sont quelques exemples.
Bref, le contenu du site évolue sans que le site n’aie à être reprogrammé.
On peut atteindre ce même degré de flexibilité pour la couche graphique
avec les CSS. Si un site doit adopter une autre charte graphique sans
changer son contenu ou son organisation, il suffit de modifier le fichier CSS.
Ceci est un avantage certain en terme de maintenance, de pérennité,
comme le re-développement est beaucoup plus simple, on parle toujours
d’économies.
4 sur 7
04/03/2005 11:51
DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
d) L’accessibilité
Ne nous voilons pas la face, même s’il y a une volonté forte des services
publics pour rendre accessibles les sites institutionnels aux handicapés,
pour les entreprises, cela se fera plus pour des questions d’image de
marque ou de clientèle. Dans ce domaine, l’utilisation des CSS est un vrai
pas en avant . Pour les aveugles et les mal-voyants, le W3C/WAI propose
des préconisations plus étendues, incluant par exemple l’utilisation
d’"access keys" et d’accès rapide au contenu sans passer par un menu.
De la même manière, un moteur de recherche peut être comparé à un
internaute non-voyant. Dans sa phase d’indexation, se baladant de liens en
liens, il lit les pages web textuellement et en tire l’information qu’il juge
intéressante pour la stocker en base de donnée. Lorsqu’une page web est
indexée par un moteur de recherche, le fichier HTML est donc simplement lu.
Il n’est donc ni sensible à l’ergonomie, ni au graphisme du site, mais à
l’organisation de son contenu. D’où l’intérêt de purger le code HTML de tout
élément graphique et d’en organiser proprement le contenu, bref utiliser des
CSS. Rappelons que d’autres méthodes permettent de renseigner le moteur
de recherche lors de son indexation : les métawords, titres, dates, auteur,
contacts. Aujourd’hui, beaucoup d’entreprises payent cher leur
référencement commercial pour figurer aux premières places des résultats
de recherche : elles payent bien souvent le prix d’une mauvaise conception
de leur site ! Adopter les feuilles de style permet donc une meilleure
indexation par les moteurs de recherche et donc un meilleur référencement,
ce qui est très vendeur pour une entreprise.
Reste un autre handicap, celui d’avoir choisi (ou pas) un autre navigateur
qu’Internet Explorer. Il y a quelques années on développait même deux
versions pour un même site, selon que l’utilisateur final possédait Netscape
ou IE. En utilisant les standards CSS, on s’affranchit théoriquement de cette
problématique en le rendant accessible à tous, car dans l’ensemble les
dernières versions des navigateurs actuels reconnaissent les standards.
Nous verrons plus loin qu’il existe cependant quelques différences entre les
navigateurs.
3) Les quelques inconvénients
a) Se former
Se former et acquérir la maîtrise du code CSS prend du temps. Certains
outils peuvent aider dans cet apprentissage (ils feront l’objet d’un autre
dossier), mais actuellement aucun ne peut générer du code CSS de façon
automatique ou wysiwyg. Il faut donc commencer par regarder le code
source, imiter et apprendre. Cela peut paraître laborieux, mais finalement,
cela ressemble à l’apprentissage du codage en HTML aux débuts du web.
De plus, il faut revoir la façon dont on code en HTML, mais cela est plus
facile car c’est plus un remise en question de la structuration que du
codage.
b) Petites différences entre navigateurs
Pour une grande majorité, les internautes utilisent IE6. La popularité de ce
5 sur 7
04/03/2005 11:51
DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
navigateur n’est absolument pas une preuve de qualité, à la fois en terme
de rendu, de fonctionnalités et de respects des normes du W3C. Il arrivera
donc certainement des différences d’affichage entre IE et les autres
navigateurs. Bref, il faudra faire des adaptations pour corriger ces
anomalies de rendu, ou préciser que votre site est optimisé pour des
navigateurs alternatifs : dans cette catégorie, nous mettrons tous les
autres navigateurs, les plus connus étant : Safari, FireFox, Netscape ou
Mozilla, Opera.
Qualité du support des fonctionnalités CSS2
Navigateur
Qualité
Internet Explorer 4
Très mauvais
Internet Explorer 5
Très mauvais
Internet Explorer 5.5
Moyen
Internet Explorer 6.0
Bon
Netscape 4
Très mauvais
Netscape 6 (Mozilla- FireFox)
Très bon
Safari
Très bon
|Opera 3|Mauvais| |Opera 4|Très bon|
Conclusion
L’utilisation des standards CSS dans la conception web est une garantie
d’accessibilité, de pérennité, de ré-utilisation. Cela a un coût au départ en
terme de formation et d’apprentissage, mais au final les avantages ne sont
loin d’être négligeables. Nous aborderons dans un autre dossier les outils
CSS les plus adaptés, ainsi que des exemples pratiques de feuilles de style.
Tous les dossiers
Penser le design interactif en amont
Améliorer l'expérience utilisateur d'un site web
Formaliser les livrables d'un projet web
Mettre les technologies au service de la création
Renouveler la publicité en ligne
Les articles de ce dossier
Les contraintes HTML des projets de design interactif
Utilisation des feuilles de styles CSS en conception web
Tristan Nitot - Fondateur de Mozilla Europe
Notions-clés de l'article
6 sur 7
04/03/2005 11:51
DirecteurArtistique.net | Utilisation des feuilles de styles CSS en c...
http://www.directeurartistique.net/v5b/article.php3?id_article=102
Accessibilité
CSS (feuille de style)
Intégrateur HTML
Nos partenaires
Ergolab
Les Entreprenautes
Nematis
© 2003-2004 DirecteurArtistique.Net
Contact
Mentions légales
7 sur 7
04/03/2005 11:51