Emmanuel de Taillac.fr - Webdesign, wordpress et évolution du web

Il était temps de me remettre à réfléchir à un prochain thème à mettre en place même si celui-là me semble déjà tenir la route.
Ce ne coûte rien de me repencher dessus et j’ai donc eu l’occasion de me relancer dans un petite veille design et ergonomie du WEB.

Après avoir parcouru de nombreux articles intéressants, je souhaite maintenant vous rappeler quelques précautions et concepts à prendre en compte avant de commencer à concevoir un design.
Nous allons donc dans un premier temps parler du problème de résolution puis nous verrons ensuite le ratio optimal pour découper son contenu. Enfin, nous reviendrons sur l’utilité de laisser tomber le pixel comme unité au profit de la taille relative em.

La résolution ?

Depuis déjà quelques années, vous avez pu vous apercevoir que nos résolutions d’écran ont beaucoup évolué. Nous atteignons maintenant des résolutions de 1280xN pour les 17pouces, 1680xN pour les 20pouces et plus encore pour les wide haut de gamme.
En effet, notre fameux 800xN que nous avons si longtemps considéré comme référence minimale n’est plus au goût du jour. Profitons donc de ces 1024px disponibles afin de révolutionner la manière de créer nos designs. Nous pouvons désormais nous permettre d’adopter une taille de police plus importante si on le désire et aérer notre contenu ce qui facilite bien la lisibilité et le confort de l’utilisateur.

Avant, sur nos designs prévus pour du 800xN, nous nous étions approprié une largeur de contenu exploitable de 750-760px mais cette fois?
Pour du 1024, nous serions tentés de garder le même ratio, ce qui nous donnerait une largeur de 974-984px mais il faut désormais prendre en compte de nouveaux facteurs. De nombreux utilisateurs ne naviguent plus avec leur navigateur en plein écran et certains OS ne lancent pas leurs programmes en full-screen par défaut (Mac OS). Nous allons donc fixer une taille légèrement inférieur à celle calculée précédemment: 960px semble le bon compromis est offre même de vraies possibilités de découpage en étant divisible par 3, 4, 5, 6, 8, 10, 12, 15, et 16.

Le découpage ?

Abordons maintenant la partie découpage du contenu afin de partager de façon optimale l’espace. Les ratios utilisés ne sont souvent pas définis au hasard et l’on retrouve souvent l’influence du nombre d’or (Phi) qui reste souvent une bonne alternative (1.618). On peut aussi retrouver des ratios tels que 1/3-2/3 mais cela reste souvent une question d’harmonie selon le nombre de colonnes souhaité.

Afin de vous aider dans ce choix de ratio, il vous est donc conseillé d’utiliser une grille que vous pourrez complexifier et subdiviser à votre guise afin de vous permettre de mettre en relation beaucoup plus facilement vos conteneurs. Abusez donc des calques de grille sous photoshop ou gimp afin de vous aider á mieux disposer votre contenu. Pensez-y, vous obtiendrez sûrement un résultat beaucoup plus organisé que si vous aviez fait çà sans vraiment prendre le temps d’y réfléchir.

Un style fluide ?

Beaucoup trop de personnes persistent à vouloir utiliser le px comme unité de mesure car selon elles, on obtient un rendu identique quelque soit le navigateur. Certes, mais ce concept est dépassé et de nouvelles priorités sont apparues comme par exemple adapter le design selon les souhaits du visiteur. Chacun peut désormais jouer avec votre page (via greaseMonkey) ou est amené à augmenter la taille de police via son navigateur. N’oublions pas que 2% des internautes souffrent de déficiences visuelles et sûrement beaucoup plus ont besoin de forcer par défaut les tailles de police pour améliorer leur confort.

Pour offrir à l’internaute tout le confort que l’on a la possibilité de lui apporter, nous nous devons donc d’utiliser désormais l’unité relative qui est par exemple em. Afin de vous faciliter la vie avec cette unité, il est courant de fixer par défaut la taille de police de votre body à:
font-size: 62.5%;
En faisant cela, vous aurez une correspondance plus explicite: 1em = 10px.
Pensez aussi á redéfinir votre hauteur de ligne avec des valeurs beaucoup plus confortables :
line-height: 1.4em;

Vous voilà donc parés des concepts essentiels à considérer avant de se lancer dans un design digne de ce nom. Vous gagnerez alors en ergonomie, en lisibilité et en confort. Si vous êtes arrivés jusque là, alors je vous invite à vous rendre sur cette page d’exemple et à tester le rendu en redéfinissant la taille de police via votre navigateur et en retaillant votre fenêtre et vous serez sûrement convaincus de ne plus prendre à la légère tous ces concepts.

Ressources supplémentaires:

• Marc Boulton
• A List appart
• cameronmoll
• Clagnut
• Smashing magazine