Largeur de site fixe ou variable ?
Chacune des 2 méthodes à ses avantages et ses inconvénients. Nous allons les comparer.
Site de largeur variable
Pour mémoire, un site de largeur variable signifie que la dimension des blocs est exprimée en %. Vous pouvez choisir de couvrir la totalité de l'écran, auquel cas la somme des largeurs des blocs menu et contenu fera 100%, ou bien couvrir une partie de l'écran : la somme des 2 blocs fera par exemple 80 ou 90 % de l'écran.
Admettons que le bloc menu couvre 30% de la page, le bloc contenu 70%.
Si un internaute à un écran de 15 pouces (1000 px de large environ), le bloc menu fera donc 300px de large, tandis que le bloc contenu couvrira 700px.
Si un internaute à un écran de 22 pouces (résolution horizontale supérieure à 1500px), alors le bloc menu couvrira 450px, et le bloc contenu fera 1050px.
La présentation des pages (textes, images, vidéo...) ne sera pas la même. Sur un grand écran, le contenu s'affiche sur une largeur plus grande : les internautes utilisent moins l'ascenseur vertical.
Enfin, un texte qui occupe toute la largeur d'un écran peut être très fatiguant à lire, car l'œil doit parcourir de grandes distances pour analyser toute la ligne. La largeur d'une colonne doit normalement être calculée pour contenir 10 à 15 mots maximum. Cette contrainte est impossible à respecter strictement dans un design fluide ou les largeurs de colonne sont variables.
Site de largeur fixe
A l'inverse, pour un site de largeur fixe, le webmaster aura une totale maîtrise de la présentation des pages, et pourra imposer une largeur de texte agréable à la lecture.
Malheureusement, pour un site de 1000px de large par exemple, une grande partie d'un écran large restera inutilisée.
En général, les concepteurs qui optent pour un site de largeur fixe souhaitent centrer ce site dans la page.
Centrer le site à l'écran
Voici une méthode, parmi d'autres, qui permet ceci sans trop compliquer le code.
Le principe est simple : on englobe le contenu du site dans un unique cadre. Il suffit alors de centrer ce cadre. Reprenons l'exemple de la mise en page avec des <div>, à 2 colonnes.
<body>
<div id=''tout_le_site'' >
<div id=''banniere'' >Logo + image + slogan</div>
<div id=''menu'' >Colonne du menu</div>
<div id=''contenu'' >Colonne du contenu</div>
<div id=''bas_de_page'' >Mentions légales + liens</div>
</div>
</body>
Ce nouveau bloc peut être facilement dimensionné et centré, avec un règle CSS spécifique :
#banniere {
border: 3px solid red;
}
#menu {
border: 3px solid blue;
float:left;
}
#contenu {
border: 3px solid lime;
float:left;
}
#bas_de page {
border: 3px solid yellow;
clear:both;
}
#tout_le_site {
width:950px;
margin:auto;
}
Ces 2 lignes de codes définissent la largeur totale du site à l'écran, et forcent sont centrage.
Au cours du développement, si vous utilisez des bordures visibles (d'épaisseur non nulle) pour voir l'emplacement de chaque bloc à l'écran, vous constaterez certainement des problèmes d'affichages.
En effet, si par exemple le bloc menu fait 300px de large, et le bloc contenu 650px, le total fait 950px.
En revanche, si chaque bloc est entouré par une bordure de 3px (qui s'ajoute à la largeur définie avec width), alors la largeur nécessaire à l'écran sera 306 + 656 = 962 px.
Si pour le bloc qui englobe le site, vous déclarez une largeur de 950px, le bloc contenu n'aura pas la place pour s'afficher à côté du bloc menu. Il s'affichera sur une nouvelle ligne.
Tous ces bugs d'affichage disparaîtront lorsque vous supprimerez les bordures autour des blocs.
Et sur les mini-écrans ?
L'apparition de la 3G en téléphonie rend désormais possible la consultation de sites internet sur les téléphones portables. Or ces appareils, tout comme les netbooks, ont des écrans petits voire minuscules...
Même s'il est impossible de prévoir tous les cas de figure, il est indispensable de s'adapter aux habitudes de consommation du public que vous visez.
Si votre clientèle est relativement âgée, les écrans « normaux » et même larges sont à privilégier.
Pour un public jeune, ou de cadres aisés, il peut être utile de développer une version « bis » de votre site, adaptée aux petits écrans.
Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
