Quelle résolution d’écran?

Comme j’en parlais dans l’entrée précédente, je suis justement en train de tuer le temps à faire du design de sites web. Il s’agit ici d’une des choses que je préfère. En fait j’ai tendance à ne jamais voir passer une journée passée dans Photoshop, au grand dam de mon entourage immédiat.

Je vais donc en profiter pour donner quelques petits conseils aux néophytes qui aimeraient bien relooker un peu leur site mais ne savent pas trop par où commencer. Voici donc en vrac quelques conseils pratico-pratiques afin de vous aider dans le choix de la largeur de votre futur site (faut bien commencer quelque part!) :

Lorsqu’il est question de faire un site on a 3 choix avant de même commencer à penser à son apparence : est-ce que je vais le faire en 800×600, en 1024×768 ou en largeur variable. Les trois choix sont bons, et chacun a ses avantages et inconvénients :

• 800×600 (765px actifs). Très restrictif. Force à faire du contenu distribué verticalement. Peu d’expace pour les menus latéraux. Très embêtant d’y placer des publicités de type Bigbox (300×250) et Leaderboard (728×90). Fonctionnera pour 100% des utilisateurs ou presque.
  
• 1024×768 (1000px actifs). Pourra nuire à la visibilité d’environ 10% de vos visiteurs. Plus adapté à la diffusion de contenus élaborés. Bien adapté aux formats publicitaires. Permet beaucoup plus de latitude dans l’ergonomie.
  
• Flexible (0-100%). Peut donner des résultats très imprévisibles (1). Agressant pour les utilisateurs ayant une résolution d’écran très grande (ex: écrans widescreen) et qui naviguent en plein écran. Positionnement « abolute » (en CSS) quasi impossible. Pratique pour les gens qui naviguent dans des petites fenêtres. Assure une maximisation de l’espace horizontal (au détriment du vertical, ce qui peut rendre la lecture d’un texte fastidieuse).

  (1) Peut être contourné en spécifiant une largeur minimale

Pas besoin de vous dire que je vous recommande sans hésiter de vous tourner en priorité vers le standard 1024×768, qui vous donne 1000 pixels de large pour travailler. Idéalement je vous recommanderais aussi de proposer un menu latéral de 300 et/ou 160 pixels pour encadrer votre contenu, et ainsi vous plier aux normes publicitaires en vogue présentement.

Si malgré tout vous tenez à faire plaisir à tout le monde, je recommande l’utilisation de feuilles de style alternatives 800/1024 plutôt que d’opter pour la flexibilité en pourcentages. Cela vous permettra d’éviter tous les problèmes de positionnement si votre site bénéficie (et je vous le souhaite) d’un code valide XHTML/CSS. Facile donc de changer quelques spécifications de largeur et de choix d’images dans une nouvelle feuille de style pour ainsi proposer 2 strucures de sites vous assurant une parfaite visibilité pour tout le monde, sans défauts d’interprétation ni incongruités.