Formation 36

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.



Pour plus d'informations, vous pouvez nous contacter par mail ou aux coordonnées suivantes :


Contacter CS Formation

 

Tutos et cours en ligne

HTML / CSS