Comment et pourquoi modifier la largeur d'affichage de votre blog

La demande est récurrente, même si les motivations me paraissent discutables, et c'est l'un des reproches qui est formulé à l'encontre des templates : "on ne peut pas modifier la largeur d'affichage". Nous aborderons le principe de la méthode, puis nous réfléchirons aux conditions nécessaires à un élargissement pacifique.

Comment élargir l'affichage ?

Cela peut ressembler à une évidence, il faut modifier la largeur (width:) des éléments de la feuille de styles. Nous avons un conteneur (#container) dans lequel nous retrouvons une ou deux colonnes (#right et ou #left), ainsi qu'une partie centrale (#center). Si l'on veut élargir la partie centrale, il faudra aussi agrandir le conteneur en conséquence.

La largeur se précise en pixels ou en pourcentage, ce qui permet en principe d'avoir un affichage proportionnel à la surface effectivement disponible. On peut aussi indiquer un pourcentage de l'ordre de 90% pour le conteneur, préciser la largeur des colonnes en pixels et ne rien indiquer pour le centre. Il est aussi possible d'indiquer un minimum, et un maximum, tout en assumant que cela ne fonctionne pas avec IE6. Il en reste.

Modifier la largeur d'affichage vous obligera à revoir le design de votre blog de fond en comble. Qu'advient-il des images d'arrière-plan qui ne sont pas répétées ? Autant savoir tout de suite que l'idée d'une image proportionnelle, pour être techniquement envisageable, ne donne qu'assez rarement un résultat satisfaisant.

Je ne peux pas vous donner de règle valable pour tout le monde, vous devrez faire vos essais vous-même, en vous inspirant des CSS des autres. Le recours à des outils comme Firebug et Measure-it est vivement recommandé pour tester sans tout casser. Et la vérification du résultat dans plusieurs navigateurs s'impose.

Faut-il élargir l'affichage ?

La question n'est pas anodine. La perception de ce qu'est une ligne "trop longue" est d'abord proportionnelle à la taille des caractères, puis elle est fonction des habitudes de lecture de vos visiteurs. Lire un chapeau d'article sur la largeur d'une page sur quelques lignes est facilement supportable, mais les articles ne s'organisent pas en colonnes tout à fait par hasard.

Là encore, il n'y a pas de solution miracle, inspirez-vous de ce que font les autres et en particulier les sites de presse.

Quelle largeur choisir ?

Il était écrit que cette note serait celle du relativisme... "Ça dépend", et le premier qui dit "ça dépasse" a un gage. La vignette ci-contre est une capture de l'analyse de Google Analytics de la plupart des résolutions d'écran utilisées sur une période récente d'environ 90 jours. Il y en a tout de même 39 différentes.

Le classement est organisé selon la part représentée par telle résolution dans le trafic analysé. Il faut retraiter ces données dans un tableur pour avoir un classement par largeur d'affichage.

Largeur	Hauteur	Part	Groupes
2112	1188	0,19%	22,02%
1920	1200	16,00%
1920	1080	0,69%
1680	1050	5,14%
1600	1200	1,51%	15,87%
1600	900	1,19%
1536	960	0,31%
1440	900	10,10%
1408	880	0,25%
1400	1050	0,38%
1366	768	1,94%
1360	768	0,19%
1280	1024	9,91%	34,88%
1280	960	0,88%
1280	854	0,44%
1280	800	22,90%
1280	768	0,50%
1280	720	0,25%
1152	864	1,00%	26,15%
1152	720	0,25%
1024	768	20,89%
900	600	1,25%
800	600	2,01%
800	480	0,19%
320	396	0,56%

Ce tableau comprend 98,92% des résolutions. Il permet de voir que 26,15% des écrans utilisés lors des des visites ont une résolution inférieure ou égale à 1152 pixels de large, dont 20,84% ont une largeur de 1024 pixels.

Cela signifie que si je choisis un affichage adapté à un écran de 1280 pixels de large, qui représente tout de même 34,88% des visites, je peux créer des conditions de navigation désagréable pour un quart des visites. Même avec une largeur dynamique susceptible de diminuer, les éléments risquent de se tasser, voir même de se masquer. La taille de votre affichage doit moins dépendre de votre équipement que de celui de vos visiteurs. Pour vous aider dans votre diagnostic, vous pouvez notamment tester Browser size de Google.

En cherchant un peu vous trouverez des services web qui vous permettront de simuler une taille d'affichage différente de la résolution de votre écran (à condition qu'elle soit inférieure, évidemment).

Je vous propose une méthode rustique, mais robuste et sans danger, pour essayer différentes résolutions.

Cliquez sur la vignette ci-contre pour ouvrir l'image à sa taille réelle dans votre navigateur. Enregistrez-la, et faites en l'image d'arrière plan de votre bureau. Calez ensuite la taille de votre navigateur sur les différents gabarits disponibles pour avoir une idée de ce que cela peut donner.

Ah, c'est rustique, c'est sûr ;-)

 

Pour aller plus loin, je vous conseille la lecture des articles suivants :

- Mise en page en colonnes sans tableau, chez CSS Mammouthland
- Faire un site pour toutes les résolutions, de Raphaël chez Alsacréations