Adapter son site à la résolution d'écran - Programmation

Navigation: Pages Webmaster > Programmation

Les écrans d'ordinateur sont de plus en plus grand mais les désign web ne sont pas pour autant élastiques.
Certains internautes ont une résolution d'écran de 800 x 600 alors que d'autres sont au delà de 1280 x 1024, il y a alors intéret pour le webmaster à adapter le désign web de ses sites à ces configurations élastiques.

Les pages en tableau

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.

Les pages en balises div et css

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éfini très bien avec les feuilles de style et les attribut float; right ou float:left
Ainsi pour nos trois colonnes, nous avons une balise container qui englobe les trois div de colonne.
Deux colones 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 optimiser en 800 ou en 1024 mais obligera un ascenseur horizontal pour les résolution 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 sur 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 contruction des pages reposant déjà sur une structure en div avec feuilles de style.
Les tests sous Firefox comme Internet explorer se sont rélévé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.

Annuaire thématique cartographié (le 05/12/2007 - 1.803 lectures)
Adapter son site à la résolution d'écran (le 23/11/2007 - 3.093 lectures)
L'API Google Maps Xml et Ajax sont sur un site web (le 19/11/2007 - 2.340 lectures)
Intégrer l'API Google Maps (le 18/01/2006 - 43.466 lectures)
Software 2.0 - Programmation en Java (le 04/04/2005 - 4.384 lectures)

Partager cette page sur :          

Commentaires

Web phortail.org

• Adsense et la chute du dollar
• L'ergonome, le graphiste, et la direction métier face à un site internet
• Les niveaux de contrôle des données du système d'information
• Projet d'accord sur la réforme du marché du travail
• Mise en oeuvre de la solution en gestion de projet