Conception de site web

Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)

Le design dans le navigateur est une technique de Webdesign qui fait l’impasse sur la maquette Photoshop. Derrière ce concept se trouve l’idée selon laquelle dans « Webdesign » il y a d’abord « Web » : pourquoi commencer le travail dans Photoshop pour refaire ensuite presque la même chose en HTML et en CSS ? Surtout quand la prise en charge progressive de CSS3 par les navigateurs récents autorise des effets graphiques qui nécessitaient autrefois de nombreuses images et un marquage HTML surnuméraire…

Travailler directement dans le navigateur est l’occasion de pratiquer l’amélioration progressive ou la dégradation gracieuse selon le côté où l’on se place. L’amélioration progressive est une méthode de conception centrée sur le contenu : les effets graphiques sont ajoutés dans un deuxième temps pour les navigateurs modernes. La dégradation gracieuse privilégie l’apparence : utilisation des dernières technologies en première intention et mise en place de fallbacks pour que la page reste fonctionnelle sur les configurations plus modestes. Opposées en apparence, ces deux approches sont souvent complémentaires dans la pratique.

Dans ce tutoriel, après avoir crayonné une esquisse de la page sur le papier et choisi une palette de couleur, nous passerons en revue les balises HTML5 utilisées dans cet exercice de style. Nous verrons comment obliger Internet Explorer à prendre en compte ces nouveaux éléments. Pour finir, nous ajouterons du « volume » à la page grâce à la magie de CSS3. La page se présentera sous son meilleur jour dans les dernières versions de Firefox, Chrome ou Opera, tout en restant totalement fonctionnelle et très proche visuellement de « l’original » dans Internet Explorer 6, 7 et 8 malgré l’absence des effets.

1. Baliser le contenu

Pour mettre en œuvre le principe de l’amélioration progressive, il est important de commencer par le contenu. L’idéal est de faire un découpage HTML du matériel fourni par le client qui soit indépendant de toute mise en forme. La mise en page en plusieurs colonnes s’effectuera en ajoutant des balises `div` aux endroits stratégiques. N’hésitez pas à ouvrir le fichier index.php dans votre navigateur et votre éditeur préféré pour avoir une vision globale du code et suivre les explications sur l’utilisation des nouvelles balises HTML5.

Il s’agit bien du degré zéro de l’amélioration progressive mais cette page est déjà fonctionnelle dans tous les agents utilisateurs ! Son affichage est garanti sur tous les périphériques affichant du HTML quelle que soit leur ancienneté ou leur résolution d’écran (même les lecteurs vocaux devraient s’y retrouver). Il s’agit véritablement de la matière première brute de fonderie qu’il faudra styler pour aboutir à quelque chose de plus flatteur visuellement.

2. Ébauche de la page

Une fois que vos contenus textes et images sont été correctement balisés avec les balises HTML appropriées, il est temps d’ouvrir votre bloc-note préféré pour griffonner l’allure générale de votre page web :

Hé, pas besoin de Moleskine, n'importe quel cahier "premier prix" fera l'affaire !

Pas besoin de trop détailler. Il faut seulement faire ressortir la structure générale du site : empagement, en-tête, pied de page, nombre et emplacement des colonnes pour les articles et les barres latérales. Cette esquisse sert surtout de point de repère pour éviter de se disperser dans le feu de l’action.

3. Choisir les couleurs

Adobe Kuler est un outil en ligne très complet et intuitif pour créer vos palettes de couleurs

Le succès d’un site web repose en grande partie sur l’harmonie des couleurs utilisées. L’application en ligne Kuler d’Adobe contient plusieurs milliers de palettes de couleurs modifiables de manière intuitive. Nous récupérerons les valeurs HEX (hexadécimale) et RGB (Red, Green, Blue) des couleurs que nous auront sélectionnées.

4. Squelette de page HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Une page HTML5...</title>
</head>
<body>
<p>...avec du contenu.</p>
</body>
</html>

La structure de base d’une page HTML5 se différencie peu des anciennes versions. La syntaxe du DOCTYPE (Document Type Declaration, ou DTD) est simplifiée et ne propose qu’un seul mode : fini le choix cornélien entre Strict, Transitional ou Frameset !

En HTML5 le doctype s’écrit en bas de casse mais pour des raisons de compatibilité avec les anciennes conventions héritées de SGML (Standard Generalized Markup Language), il est recommandé d’écrire DOCTYPE en lettres capitales. La présence d’une DTD permet aux moteurs de rendu des navigateurs web d’afficher les pages dans un mode standard (Standard Complient Mode).

J’utilise l’IDE (Integrated Development Environment) Netbeans (Notepad++ est aussi un très bon choix) et le navigateur Firefox équipé de Firebug. Je teste ensuite les pages dans un maximum de navigateurs : Google Chrome, Opera, Safari, Internet Explorer 6, 7, 8 (9 Preview) mais aussi sur des périphériques mobiles à résolution d’écran limitée (téléphone portable, Netbooks, iPhone, etc.).

5. Préparer Internet Explorer pour HTML5

<!--[if lt IE 9]>
<script>
    // http://remysharp.com/2009/01/07/html5-enabling-script/
    /*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/w+/g,function(n){document.createElement(n)})@*/
</script>
<![endif]-->

Internet Explorer ne prend pas en charge les nouvelles balises HTML5. Toutefois, il est possible de les injecter dans le DOM (Document Object Model) à l’aide de quelques lignes de Javascript à placer dans la balise `head`. Les commentaires conditionnels permettent de cibler toutes les versions inférieures à Internet Explorer 9 (soyons optimistes !).

6. Structure générale de la page

Rien de tel qu'un croquis réalisé avec Illustrator pour y voir plus clair ^__^v

Là où HTML 4.0.1 n’offrait grosso modo qu’une balise `div` générique pour « div-iser » nos pages web, HTML5 propose différents éléments permettant d’affiner la structure d’une page : `header`, `hgroup`, `section`, `aside`, `nav`, `article`, `footer`, etc. Malgré des intitulés apparemment sans ambiguïté, l’utilisation de ces nouvelles balises n’est pas toujours simple : la compréhension des contenus fournis par le client est plus importante que jamais, ce qui devrait booster la dimension littéraire de votre intégrateur web 😉

7. `header`

Il s’agit de l’introduction du site ou d’une section de la page. Ici, nous avons trois niveaux d’en-tête. Un header contient généralement un ou plusieurs niveaux de titre `h1` – `h6` ou un groupe de titres `hgroup`. Il peut également abriter un formulaire de recherche, un menu de navigation, le logo ou tout autre élément en rapport avec la page ou le site web dans son ensemble.

8. `footer`

C’est en quelque sorte la conclusion de l’introduction du site ou de la section de la page auquel il se rapporte. Selon le contexte, `footer` peut contenir le copyright pour l’ensemble du site ou la date de publication d’une note. Dans l’exemple, j’utilise `footer` (et `header`) au niveau du `body`, de `div#container` et de `article`. Cette balise n’est pas nécessairement située en fin de section : elle peut se trouver juste après la balise `header`. On pourra en effet vouloir regrouper visuellement toutes les informations relatives à un article.

9. `hgroup`

Cet élément a pour vocation de regrouper différents niveaux de titre à l’intérieur d’un élément `header`. Typiquement : le nom du site et sa Baseline ou un titre et un sous-titre. La subtilité de `hgroup` tient au concept d’Outline qui permet de souligner la structure d’une page (si `hgroup` contient un `h1` et un `h2`, seul le premier niveau sera pris en compte par l’Outliner).

10. `article`

Tout contenu indépendant susceptible d’être syndiqué dans un flux Atom ou RSS comme une note, une entrée de blog, un article de journal ou même un Widget interactif (un système de chat, par exemple) peut être enveloppé avec `article`. Cette balise peut également être imbriquée dans un autre élément `article` dans le cadre de commentaires laissés par les utilisateurs.

11. `section`

Une section est une portion plus ou moins importante de contenu avec au moins un niveau de titre. Tout ce qui se trouve à l’intérieur de `section` devrait pouvoir être isolé du reste et fournir une information autonome.
Pour faire simple, l’élément `section` ne devrait pas être utilisé :
Pour l’application de styles CSS ou d’ancrage pour du Javascript (préférez l’élément `div`),
Si les éléments `article`, `aside` ou `nav` sont plus appropriés,
Si vous n’avez pas de titre à mettre – et non, le display: none n’est pas une option 😉

12. `nav`

C’est un élément plus ambiguë qu’il n’y parait. On a envie de l’utiliser pour envelopper toutes les balises `ul` et `ol` de la page dès lors que les liens qui s’y trouvent pointent vers le site, mais cette balise est avant tout destinée à la navigation principale !
Un site web peut comporter plusieurs systèmes de navigation comme la listes des pages, les catégories ou les tags. Si ces listes sont de bonnes candidates pour la balise `nav`, il faut garder à l’esprit le concept d’Outline : la balise `nav` se porte mieux accompagnée d’un niveau de titre, en l’absence duquel il est préférable d’utiliser une balise `div`.

13. `aside`

Cet élément regroupe les éléments tangentiellement reliés au contenu. Il peut être utilisé de deux manières : dans une balise `article`, il pourra regrouper la définition des termes employés, les notes additionnelles, etc. tandis qu’en dehors, il pourra servir de barre latérale (Sidebar) pour accueillir des éléments de navigation, une liste de liens (Blogroll) ou encore la présentation de l’auteur.

14. Appliquer un reset CSS

Les navigateurs possèdent chacun une feuille de style par défaut, une sorte de degré zéro du design pour styler les balises HTML : les listes présentent des puces et sont en retrait, les titres ont des tailles relatives à leur niveau hiérarchique, `strong` est en gras et `em` en italique… Le fichier global.css est là pour mettre les navigateurs au diapason. Il est composé d’une version modifiée du reset CSS d’Eric Meyer et d’une partie du fichier typography.css du framework CSS Blueprint.

Le fichier style.css est composé de la redéfinition des styles via la règle @import global.css et des règles CSS spécifiques à la page index.php ainsi qu’aux autres pages du site, le cas échéant.

15. Styler les balises `html` et `body`

html {
    background: #380707;
    color: #CBB388;
}
body {
    position: relative;
    width: 960px;
    margin: 6em auto;
    padding: 1.5em 9px;
    border: 1px solid #1F0404;
    background: #590B0B;
}

La balise `html` reçoit la couleur pour le fond du Viewport (la partie visible de la fenêtre) et la couleur par défaut pour l’ensemble des textes. Dans un premier temps, on indique les propriétés qui s’afficheront dans tous les navigateurs. Le fait de styler la balise `body` permet d’économiser la balise `div` qui sert généralement de Container pour l’ensemble de la page.

Les effets CSS3

16. Les ombres portées et les dégradés

body {
    /* Degrade */
    background: -moz-linear-gradient(-90deg,#590B0B,#1F0404);
    background: -webkit-gradient(linear, left top, left bottom, from(#590B0B), to(#1F0404));
    /* Ombre portee */
    -webkit-box-shadow: #000 0px 0 16px -1px;
    -moz-box-shadow: #000 0px 0 16px -1px;
    box-shadow: #000 0px 0 16px -1px;
}

Dans un deuxième temps — on améliore progressivement –, on ajoute un dégradé linéaire et une ombre portée. Les navigateurs n’affichant pas ces propriétés utiliseront le background: #590B0B et la propriété border: 1px solid #1F0404 de l’étape précédente.

17. Textes ombrés

#brand h1 {
    text-shadow: rgba(0,0,0,0.7) 2px 3px,rgba(255,255,255,0.7) 0 -1px;
}

La propriété text-shadow applique une ombre portée sur les textes. L’utilisation conjointe de rgba() autorise un effet de transparence pour alléger l’effet et le fondre dans la page. Ici, deux ombres portées décalées sont appliquées : une vers le haut et l’autre vers le bas.

18. Coins arrondis

.roundies {
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /*Safari, Chrome */
    -khtml-border-radius: 5px; /* Linux */
    border-radius: 5px; /* CSS3 */
}

Dans la mesure où cette propriété est utilisée plusieurs fois avec les mêmes valeurs, les bords arrondis sont regroupés dans une classe CSS. Ici, le rayon pour l’arrondi est de cinq pixels pour tous les angles. Pour arrondir les angles supérieurs gauche et droit uniquement, il suffit de remplacer 5px par 5px 5px 0 0 et le tour est joué ! N’hésitez pas à tester plusieurs combinaisons. Il existe un générateur de propriétés CSS3 interactif pour se faciliter la tâche.

19. Égaliser les colonnes avec Javascript

<script src="column.js"></script>
<script>
    var divs = new Array('articles','sidebar-1','sidebar-2');
</script>

Dans le modèle de page terminée vous avez peut-être remarqué que la barre latérale du milieu s’allonge en fonction de la hauteur du contenu principal. Cet effet, bien qu’optionnel pour la compréhension du contenu, n’en est pas moins intéressant visuellement (le contenu est roi, mais ce n’est pas une raison pour oublier l’esthétique !). Pour cela, j’utilise un script très léger (column.js) qui harmonise les colonnes selon la plus haute parmi celles qui sont passées en paramètre. Ajoutez l’appel Javascript dans la balise `head` pour équilibrer les colonnes `div#articles`, `div#sidebar-1` et `div#sidebar-2`.

Pour aller plus loin

Bon à savoir

Cet article a paru en mai 2010 dans le Hors-Série n°5 du magazine Web Design consacré à HTML5, CSS3 et jQuery. Lire Webdesign Magazine — un Hors-Série n°5 spécial HTML5, CSS3 et jQuery pour plus d’information. N’hésitez pas à vous manifester pour ajouter votre grain de sel, en particulier sur sur partie concernant l’utilisation des balises HTML5 `header`, `hgroup`, `section`, `aside`, `nav`, `article`, `footer`, etc., d’autant plus que des changements ont pu survenir dans les Drafts du W3C depuis la rédaction de l’article.

Publié le par Bruno Bichet