Alsacréations

1. Page d'accueil
2. Faire une mise en page sans tableaux

Petite comparaison entre les tableaux et les standards

Pourquoi ces deux termes, "Ancienne méthode" et "Méthode moderne" ?

N'y voyez surtout pas de notions péjoratives ; en raison de la longue mise en place des standards du web la mise en page par tableaux, bien souvent à l'aide d'un logiciel WYSIWYG, est utilisée depuis longtemps.
Le fait que les deux navigateurs Microsoft Internet Explorer et Nestcape Navigator, qui cherchaient pour gagner des parts de marché à imposer leur mode de rendu, certains sites devant parfois faire deux versions pour chacun des deux navigateurs ! La méthode des tableaux fonctionnant plus ou moins bien sur tous les navigateurs et étant la seule permettant de faire des mises en page complexes... celle-ci a été utilisée de manière quasi-systématique durant les années 1990.

Or, si les CSS sont apparus dès 1996, leur intégration dans les navigateurs a été très longue et reste aujourd'hui encore incomplète. Seulement, CSS est aujourd'hui de plus en plus utilisé pour de nombreux sites internet. Il y a donc une évolution des esprits et des méthodes, d'où nos appellations "Ancienne méthode" et "Méthode moderne".

Chacune de ces deux méthodes a bien évidemment ses avantages et ses inconvénients, et c’est ce que nous allons essayer de voir aujourd’hui. La méthode moderne est-elle si miraculeuse ? Si oui, pourquoi la conception à l'aide de l'ancienne méthode est-elle alors encore si utilisée ?

Afin de le savoir, nous avons reproduis la page d’accueil du site internet de Raphaël Goetter suivant les deux méthodes. Nos deux sites auront la même apparence visuelle sur les navigateurs récents (Microsoft Internet Explorer 6 et plus, Mozilla Firefox, Safari, Opera, et Konkeror). De plus, pour des raisons de simplicité, les petits effets au survol sur le site seront omis.

• Première version à l'aide de l'ancienne méthode
  Nous avons pour cela utilisé le logiciel Adobe Dreamweaver 8 en mode WYSIWYG. Et voici le résultat...
• Première version à l'aide de la méthode moderne
  Cette fois, le fond et la forme sont bien dissociés, le site doit être valide et on respecte la sémantique. Et voici le résultat...

Nous allons ainsi pouvoir étudier les avantages et les inconvénients des deux méthodes, tout d'abord pour le webmaster, puis pour les visiteurs du site en question.

I Du point de vue du Webmaster

1° Le poids de la page

Que votre site soit très visité ou non, un poids de page peu élevé peut occasionner des économies de bande passante non-négligeable. De plus, plus une page est lourde, plus longtemps elle se chargera sur l’ordinateur du visiteur. Aussi, une page avec un code réellement lourd peu obliger le navigateur du visiteur à utiliser beaucoup de ressources pour l’afficher, ce qui peut occasionner des ralentissements sur des ordinateurs peu puissants ou sur des connexions internet bas-débit.

Lors de la première visite, le fichier de style CSS (pour la troisième version) ainsi que les images (pesant 103Ko au total) sont chargées. Les résultats sont quasi-identiques, aucune différence significative n'apparait.

Imaginons que votre visiteur voie plusieurs pages du site, ou revienne un peu plus tard. Les images sont conservées dans le cache de son navigateur, ainsi que le fichier de style CSS. Seul le poids du fichier HTML compte donc compte maintenant :

L’économie est cette fois-ci importante: il y a près de 50% de différence entre la version ancienne et la version moderne! Cela permet par la suite un hébergement moins onéreux.

2° Lisibilité du code

Un autre critère est important pour le webmaster. Il peut arriver que celui-ci recherche quelque chose dans le code source de la page, pour effectuer une modification quelconque. La lisibilité du code devient alors un atout : il est plus simple de se repérer dans une page clairement codée, que dans des milliers de lignes de charabia…

Voici un aperçu du code pour l'ancienne moderne :

<table height="560" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td width="175" align="center" valign="top"
	background="design/gauche.jpg"><table width="165" height="458" border="0" align="right" cellpadding="0" cellspacing="0">
	<tr>
		<td width="162" height="168">&nbsp;</td>
	</tr>
	<tr>
		<td height="193" background="design/liens.jpg"><table width="160" height="180"  border="0">
	<tr>
		<td width="150" height="34" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Accueil</font></b></a></td>
	</tr>
	<tr>
		<td height="32" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Pr&eacute;sentation</font></b></a></td>
	</tr>
	<tr>
		<td height="32" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Photos</font></b></a></td>
	</tr>
	<tr>
		<td height="30" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Contacts</font></b></a></td>
	</tr>
</table></td>

Voici le même passage dans la version moderne:

<ul id="menu">
	<li><a href="#" id="accueil">Accueil</a></li>
	<li><a href="#" id="competences">Présentation</a></li>
	<li><a href="#" id="cv">Photos</a></li>
	<li><a href="#" id="contact">Contact</a></li>
</ul> 

Force est de constater que la version moderne est bien plus lisible et courte que l'ancienne version, quasi-illisible ! Un deuxième avantage pour la version moderne, donc.

3° La facilité d’entretien du site

Vous aimeriez faire un changement sur votre site internet ? Par exemple, nous aimerions dans notre exemple que les éléments du menu, à gauche, ne soient pas écrits en blanc, mais en noir.

Pour l'ancienne version, il faut que l’on modifie différentes lignes (les modifications sont en rouge) :

<tr>
	<td width="150" height="34" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Accueil</font></b></a></td>
</tr>
<tr>
	<td height="32" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Pr&eacute;sentation</font></b></a></td>
</tr>
<tr>
	<td height="32" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Photos</font></b></a></td>
</tr>
<tr>
	<td height="30" valign="top" align="center"><a href="#"><b><font color="#FFFFFF">Contacts</font></b></a></td>
</tr>

Imaginez maintenant que vous ayez 20 pages sur votre site voire beaucoup plus, il faudra faire les modifications précédentes sur toutes les pages ! Sur des sites de plus de 50 pages, les modifications deviennent vite très répétitives… D’où l’intérêt de la séparation du contenu et de la mise en forme.

En effet, pour la version moderne, il suffira de modifier la ligne suivante dans le fichier CSS :

ul#menu li a {
color: #000000;
}

La modification prendra effet sur l'ensemble des pages du site, pourvu qu’elles soient liées à ce fichier CSS, en changeant une seule ligne !

Les standards apparaissent alors comme un moyen simple et efficace pour gérer la forme de son site internet, et le gain de temps peut-être énorme.

II Du point de vue du visiteur

1° Une dynamique sans JavaScript

Nous avions précédemment précisé que nous n’utiliserions pas JavaScript pour nos tests. En effet, JavaScript n’est pas forcément activé sur tous les ordinateurs (souvent pour des raisons de sécurité, et cette absence est très fréquente dans les réseaux d’entreprise).

Or, parmi toutes les interactions qu’offre habituellement JavaScript, il y a l’effet lorsque l’on passe la souris sur les liens. Or, ces effets sont parfaitement possibles sans JavaScript… à l’aide de CSS et de l’effet hover.

Retournez sur la version originale du site Raphaël Goetter, passez la souris sur les items du menu de gauche, sur le soleil, sur les parties intimes de Raphaël (pas trop fort quand-même)… Les effets sont parfaitement possibles avec CSS, et fonctionneront aussi sur les ordinateurs qui n’autorisent pas JavaScript !

2° Un plus grand public peut accéder aux pages web

Vous est-il déjà arrivé de naviguer sur un site internet, avec un texte écrit en blanc, sur fond noir. Le contenu est intéressant, et vous souhaitez l’imprimer. Qu’est-ce qui va sortir de l’imprimante ? 5 pages, donc 4 qui contiennent des éléments inutiles (menu de navigation, publicités, décorations, etc.) ? Une page intégralement blanche (les arrière-plan n'étant pas pris en compte par défaut) ?

Avec la méthode moderne, il est possible d’utiliser plusieurs styles pour différents médias : un pour les écrans, un pour les impressions, pour les téléphones portables, les navigateurs textuels, les réfrigérateurs… le tout pour une seule et identique page XHTML. L’utilisateur y gagne, puisqu’il pourra toujours consulter votre site, quelque soit le média utilisé.

Pour élargir, sachez aussi que cela rend possible de manière optimale aux personnes handicapées (notamment malvoyantes), en adaptant votre site pour les lecteurs d’écran et les synthèses vocales. De la même manière, le contenu étant mis en avant, votre site sera souvent mieux indexé par les différents moteurs de recherche, ce qui pourra améliorer significativement votre référencement.

Enfin, il est possible avec CSS de proposer à vos utilisateurs de changer de style, c'est-à-dire de choisir entre plusieurs designs différents. C'est ce que l'on appelle le styleswitcher.

III Inconvénients de la méthode moderne

Tout n'est malheureusement pas parfait avec la méthode moderne. Ainsi, vous devrez apprendre à coder de manière standard, et désapprendre à coder en tableaux. Et si l’apprentissage n’est déjà pas toujours facile, c’est d’abord se débarrasser des mauvaises habitudes, ce qui est très dur.
C'est aussi pour cela que les tableaux sont encore utilisés aujourd'hui ! C’est pourquoi de nombreux sites, comme AlsacréationS, ou encore Openweb, mettent à votre disposition des articles, tutoriels, et un forum d’entraide, pour parvenir à ses fins.

Second désavantage, les versions récentes de CSS ne sont pas encore parfaitement implémentées dans les navigateurs. Ainsi, si ce langage offre un très grand nombre de possibilités, certaines ne fonctionneront pas sur tous les navigateurs anciens. Le mauvais élève est ici Microsoft Internet Explorer. En effet, si la version 7 du fureteur a progressé dans ce domaine, la version 6, qui reste très utilisée, ne comprend pas une partie des spécifications CSS2.
Ainsi, s’il sera rapide et simple de faire fonctionner son site internet sur un navigateur respectueux des normes (comme Opera ou Mozilla Firefox), il faudra ensuite résoudre et ruser pour faire disparaître les nombreux bugs qui pourraient apparaître sous le navigateur d’Internet Explorer.

Enfin, dernier défaut majeur des standards, c’est la difficulté de mettre en place certains standards. Ne nous voilons pas la face : pour la réalisation de certaines choses spécifiques (comme par exemple l’alignement vertical de blocs, la création de div de même hauteur), CSS a des propriétés idéales, mais qui ne sont pas interprétées par Microsoft Internet Explorer 6. Avoir recours à des tableaux devient alors bien plus simple, malgré tous les inconvénients que cela impose

IV Conclusion

Commençons d’abord par la liste des inconvénients de la méthode moderne vis à vis de l'ancienne méthode:

• Il faut apprendre comment les utiliser à bon escient
• Il est parfois plus simple de coder avec des tableaux
• Certains navigateurs les interprète mal

Voici comment le propriétaire du site bénéficie de la méthode moderne :

• La maintenance de votre site est plus aisée
• Les coûts d’hébergements sont réduits
• Sa position dans les moteurs de recherche est améliorée
• Le site est visible depuis différents périphériques (plus grande audience)
• Le site est accessible aux personnes handicapées
• Il est possible de proposer simplement une version imprimable de la page
• Le design est plus simplement modifiable par la suite
• L’utilisation correcte des standards assure que le site sera toujours consultable sur les navigateurs dans les années à venir

Les visiteurs en bénéficient aussi :

• Le site s’affiche plus rapidement
• Le contenu est accessible depuis tous les périphériques
• Une version imprimable est simplement utilisable

Et les avantages du codeur sont nombreux seront certains :

• Le codage est plus facile
• La maintenance est plus simple (meilleure lisibilité, code modulaire)

Bref, les avantages sont multiples pour tous, mais certains inconvénients pourront décourager le débutant, comme celui qui code en tableaux depuis bien longtemps. Comme la pratique d'un instrument de musique, d'un sport, ou d'un jeu célébral, coder en XHTML+CSS s'apprend, et si l'on prend son courage à deux mains, le jeu en vaut clairement la chandelle.

Pour aller plus loin

Inspirez-vous des nombreux modèles de gabarits dans la Galerie de Mises en page en CSS Alsacréations et décortiquez leur code-source.

Un problème, une question ?

Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon spécifique aux tutoriels et articles du Forum Alsacréations.

---