Adapter son site à la résolution d'écran
Les écrans d'ordinateur sont de plus en plus grands mais les design web ne sont pas pour autant élastiques.
Certains internautes ont une résolution d'écran de 1024x 768 alors que d'autres sont au-delà de 1280 x 1024, il y a alors intérêt pour le webmaster à adapter le désign web de ses sites à ces configurations élastiques.
Agrandir le design d'un site c'est l'adapter à l'écran, sans même savoir quelle configuration est utilisée.
Cependant toutes les pages ne sont pas manipulables facilement.
Tableau ou div
Bien des sites de nos jours sont construits avec une présentation sous forme tableau
D'autres sites sont réalisés avec des feuilles de style gérant la position balises div
C'est cette utilisation de balises div que nous allons utiliser, avec en parallèle les feuilles de style.
Pour rappel, les feuilles de style permettent de définir des éléments de présentation ou position de bloc, ou d'éléments de pages et sont ainsi séparées des pages html de données ou textes.
Avec des balises div, une page en trois colonnes peut se diviser en 3 div pour chaque colonne, plus éventuellement des div pour le haut de page et le bas de page.
Position des div
La position des div se définit très bien avec les feuilles de style et les attributs float; right ou float:left
Ainsi pour nos trois colonnes, nous avons une balise container qui englobe les trois div de colonne.
Deux colonnes sont définies avec un float:left, la dernière colonne est définie avec un float:right
La taille des trois colonnes sera définie de manière a ne pas dépasser la taille de la div container, et à remplir tout l'espace.
Taille des div
Avec une taille fixe, les div dont définie en pixel. Deux fois 150px pour les div de colonne droite et gauche, le reste pour la colonne centrale, et le tout devant être centré sur la page, ou positionner à gauche. Le container sera optimisé en 800 ou en 1024 mais obligera un ascenseur horizontal pour les résolutions en 800 x 600.
Avec une taille élastique, les div vont pouvoir s'adapter, le container est fixé à une taille proche de 100% et prend ainsi toute la taille.
Les div de colonne se partagent alors cet espace, 20% 60% et 20 % pour par exemple une présentation en trois parties. Les pourcentages peuvent être réduits pour laisser des espaces entre les colonnes. L'avantage est bien sûr d'être affiché sur une résolution supérieure à 1280 x 1024 tout en ne générant pas d'ascenseur horizontal en 800 x 600.
Mise en application
En utilisant les feuilles de style, ces modifications ont été apportées sur les pages de phortail.org en modifiant uniquement 4 lignes de code, la construction des pages reposant déjà sur une structure en div avec feuilles de style.
Les tests sous Firefox comme Internet explorer se sont relevés concluants.
Certaines adaptations doivent toutes fois être apportées; sur tout site, la construction des pages n'est pas identique en tout lieu. Ainsi, il faut se poser la question des particularités dans la construction des pages et des pages hors charte graphique pour éviter des problèmes de présentation.