Initiation à la création d'un design extensible

Introduction du cours

Vous débutez dans le développement web ? Vous vous demandez comment réaliser un design qui s'adapte à l'écran de vos visiteurs ?
Vous êtes tombés au bon endroit. ;)
Je vais vous expliquer tout au long de ce tutoriel comment créer un design dit « extensible ». Mais avant de commencer à coder quoi que ce soit, quelques explications s'imposent.

Pour bien comprendre ce tutoriel, vous devez connaître les bases du XHTML/CSS. Si ce n'est pas le cas, lisez d'abord le tutoriel « Apprenez à créer votre site web ! » de M@teo21.

Un peu de théorieLa définition d'écran

Pour créer un bon design, il faut penser à plusieurs choses, notamment aux différents affichages possibles. En effet, en fonction du matériel et des configurations du visiteur, l'affichage d'un site peut varier.
Une des différences importantes est tout simplement la taille de l'écran et plus précisément sa définition.

Notez que les différences d'affichage ne se résument pas uniquement à la définition d'écran : par exemple, les personnes atteintes d'un handicap peuvent utiliser des lecteurs de pages pour naviguer sur Internet. Un site mal construit pourra donc être difficilement compréhensible, voire complètement illisible.
Cela fait partie de l'accessibilité qui est une des choses importantes à connaître. Si vous voulez en savoir plus, n'hésitez pas à lire ce tutoriel.

Qu'est-ce que la définition d'écran ?

La définition d'un écran est le nombre de pixels affichés en largeur et en hauteur. Une définition de 1024x768 indiquera donc que l'écran affiche 1024 pixels en largeur et 768 en hauteur. La définition d'écran est paramétrable dans les configurations de l'ordinateur.

La définition d'un écran est souvent confondue avec la résolution d'écran qui, elle, est définie en ppi (pixels par pouce).
On utilise à tort le terme résolution pour parler de la définition.

Les définitions actuelles

Il y a quelques années, les écrans les plus vendus étaient de format 4/3 et utilisaient une définition de 800x600 ou de 1024x768. Ces écrans étaient relativement carrés.
Depuis peu, le format d'écran tend à changer vers le 16/10, qui donne visuellement un écran plus large, plus rectangle. De nos jours, les écrans vendus dans le commerce sont donc quasiment tous beaucoup plus large que haut.
Cela dit, la définition la plus utilisée pour le moment reste le 1024x768 (4/3), bien qu'en baisse, suivi par le 1280x800 (16/10) qui arrive juste après. Les deux formats les plus utilisés actuellement sont donc totalement différents.
Enfin, la définition 1366x768 n'est pour le moment pas parmi les plus courantes, mais en forte progression et semble bien partie pour atteindre les premières d'ici quelques années.

Ces informations étaient vraies lors de la rédaction du tutoriel (février 2011).
Source : StatCounter.

Ce que ça implique pour le design

Quel problème peut engendrer le fait que deux formats d'écran totalement différents soient les plus utilisés ?
Le fait de passer d'un format plutôt carré à un format rectangle implique tout simplement de nouvelles marges. Voici la différence en image :

Le cadre orange correspond au format 1024x768 ; le bleu au 1280x800. On voit bien les marges à gauche et à droite qui font la différence entre les deux formats. C'est une chose à ne pas oublier lors de la création du design, notamment lors du choix de la taille d'un design fixe.

Le design fixe

Faire un design extensible est très bien, mais savoir quelle est la différence avec un design fixe est encore mieux. ;)

Définition

Un design fixe est un design qui ne bouge pas (évident, non ^^ ?). Plus concrètement, il s'agit d'un design composé d'éléments de taille fixe (donnée en pixels le plus souvent).
De ce fait, que l'écran du visiteur mesure 20 cm ou 2 m de largeur ne modifiera en rien l'emplacement des éléments les uns par rapport aux autres.
Votre site aura toujours la même taille (en pixels) et la même apparence (il ne se déformera pas).

Avantages et inconvénients

Un design fixe est plus simple et moins long à réaliser qu'un design extensible. La raison est qu'avec un design fixe, on ne s'occupe pas de la façon dont va se comporter notre design. On sait qu'il aura toujours la même forme.

Bah, alors pourquoi faire un design extensible ? Un design fixe c'est très bien, non ?

Oui c'est vrai, un design fixe n'est pas un « mauvais design », il s'agit juste d'un type de design.
Certains sites professionnels sont conçus de manière statique. Par exemple commentcamarche.net, pour n'en citer qu'un.

Mais un design fixe n'a pas que des avantages. Le défaut principal vient justement du fait qu'il garde toujours la même taille. En effet, il faut faire en sorte que son site soit visible correctement aussi bien par les petites définitions que par les très grandes. Avec un design fixe, il faut donc baser la taille de son site sur les petites définitions pour éviter qu'il ne se trouve plus grand que l'écran d'un visiteur (et ajoute une barre de défilement horizontale par la même occasion, ce qu'il faut éviter le plus possible).

Le problème, c'est qu'un design qui prend toute la place sur une définition de 1024x768 paraîtra tout petit sur une très grande définition. Eh oui, car quand on dit qu'un design fixe garde la même taille, il s'agit d'une taille en pixels. Les grandes définitions affichant beaucoup plus de pixels, il y aura donc beaucoup d'espace vide autour du corps de la page.
Imaginez la tête du visiteur fier d'avoir acheté un nouvel écran 24 pouces arrivant sur votre site et voyant qu'il prend à peine la moitié de l'écran. o_O
Et on en revient au problème des deux formats d'écrans différents. Les écrans étant maintenant beaucoup plus larges, il se forme d'autant plus de marge si le design est basé sur le format 4/3.

Prenons l'exemple du site officiel de Ubuntu qui utilise un design fixe. Voici le rendu sur deux définitions différentes :

ubuntu.com avec une définition de 800x600 (à gauche) et 1280x960 (à droite)

Le corps du site garde toujours la même taille (soit 976 px, ici), mais comme les deux définitions n'affichent pas le même nombre de pixels, alors les affichages sont différents. On peut voir ici qu'avec une définition de 800x600, on ne voit pas toute la largeur de la page (on est obligé d'utiliser la barre de défilement horizontale), tandis qu'avec la définition 1280x960, le corps de la page ne prend pas toute la place, il se crée donc des marges.
Et ce sont ici deux définitions pour formats 4/3, imaginez si l'on passe d'un format 4/3 à un format 16/10. ;)

Le principal atout d'un design extensible, c'est justement de pouvoir s'adapter à l'écran de l'utilisateur et utiliser au maximum l'espace disponible. Cela évite d'avoir de grandes marges inutilisées.

Ce n'est pas beau, ça ? :D

Le design extensibleDéfinition

Un design extensible est, contrairement à un design fixe, variable en fonction de la définition d'écran des visiteurs. Plus clairement, cela veut dire que la taille du design s'adaptera à l'écran. Il s'étirera et se rétrécira automatiquement.

Avantages et inconvénients

Un gros avantage est comme je l'ai dit plus haut d'éviter d'avoir de grandes marges sur les côtés. Le design s'adapte à la définition d'écran et prend ainsi toute la place disponible (si tant est qu'on l'ait décidé ainsi ;) ).
Grâce à cela, le design est beaucoup plus portable car il n'est pas créé pour une seule définition, mais pour toutes (dans une certaine mesure).

Un design extensible est par contre plus long et (un peu) plus complexe à réaliser parce qu'il faut envisager toutes les possibilités. Il faut prendre en compte le comportement du design sous différentes configurations pour être sûr qu'il n'y ait pas de gros problèmes d'affichage dans certains cas.

Voilà pour la théorie, nous allons (enfin) pouvoir passer à la pratique. ;)

Le design

Nous allons donc créer un design extensible simple, pas à pas, en abordant les principales techniques. Je passerai très rapidement sur le code qui ne concerne que l'esthétique (bordures, couleurs, etc.) : vous êtes normalement capables de le faire sans problème. ;)
Notez que ce qui est abordé dans ce tutoriel peut être utilisé sans problème pour un design fixe en faisant quelques modifications (en ajoutant des tailles fixes, notamment).

Voici donc à quoi va ressembler notre design :

Aperçu du design

Magnifique, n'est-ce pas ? ^^

Résumons un peu, le design comportera :

• un titre principal centré en haut de la page ;

• un menu à gauche comportant quelques liens ;

• le contenu de la page à droite, dans un bloc ;

• un pied de page centré en bas.

Il s'agit d'un exemple de design qui n'est pas très compliqué à mettre en place. ;)

Préparation

Le site ne sera composé que d'une seule page, nous aurons donc une page HTML et une page CSS.

Commencez par créer une nouvelle page HTML dans votre éditeur favori et collez-y ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Mon premier design extensible</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" /> </head> <body> <h1>Mon premier design extensible</h1> <div id="menu"> <h3>Menu</h3> <ul> <li><a href="accueil.html">Accueil</a></li> <li><a href="infos.html">Informations</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="contenu"> <h2>Présentation du site</h2> <p> Bienvenue sur mon premier design extensible !<br/> Ce site est un essai de design extensible, c'est-à-dire que le corps du site s'adaptera à votre écran. Vous ne risquez donc pas de voir le site en tout petit avec de grandes marges autour. </p> </div> <p id="pied_de_page"> Mon premier design extensible &copy;<br/> Design production - 2 <del>584 952</del> visiteurs uniques par jour. </p> </body> </html>

Je ne m'attarde pas plus sur ce code car il ne pose pas de difficulté particulière. ;)

Enregistrez la page sous le nom que vous voulez et affichez-la dans votre navigateur.
Pour les utilisateurs de Notepad++, cliquez sur l'onglet de votre page HTML puis sur Execution > Launch in [navigateur].
Vous devriez voir apparaître une page toute moche, c'est normal. ^^

Passons maintenant à la partie qui nous intéresse le plus, la feuille de style. Créez une nouvelle page CSS et enregistrez-la sous le nom style.cssdans le même dossier que la page HTML.
Vous pouvez d'ores et déjà ouvrir votre éditeur sur votre page CSS car, comme vous l'avez compris, nous allons remplir cette feuille de style tout au long de ce tutoriel.

Pour bien suivre le tutoriel, procédez aux modifications du CSS et enregistrez-les au fur et à mesure. Actualisez aussi la page du navigateur pour observer l'effet de chaque modification.

Nous sommes maintenant prêts pour créer notre design. À vos claviers !

Centrer un bloc

Comme nous l'avons vu plus haut sur l'aperçu du design, le titre principal est centré, contient une image de fond et possède une bordure.
Pour bien visualiser une chose importante, nous allons commencer par ajouter la bordure. Pour rappel :

h1 { border: 1px solid black; }

En faisant apparaître les modifications dans votre navigateur, vous devriez remarquer un comportement spécifique aux éléments de type bloc : l'élément prend toute la place disponible en largeur.
Ce comportement peut paraître tout à fait évident ou sans intérêt particulier, mais il est pourtant essentiel dans la création de designs extensibles. En effet, en prenant toute la largeur disponible, les blocs sont alors extensibles par défaut. Nous verrons un cas concret un peu plus loin.

Revenons à nos moutons. Notre titre doit maintenant être centré, nous allons donc centrer le contenu de l'élément <h1> avec la propriété text-align.

text-align: center;

Jusque-là, rien de compliqué. ;)
Dans le rendu final, les bordures gauche et droite ne sont pas sur les bords de la page, le cadre est beaucoup plus petit en largeur. La première idée qui vient en tête est de donner une taille au bloc <h1>. C'est en effet la meilleure solution ici.

width: 500px;

Eh ! Mais ce n'est plus du tout centré, le titre est maintenant tout à gauche ! o_O

Eh oui. Le texte est toujours bien centré dans l'élément <h1>, mais le bloc, lui, n'est pas centré dans son élément parent (ici, il s'agit de <body>).

Pour cela, nous allons utiliser les marges externes et plus spécialement les marges automatiques. De plus, profitons-en pour ajouter des marges en haut et en bas.
Comme ceci :

margin: 20px auto;

M@teo21 parle déjà de ces marges automatiques dans son cours XHTML/CSS, mais un rappel ne fait pas de mal, surtout que les marges automatiques sont très utiles pour les designs extensibles. ;)

Le titre est maintenant complètement centré ; vous pouvez maintenant améliorer tout ça en ajoutant des marges internes, une hauteur, ainsi qu'une police et une couleur pour le texte.

/* pour l'esthétique */ font-family: "Comic Sans MS", Arial, Times, sans-serif; color: #ececec; height: 45px; padding: 10px;

Passons maintenant à l'image de fond. Il s'agit d'un simple dégradé vertical de tons de bleu.
Nous allons utiliser cette image :

degrade.png
(Clic droit + « Enregistrer la cible du lien sous… » pour télécharger l'image)

Ce n'est pas un peu trop petit, comme image ? :o

Non, ce n'est pas un problème, c'est même un avantage.
Quand vous affichez une page dans votre navigateur, toutes les données de cette page (fichiers HTML, CSS, images, etc.) sont téléchargées sur votre ordinateur. Il faut alors toujours réduire au maximum le poids des fichiers de son site pour que le téléchargement (et donc l'affichage) soit rapide même chez les visiteurs ayant une connexion de faible débit. Pour les images, il faut donc les rendre les plus petites possible sans que cela ne dégrade l'affichage du design.

Dans notre cas, l'image est un dégradé vertical. L'image ne change pas horizontalement, alors autant n'utiliser que le minimum nécessaire, soit une image de 1 px en largeur et d'une hauteur choisie pour le...