Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire. 

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page.  Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Trucs et astuces CSS
• 390 ressources Javascript & jQuery
• Un site Web n’a pas forcément besoin de graphismes

Ce billet fait partie d’une série de notes rapides prises lors de ma lecture des spécifications HTML5. Aujourd’hui, c’est le commentaire de Romy qui me donne l’occasion de rebondir sur le découpage d’une page web avec HTML5 et plus particulièrement la balise section. Dans ce billet, je m’éloigne un peu du commentaire de Romy et je voudrais souligner qu’elle a parfaitement raison quand elle dit que le rôle des balises header et footer est clair mais que leur traduction en En-tête et Pied de page prête à confusion ; il faudrait peut-être introduire la notion de meta information.

La balise section

Dans l’article Éléments HTML 5 de structure on trouve un exemple de l’utilisation d’une balise section dans une balise article. Si j’ai bien compris la partie des spécifications consacrée à la notion de Sectioning Content et à l’élément section, ce dernier agit comme une «remise à zéro» de la hiérarchie des niveaux de titres.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading

Mettre une balise section à l’intérieur d’une balise article n’est donc pas l’idéal : le h1 du titre de l’article (et les éventuels éléments présents dans son header) n’est plus en relation avec les niveaux de titres situés dans le corps de l’article lui-même. Et ce, d’autant plus que l’élément article possède également le statut de Sectioning Content. Il vaudrait mieux faire le contraire.

Ainsi, au lieu de :

body
    header
    div#content
        article
            header
            section

body
    header
    section#content
        article
            header
            div.hentry

La balise nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

L’élément nav possède également des propriétés de Sectioning Content. Il ne serait donc pas très judicieux de l’englober avec une balise section. Celà dit, il est facile de confondre la balise nav avec ce que l’on appelle la Sidebar. Une barre latérale contient souvent des liens qui pointent vers des pages intérieures du site (catégories, derniers billets, commentaires récents, etc.) mais on y trouve aussi toute sortes de contenus qui ne pointent nullement vers le site (textes de présentation, blogroll, publicités, listes des derniers tweets, etc.).

Pour ma part, je réserverais l’élément nav aux menus de navigation tels que : Breadcrumbs, listes des pages et des catégories, pages suivantes et précédentes, liens d’évitement, etc.

Ce qui m’amène à continuer la structure précédente :

body
    header
    section#content
        article
            header
            div.hentry
    section#sidebar-1
        nav#category
        section#blogroll

Bref, HTML5, des fois c’est facile, des fois… pas facile. Rassurez-vous (ou pas) : j’aurais l’occasion de revenir sur HTML5 plus souvent qu’à mon tour car écrire sur ce sujet me permets de sortir un peu la tête des spécifications !

Articles sur le même sujet

• HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»
• HTML 5 Outline — Quelques notes sur la structure des pages Web avec h1 et section
• HTML5 — Repenser le découpage des pages web et des contenus
• The HTML Framework Project | Phase 1.1 — définir
• Quelques notes — Programme de formation HTML & CSS

Les nouvelles balises introduites par HTML5 ne sont pas très évidentes à utiliser. Plus que jamais, le contenu est roi et tout dépend de lui. Les notions de Sectioning Content implicites ou explicites risquent de se transformer en poil à gratter pour les intégrateurs web. Pour commencer, notre balise div préférée devra laisser du terrain à la balise section quand on pourra justifier d’un h1 à l’intérieur.

Ce titre de premier niveau mène la danse et pourra inspirer l’intitulé de l’id de la section. Plus que jamais, l’intégrateur web devra avoir une solide culture générale. Il lui faudra tout au moins s’intéresser suffisamment aux contenus qu’il met en page pour savoir où commencent et où finissent les idées de ses clients !

Durant mes tests, j’ai beaucoup hésité sur l’utilisation de la balise header. Celle que l’on pensait forcément prévue pour prendre la place de notre div id="header" ne s’est pas vu attribuée ce rôle de manière formelle et univoque dans les spécifications. Elle pourra servir dans plusieurs contextes en conjonction (ou pas) avec une balise footer ; mais pas le footer que l’on place généralement tout en bas de la page page… Dans les faits, l’utilisation des balises header et footer est à géométrie variable.

Modèles de document HTML5

HTML5 introduit la notion de Sectioning Content. Pour faire simple, une section regroupe un ensemble de titres de plusieurs niveaux formant une unité logico-sémantique. Lorsqu’un deuxième h1 est nécessaire, c’est qu’on se trouve dans une autre «section».  Les sections sont implicites et suivent la hiérarchie des balises h1, h2, etc. mais on peut les formaliser avec les balises article, aside, nav ou… section.

La première remarque qui m’est venue à l’esprit en voyant la liste des balises ayant le statut de «section», c’est qu’il manquait les balises header et footer !

Les éléments HTML se retrouvent dans zéro ou plusieurs catégories en fonction de leurs caractéristiques.

Le modèle de document HTML5 se compose de : metadata content, flow content, sectioning content, heading content, phrasing content, embedded content et interactive content. (Source : W3C)

Pourquoi les balises header et footer n’en font pas partie ?

Très bonne question. La premier élément de réponse tient certainement à la nature équivoque de ces balises : elles peuvent se trouver à l’intérieur des sections introduites par body, article, nav, aside ou section pour regrouper le titre (ou les titres avec hgroup) et des informations complémentaires sur le contenu (date, auteur, etc.).

La deuxième, c’est peut-être pour les utiliser afin de regrouper des informations dans l’en-tête et le pied de page du site, sans les couper des autres informations. De cette manière, les informations contenues dans header et footer concernent toute la page (voire tout le site web), ce qui est plus logique.

Reste le Sectioning implicite. Est-ce à dire qu’il faut éviter d’utiliser des niveaux de titre dans notre en-tête et notre pied de page ?

Articles sur le même sujet

• HTML5 — Et si on évitait la balise «section» dans une balise «article» ?
• The HTML Framework Project | Phase 1.1 — définir
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Quelques notes — Programme de formation HTML & CSS
• 390 ressources Javascript & jQuery

Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide téléologique concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100^ème jour depuis la mise en ligne de css4design, une sorte de medley mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris.

… ou comment sortir « téléologique¹ » du même chapô que « mashup² »

Le design : centré, fixe, liquide…

C’est sur ces contraintes de structure mettant en jeu les balises XHTML que je voudrais m’attarder un peu en votre compagnie. Notre mise en pages doit-elle être de largeur fixe, ou variable ? Centrée, ou pas ? Il m’est difficile de choisir à votre place, mais en ce moment la tendance est de présenter des pages minimalistes de largeur fixe, centrées dans le navigateur.

Dans l’échantillon de code qui suit, on crée un container d’une largeur de 750 pixels, centré horizontalement grâce au raccourci margin: 0 auto. Ainsi, tout le contenu placé dans la balise identifiée par #container sera centré dans la page.

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     position: relative;
     width: 750px;
     margin: 0 auto;
     text-align: left;
}

C’est pourquoi, il est judicieux de mettre le padding et le margin des balises html et body à zéro. Par ailleurs, IE5 ayant du mal avec margin: 0 auto, on prendra soin de centrer l’ensemble du document avec text-align: center, et ensuite d’expliciter la valeur d’alignement du texte par défaut dans le container.

MAJ : Pour la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus.

Dans la plupart ces cas, le choix d’un design à largeur fixe permet de mieux contrôler le nombre de mots par ligne pour offrir une lecture confortable (qu’on trouve raremment dans les pages où le texte s’étire d’un bout à l’autre de la fenêtre du navigateur…). A condition toutefois de permettre l’agrandissement de la taille du texte, en utilisant des unités relatives em, ex ou %, à la place des px qu’IE ne sait pas agrandir…

Dans d’autres cas, ce choix est dicté par les difficultés liées à la conception d’un design liquide (ou fluide) comportant des visuels en haut, en bas, sur les côtés et dans les coins ! En effet, si la réalisation d’un design composé d’images qui se répètent verticalement est aisée, ce n’est pas toujours le cas lorsqu’on veut que la mise en pages s’adapte horizontalement et verticalement à la taille de la fenêtre (cf. mon billet «Design CSS : fixe, élastique ou liquide ?» pour plus d’information sur la question).

Une page web toute simple

La structure que l’on rencontre le plus souvent sur le web est composée d’un titre h1 suivi des différents niveaux de sous-titre h2, h3… le tout, agrémenté de texte p et d’image img. Notez que pour les images, on peut mettre la balise img dans la même balise p que le texte, ou dans sa propre balise p. On divisera ensuite (en fonction de la nature du contenu) le document en plusieurs parties avec les balises div dont c’est précisément la fonction.

Si l’on ajoute la gestion des colonnes, on obtient une structure qui ressemble à la plupart des pages que l’on trouve à portée de clic ; les différences étant souvent le fruit d’un travail sur l’identité visuelle et du soin apporté à la réalisation-intégration des divers éléments composant la page.

MAJ : Lire Conception dans le navigateur avec HTML5 & CSS3 sur le marquage structurel d’une page web avec HTML5.

Des colonnes avec float

Pour en revenir aux colonnes, la propriété float, associée aux valeurs right ou left, donnera rapidement forme à votre document, à condition de ne pas oublier le clear: right, left ou both pour ajouter un élément de type pied de page que nous voudrons voir, comme son nom l’indique, à la fin de notre page, et ce, quelque soit la hauteur des contenus respectifs de nos deux colonnes !

C’est vrai qu’Internet Explorer n’a pas toujours besoin que l’on explicite un clear après un float, contrairement aux navigateurs respectant les spécifications du W3C comme Firefox ou Opera. L’esprit humain non plus, puisqu’il faut souvent passer de bons longs moments avec les spécifications pour s’en convaincre. Quoiqu’il en soit, souvenez-vous que si votre div est placée correctement dans un navigateur et pas dans l’autre, c’est souvent la faute à float ;)

Manipulez, il en restera toujours quelque chose

Pour mieux observer ce phénonème, je vous propose quelques manipulations à faire chez vous sur un exemple de positionnement avec float. Tout est précisé dans le code source, mais pour les jedi, un résumé devrait suffire :

1. Dans #container, enlevez les commentaires autour de width: 900px;, réaffichez cette page dans IE6 et FF et observez le déplacement du footer dans FF.
2. Puis, dans #footer, enlevez délicatement les commentaires autour de clear: both, et réaffichez cette page dans IE6 et FF. Que s’est-il passé avec le footer ?
3. Pour terminer, remettez tout comme au début, et ajoutez du texte dans la sidebar. Que se passe-t-il ? Que faut-il faire ?

Tant que nous somme dans la float, et les colonnes, j’en profite pour vous proposer un autre exemple de mise en page sur une ou deux colonnes.

Pour la boite, vous prendrez quel modèle ?

Dès que l’on applique une largeur à un élément de type block, on prend le risque de tomber dans le maelström des différents modes de calcul concernant le modèle de boite : Internet Explorer a une façon bien à lui de mettre border, padding et zone de contenu dans le même sac, contrairement au modèle standard qui dissocie bien chaque élément dans le calcul final de la boite.

Grosso modo, un bloc de 250px de large avec un padding de 20px et un border de 5px donneront 250 + 20 + 20 + 5 + 5 = 300 pixels dans le modèle standard, tandis que cette valeur sera ramenée à 250 pixels sur IE, puisque la bordure et la marge intérieure seront assimilés à la zone de contenu :(

Ok, quelques mots sur le DocType switching… Ou comment forcer l’une ou l’autre interprétation des dimensions du modèle de boite. Pour résumer la fin de l’article d’Openweb cité plus haut, la plupart des navigateurs modernes (si si, même IE6) basculeront dans le modèle de boite standard si une DTD XHTML (strict, transitional ou frameset) est spécifiée dans l’en-tête de la page. Sauf pour IE6 (faut pas trop rêver non plus…) qui rebascule dans son modèle de boite propriétaire dès qu’il voit le méchant prologue XML…

Il existe de nombreux contournements (hacks) plus ou moins funky pour régler ce problème de compatibilité des modèles de boite. Pour ma part, je m’en tiens à une ligne de conduite simple : j’applique le padding aux éléments enfants du bloc qui possède une propriété width. Lorsque celà n’est pas possible, je spécifie une feuille de style pour IE en utilisant les commentaires conditionnels.

Si votre page contient des formulaires, je vous invite à lire ce billet sur la conception de formulaires sans tableau qui a gardé toute sa fraicheur ;) Souvenons-nous toutefois de ne pas troubler l’utilisateur avec des formulaires trop funkydéliques. L’utilisateur ne fait pas que remplir des champs de saisies, il donne un peu de lui-même : respectons-le !

Et comme vous voudrez certainement mettre de beaux visuels en fond de page, je vous propose ce billet sur l’utilisation, non pas d’un, mais de deux background pour enjoliver votre fond de page !

Il n’y a pas que les div dans la vie

Après la mise au point du squelette de notre page, nous allons nous occuper des autres éléments qui nous aideront à structurer le contenu. J’ai évoqué rapidement la balise h1 et ses petites soeurs h2…, h6 qui doivent être utilisées pour les titres et sous-titres de vos documents.

Par exemple, plutôt qu’un div id= »titre1″, on stylera la balise h1 pour le plus grand plaisir des moteurs de recherches et navigateurs alternatifs ! La balise p encadre les paragraphes ; blockquote sert lorsqu’on cite une portion conséquente de texte.

A noter que cette balise peut contenir d’autres éléments de type bloc, comme p ou table, mais la réciproque n’est pas vraie. Pour mieux connaître les mœurs subtiles des balises HTML, j’abuse de la bande passante de gotapi.com.

Lorsque la structure du contenu implique une idée de liste, le mieux, c’est encore, d’employer les listes ordonnées ol ou non ordonnées ul avec leur cohorte de li. Ces listes sont très pratiques et permettent de nombreuses fantaisies en matière de CSS.

Mais on oublie trop souvent les listes de définitions qui peuvent rendre de grands services, comme présenter la chronologie de ma loupanthère, par exemple… Le sujet des listes de définitions est inépuisable, ce qui n’est pas mon cas : je vous ai donc laissé quelques liens à suivre dans la linkographie.

Les éléments en ligne c’est pour aujourd’hui ou pour demain ?

Après sur survol des éléments de type block, il nous reste tout juste assez de temps pour jeter un oeil sur les éléments en ligne. J’utilise assez souvent les éléments suivants : samp pour spécifier les échantillons de code ; em pour l’emphase (en gros, ça met de l’italique) ; strong pour marquer un renforcement du texte (en gros, ça met du gras), q pour les citations courtes mais pas forcément vulgaires…, a pour les liens, etc.

Bon, c’est comme le café, je crois que ce n’est pas la peine d’en rajouter. Et puis vous êtes sûrement déjà parti faire un tour sur gotapi ou pire, sur bashfr où vous trouverez des vrais morceaux d’humour, pas comme ici :)

Et vous, quelles sont vos balises préférées ?

Linkographie :

Maxdesign

Sans doute l’un des meilleurs site au monde concernant les 1001 façons de styler les listes ;)

Selfhtml.org

Tout sur le formatage des listes.

Pompage

L’essentiel et un peu plus sur les listes de définitions.

Alsacreations

Utilisez les listes de définition pour structurer vos menus déroulants.

Giminik

Liste des attributs et événements associés à la balise dl

Articles sur le même sujet

• Trucs et astuces CSS
• Exercice de style CSS et HTML : table vs div
• Frameworks CSS + Reset CSS : design from scratch
• Design de formulaire HTML avec CSS
• Design CSS : fixe, élastique ou liquide ?

Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser ;)

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
            <meta http-equiv="Content-Language" content="fr" />
            <title>Un titre explicite contenant les mots-clés de la page</title>
            <link rel="icon" type="image/png" href="favicon.png" />
            <script type="text/javascript" src="/js/jquery.js"></script>
            <link media="screen" rel="stylesheet" type="text/css" href="/style.css" />
            <!--[if lt IE 7]>
                <script type="text/javascript" src="/js/ie7/IE7.js"></script>
            <![endif]-->
            <!--[if IE]>
             <link rel="stylesheet" type="text/css" href="/ie.css" />
            <![endif]-->
        </head>
        <body>
       </body>
</html>

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits