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

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.

Commentaires

Autres publications Programmation

Url en bit.ly sous ajax
(Ecrit le 15/03/2010 - 2.443 lectures)
Autre manière de calculer une url courte de type bit.ly et de profiter des traitements asynchrones possibles avec ajax

Optimiser l'API bit.ly pour un affichage plus rapide des pages
(Ecrit le 08/03/2010 - 2.354 lectures)
Bit.ly est le site permettant de raccourcir une url, et dont l'API permet de raccourcir à la volée. Hélas cette api peut ralentir l'affichage des pages, voyons comment intégrer l'API et afficher ses pages aussi vite qu'avant.

Intégrer l'API bit.ly pour twitter
(Ecrit le 06/03/2010 - 3.493 lectures)
Twitter, le réseau social, peut être alimenté par des articles de site web et efficacement lorsque les url ont été raccourcies. Voyons alors comment générer à la volée des url avec bit.ly et ce grâce à l'API proposée.

Dessiner dans une image avec PHP
(Ecrit le 23/02/2010 - 1.808 lectures)
Après avoir vu comment écrire dans une image, voyons comment dessiner dans une image puis écrire avec d'une part des polices de caractère et des couleurs, mais également des paramètres passés en variable.

Ecrire dans une image à la volée
(Ecrit le 22/02/2010 - 2.092 lectures)
Le langage PHP permet d'écrire dans une image à la volée afin par exemple d'y ajouter un texte en superposition. Cette fonction permet également de masquer l'url de l'image puisque crée par le serveur.

Redimensionner photo pour le web mobile
(Ecrit le 15/02/2009 - 3.708 lectures)
Le web mobile ne peut permettre de charger des images de grande résolution. Il convient de les redimensionner. Pour ce faire utilisons PHP avec la bibliothèque GD, script en ligne.

Passer au web version mobile
(Ecrit le 09/02/2009 - 5.643 lectures)
Comment procéder pour écrire son site en version mobile pour smartphone, pda ou téléphone mobile avec wap. Voyons comment appliquer un template dédié pour le web sur mobile.

Structure pour web mobile
(Ecrit le 09/02/2009 - 4.445 lectures)
Les pages web pour téléphone mobile ou pour smartphone ne se construisent pas de la même manière que pour un site web avec navigateur classique. Quelques limitations sont à prendre en compte, voyons ces points.

Faut il externaliser ses scripts
(Ecrit le 09/12/2008 - 3.043 lectures)
Pour obtenir des temps de réponses corrects et si possible optimum, tout webmaster doit se poser la question de savoir si il faut externaliser les scripts d'un site web.

Reseau Social Friend connect
(Ecrit le 05/12/2008 - 2.779 lectures)
Google ouvre son réseau social Friend Connect aux autres plateforme et permet d'installer cet outil très facilement sur un site web.

Feuilles de styles statiques
(Ecrit le 09/11/2008 - 2.072 lectures)
Les feuilles de style dynamiques ne sont pas une bonne solution du coté de l'optimisation des pages web

Optimiser ses scripts
(Ecrit le 05/10/2008 - 2.033 lectures)
YSLOW propose de positionner ses scripts correctement dans ses pages web pour améliorer la vitesse de chargement.

Optimiser la lecture des feuilles de style
(Ecrit le 01/10/2008 - 1.656 lectures)
Cinquième règle YSLOW pour optimiser son site web : positionner les feuilles de styles correctement dans la page web.

YSLOW : composant compressé
(Ecrit le 20/09/2008 - 2.317 lectures)
Règle quatre pour optimiser les temps de réponse du serveur : compresser les composants de la page coté serveur.

Yslow : les pages dynamiques ou statiques sont persitantes
(Ecrit le 12/09/2008 - 2.008 lectures)
Règle numéro trois pour optimiser les temps de réponse du serveur : rendre persistantes ses pages web, qu'elles soient statiques ou dynamiques.

YSLOW : Réduire le nombre de requêtes
(Ecrit le 31/08/2008 - 2.636 lectures)
Règle numéro un pour optimiser les temps de réponse du serveur : minimiser le nombre de requêtes.

Améliorer la vitesse d'un site coté serveur
(Ecrit le 30/08/2008 - 2.906 lectures)
Après avoir optimisé le code des pages coté client, il reste à voir ce que l'on peut faire coté serveur, Yslow nous aide en ce sens

GoogleEarth kml et flux rss
(Ecrit le 20/06/2008 - 2.919 lectures)
Les flux rss permettant de lire de diffuser le contenu d'une page web sur un site, peuvent être utilisés pour lire un fichier Google Earth dont le contenu évolue.

Annuaire thématique cartographié
(Ecrit le 05/12/2007 - 8.336 lectures)
Carte des sites web de l'annuaire thématique avec géolocalisation et plan des villes.

Adapter son site à la résolution d'écran
(Ecrit le 23/11/2007 - 13.552 lectures)
Comment rendre son site lisible en 800 x 600 comme dans les grandes résolutions avec utilisation des balises div

L'API Google Maps Xml et Ajax sont sur un site web
(Ecrit le 19/11/2007 - 9.590 lectures)
Utiliser un flux xml pour afficher des données sur une carte Googlemaps

Intégrer l'API Google Maps
(Ecrit le 18/01/2006 - 73.443 lectures)
Présentation des éléments permettant de réaliser une intégration de l'API GoogleMaps sur un site web.

Software 2.0 - Programmation en Java
(Ecrit le 04/04/2005 - 6.701 lectures)
Le sujet principal de Software 2.0 4/2005 (6) : Programmation en Java

Suivez phortail

Web phortail.org

• Certification ISTQB
• Qualité logicielle
• Cahier des charges fonctionnel détaillé
• Emploi de Test manager en Recette informatique
• Emploi de Test Analyst en Recette informatique