Après lecture de l'article sur la largeur idéale des sites, nous connaissons maintenant la largeur idéale des sites webs pour une meilleur visualisation sur la plupart des écrans. Mais existe-t'il un moyen pour designer des sites web qui s'adapteraient à toutes les résolutions des internautes ? Oui ! Cet article vous présente les différentes solutions.

1. Les différentes conceptions des sites

Il existe 3 façons de développer un site afin qu'il se visualise au mieux selon la résolution de l'internaute :

• - Les sites à taille fixes qui se collent à gauche ou à droite de la fenêtre du navigateur.
• - Les sites "élastiques" ou "liquides" qui restent au milieu de la fenêtre du navigateur.
• - Les sites "fluides" qui s'adaptent à la largeur de la fenêtre du navigateur.

Commençons par visiter des sites afin de bien comprendre ce dont on parle.

1.1 Les sites à taille fixes

La boutique Gourmet sans gêne est par exemple un site de taille fixe collé à gauche du navigateur. Les sites collés à droite sont bien plus rares dans notre culture et sont davantage le fruit d'expérimentation. En effet, nous sommes habitués à lire de gauche à droite, cela serait déroutant et improductif de voir un site se coller à droite de la fenêtre.

1.2 Les sites élastiques ou liquides

Actuellement, de nombreux sites utilisent cette méthode, elle est très prisée par les développeurs web et les webdesigners pour sa facilité de création de sites webs attractifs. Le graphiste connaissant la taille du site (sachant que la taille idéale est autour de 950 pixel de large) réalisera toutes ses créations graphiques à la bonne dimension. L'intégrateur aura donc à prévoir des éléments de taille fixe. Le site se plaçant automatiquement au centre de la fenêtre, peu importe si la fenêtre s'élargit de trop, le site sera toujours au centre. Les exemples de site élastiques sont légions, par exemple l'éditeur La Marelle et le vendeur de t-shirts Yellow Bird ont réalisés leur site de cette façon.

1.3 Les sites fluides

Les sites fluides sont bien moins nombreux. Cela exige un connaissance approfondie du HTML et du CSS et une certaine rigueur dans le développement du code. Nombreux sont les wikis (l'exemple le plus célèbre est wikpedia), les sites privilégiant l'information au graphisme (comme Gmail), les forums (comme La boîte à Pixel) et quelques sites de particulier (les recettes d'Yvette) utilisant la plupart du temps des C.M.S. ayant un design fluide. Les sites jolis, ergonomiques et bien pensés ayant fait le choix délibéré d'un design fluide sont encore rare. C'est le choix opté par kameleoon, le site de vente de l'éditeur Eyrolles, ou encore cet autre vendeur d'accessoires recyclés.

Choisir de réaliser son site avec un design fluide est la solution pour que votre site s'adapte à toutes les résolutions des internautes.

2. Comment réussir son site fluide

Voici les 6 commandements pour réussir son site fluide :

1. Ne pas attribuer de pixel fixe aux éléments mais privilégier le pourcentage ou l'unité em.
2. Ne pas attribuer aux éléments de type Bloc (div, p, h, ul) de largeur 100% au risque de se retrouver avec des bugs d'affichage.
3. Ne pas exiger que le site conserve la même apparence pour tous les internautes.
4. Ne pas imposer de taille fixe à la police, privilégier l'unité em, au risque de créer, là encore, des bugs d'affichage.
5. Penser le graphisme du site de façon optimisé en privilégiant l'insertion d'image pouvant se répéter.
6. Ne pas attribuer de largeur à l'élément accueillant le contenu principal.

Les sites fluides ne sont pas systématiquement garantis pour une bonne visualisation sur des résolutions extrêmes (écran énorme ou extrêmement petit).Pour éviter que le site s'étire de trop ou se compresse de trop, les propriétés min-width et max-width sont d'un grand secours.

Le second problème est que Internet Explorer 6 (IE6) et inférieurs ne comprennent pas ces propriétés, il faudra alors ajouter des lignes de code pour débugger ce navigateur.

3. Conclusion

Sites fluides, élastiques ou fixes, à vous de faire votre choix. Peu importe celui pour lequel vous opterez, choisissez avant le développement et la création de l'apparence du site.