Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

10.12.2009

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 ?

google_analytics_resolutions_ecran_2.pngIl é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.

matrice-resolutions-ecran-max-1920x1200.pngCliquez 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

15:58 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : modifier, largeur, colonne, afficher | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

J'ai tiré l'information à propos de "Browser Size" de la lecture de la note "Browser size : que voient vos visiteurs sur votre blog ?" du "blog du modérateur".

Lire la suite : http://moderateur.blog.regionsjob.com/index.php/post/Browser-size-%3A-que-voient-vos-visiteurs-sur-votre-blog

Écrit par : Gee Mee | 17.12.2009

Répondre à ce commentaire

Vu chez "Juriblogsphere" http://twitter.com/Juriblogsphere/status/9673263411 la référence à http://testsize.com pour tester différentes résolutions d'écran.

Écrit par : Gee Mee | 28.02.2010

Répondre à ce commentaire

Les commentaires sont fermés.