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érêt 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 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 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 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.

Partagez cette page sur :

           

Commentaires

Autres publications Programmation

Url en bit.ly sous ajax (le 15/03/2010 - 75 lectures)

Optimiser l'API bit.ly pour un affichage plus rapide des pages (le 08/03/2010 - 109 lectures)

Intégrer l'API bit.ly pour twitter (le 06/03/2010 - 128 lectures)

Dessiner dans une image avec PHP (le 23/02/2010 - 180 lectures)

Ecrire dans une image à la volée (le 22/02/2010 - 502 lectures)

Redimensionner photo pour le web mobile (le 15/02/2009 - 2.446 lectures)

Passer au web version mobile (le 09/02/2009 - 2.798 lectures)

Structure pour web mobile (le 09/02/2009 - 2.549 lectures)

Faut il externaliser ses scripts (le 09/12/2008 - 1.921 lectures)

Reseau Social Friend connect (le 05/12/2008 - 1.648 lectures)

Feuilles de styles statiques (le 09/11/2008 - 1.220 lectures)

Optimiser ses scripts (le 05/10/2008 - 1.236 lectures)

Optimiser la lecture des feuilles de style (le 01/10/2008 - 1.124 lectures)

YSLOW : composant compressé (le 20/09/2008 - 1.419 lectures)

Yslow : les pages dynamiques ou statiques sont persitantes (le 12/09/2008 - 1.262 lectures)

YSLOW : Réduire le nombre de requêtes (le 31/08/2008 - 1.697 lectures)

Améliorer la vitesse d'un site coté serveur (le 30/08/2008 - 2.095 lectures)

GoogleEarth kml et flux rss (le 20/06/2008 - 2.086 lectures)

Annuaire thématique cartographié (le 05/12/2007 - 6.155 lectures)

Adapter son site à la résolution d'écran (le 23/11/2007 - 10.376 lectures)

L'API Google Maps Xml et Ajax sont sur un site web (le 19/11/2007 - 7.182 lectures)

Intégrer l'API Google Maps (le 18/01/2006 - 63.593 lectures)

Software 2.0 - Programmation en Java (le 04/04/2005 - 5.806 lectures)

Suivez phortail

Web phortail.org

• Veille technologique et fonctionnelle avec twitter
• ETL domaine decisionnel
• Temoigner sur le stress au travail
• L'individu au coeur du bilan de compétences
• Nouveautés réseaux sociaux