Choisir les bonnes dimensions pour ses planches

Pensez à la définition d'affichage de vos lecteurs…

Vous êtes-vous déjà demandé ce que voyait un lecteur lorsqu'il affiche vos planches sur son ordinateur ? Si c'est le cas, alors vous vous êtes sans doute interrogé sur la dimension optimale à donner à vos images pour être certain que tous en profitent au mieux…

Comment faire, lorsque chaque lecteur a une configuration différente, pour que tous profitent de vos histoires ?

  • ne dépassez pas 750px de largeur pour des planches verticales ;
  • pour des séries de strips horizontaux, ne dépassez pas 450px de hauteur ;
  • exploitez nettement la navigation verticale que favorise la lecture sur écran : vos planches peuvent être d'une hauteur virtuellement infinie.

Pour en savoir plus sur le sujet, lisez ce qui suit…

D'abord, qu'est-ce que la définition d'affichage ?

Sous Windows, vous trouverez la vôtre sous l'onglet paramètres de vos propriétés d'affichage. C'est une surface virtuelle dont la largeur et la hauteur sont définies en pixels. Aussi grand que soit physiquement votre écran, c'est sa définition qui détermine combien de pixels seront affichés, et donc la quantité d'informations visuelles que votre écran pourra afficher.

De cette définition, il faut retrancher tout l'espace occupé par les multiples interfaces (barre de tâche, barres de navigation et de statut du navigateur, etc.). On parlera donc plutôt de définition utile à propos de l'espace effectivement visible pour vos lecteurs.

Vos lecteurs, parlons en...

Nous avons tous des configurations d'affichage différentes tant en terme de définitions que de format :

  • certains ont des écrans immenses aux surfaces d'affichage de 1600x12001), d'autres de petits écrans en 800x600 ;
  • certains utilisent leur PDA (240×320) ou leur console de jeu, portable ou non2 ;
  • la plupart ont des écrans 4:3, mais le format Wide, à savoir un format type 16:9, se généralise sur les écrans plats de grande diagonale — sans parler des écrans verticaux ;
  • certains naviguent en plein écran, d'autres dans une fenêtre aux dimensions de leur choix3 ;
  • certains ont des tas de barres additionnelles dans leur navigateur, d'autres le minimum syndical.

.center: définition d'affichage utile, planche de VxD.
Exemple de définition utile imprévisible
sur un ordinateur portable à écran large (1280×800).

On peut toutefois se fier à des statistiques pour identifier un plus petit dénominateur commun. Les visiteurs de l'Abdel-INN constituent un bon échantillon puisqu'ils sont a priori représentatifs du public francophone des histoires en ligne. Au cours du mois de mars 2007 ils étaient 4 :

  • 48% à naviguer en 1024×768 (4:3)
  • 18% à naviguer en 1280×1024 (5:4)
  • 10% à naviguer en 800×600 (4:3)
  • 8% à naviguer en 1280×800 (16:9)
  • 6% à naviguer en 1152×864 (4:3)
  • 4% à naviguer en 1440×900 (16:9)
  • 2% à naviguer en 1680×1050 (16:10)
  • 1% à naviguer en 1280×960 (4:3)
  • 1% à naviguer en 1600×1200 (4:3)
  • 1% à naviguer en 1280×768 (5:3)

Il faut manifestement s'astreindre à considérer la définition 1024×768 comme un maximum pour couvrir 90% des utilisateurs. 800×600 est le plus petit dénominateur commun.

Concrètement, la définition utile pour un affichage en plein écran écope d'une perte approximative de –50 à –55 pixels en largeur et de –150 à –160 pixels en hauteur5. Nous pouvons donc en déduire que la surface des définitions minimales déterminées plus tôt sont :

  • en 800×600 : inférieure à 750×450px ;
  • en 1024×768 : inférieure à 970×620px.

Lorsque vous composez, ou adaptez, vos planches pour les publier sur Internet nous vous conseillons donc de faire attention à ces deux tailles. Par exemple, pour une lecture horizontale une hauteur maximale de 450 pixels environ sera idéale. Pour une lecture verticale, ce sera plutôt une largeur de 700 pixels.

Proportions

En terme de proportions la tendance est aux écrans panoramiques (essors des définitions 16:9 et 16:10). Cependant, il est plus naturel de faire défiler des pages verticalement. Tous les logiciels d'écriture (eg: MS Word, OpenOffice.org) et tout le matériel aide et pousse à cette façon de lire6. S'il est très désagréable de scroller pour lire quelques cases, cela devient rapidement très confortable de scroller le long d'une longue bande verticale !

Certaines BD en ligne ont été conçues pour être vues sans ascenseur, mais c'est généralement un trop petit espace pour donner libre court au récit. D'autres (encouragés par Scott Mc Cloud, le pape du webcomics US.) ont au contraire exploré l'infinite canvas en utilisant les ascenseurs pour offrir un espace de lecture virtuellement infini. L'exemple de When I am a king montre combien le résultat est probant.

Il est préférable d'exploiter uniquement l'ascenseur vertical. Les internautes en ont l'habitude depuis qu'ils ont découvert les blogs. Ne soyez pas timides, ne vous cantonnez pas aux formats traditionnels hérités du support papier ! En Corée (où le marché du webcomic est véritablement devenu professionnel) le standard consiste en des planches de 510px de large et de hauteur très grande. En francophonie, Maliki travaille dans ce format avec le succès qu'on lui connait7…

En composant vos planches :

  • préférez dépasser à la verticale plutôt qu'à l'horizontale ;
  • ne demandez pas au lecteur de scroller sur plusieurs directions à la fois (eg: afficher une planche de 1280×2000 sur un écran en 1024×768) ;
  • si votre planche dépasse d'une façon ou d'une autre, gardez à l'esprit que le regard des visiteurs englobera la plupart du temps des zones plutôt horizontales.

.center: Espace visible en 800×600, planche de Klaim.
Cette planche est par exemple trop grande pour être appréhendée en entier sur des affichages 800×600 sans scroller dans les deux directions.

Astuces et outils

Un petit outil bien pratique pour tester l'affichage de vos planches dans différentes définition est l'extension Web Developer pour le navigateur Firefox : une de ses fonctions permet de redimensionner votre fenêtre aux dimensions de votre choix.

  1. Pensez aux écrans 26, 27, voire 30", aux définitions surréalistes.
  2. La PSP a une définition de 480×288px par exemple.
  3. À noter que les écrans étant de plus en plus grands, le navigateur est de moins en moins maximisé car la surface affichée serait alors énorme. Imaginez un navigateur maximisé sur un écran de 30" par exmple ! Sachant qu'il est déjà énorme sur un 22"...
  4. Notons l'absence de définitions de PDA, consoles portables et autres terminaux mobiles, encore peu usités par les francophones... et surtout pour lesquels Abdel-INN n'est pas conçu. On leur consacrera sans doute un billet ultérieur pour ceux parmi vous qui souhaiteraient envisager ces usages émergeant.
  5. Si vous souhaitez prendre en compte la hauteur du menu et du titre au dessus de la planche, comptez encore une centaine de pixels de moins...
  6. Cf. la molette des souris qui fut une révolution lors de son apparition et qui s'est très vite imposée comme un standard nécessaire.
  7. Une édition papier et des milliers de fans