Article en plusieurs parties : 1 2
Après avoir passé en revue les thèmes WordPress dans le cadre du SDC, j’ai voulu lister les erreurs les plus communes sous la forme d’un billet sur les 11 erreurs à faire pour être recalés à un concours de webdesign… Mais, il se trouve que parfois le hasard fait bien les choses : juste avant de fermer mon agrégateur pour un repos bien mérité, je suis tombé sur un titre racoleur. Et là, impossible de résister à la lecture et à l’envie de traduire en direct live cette profession de foi, Alpha et Omega pour tout **webdesigner qui se respecte (et qui respecte ses lecteurs !). Ce billet aurait pu s’intituler : Lisibilité, ce qui va sans dire, va mieux en le disant. Mais c’était sans compter le côté obscur de la force qui m’a soufflé un titre bien plus efficace ;)
La plupart des sites web sont remplis de textes trop petits pour être lus correctement. Pourquoi ? Il n’y a aucune raison particulière, juste une stupide erreur collective qui a commencée lorsque la résolution des écrans était vraiment faibles. Donc :
Ne nous demandez pas de spécifier nous-même la taille de la police.
Nous ne voulons pas modifier les préférences de notre navigateur chaque fois que nous visitons un site web.
Ne nous dites pas que les pages encombrées sont plus agréables à lire.
Les sites web remplis jusqu’à la gueule ne sont pas beaux, ils puent. Remplir les pages à tout prix n’a jamais aidé l’ergonomie. C’est la paresse qui pousse ces concepteurs à nous bombarder d’informations inutiles. Nous voulons que vous réfléchissiez pour sélectionner ce qui peut nous intéresser. Nous ne voulons pas faire le boulot à votre place.
Ne nous dites pas que faire défiler une page *saimal*.
Parce qu’alors tous les sites web sont nuls. Ils n’y a rien à reprocher aux longues pages. Rien du tout. De même qu’il n’y a rien de mal à tourner les pages d’un livre.
Ne nous dites pas que le texte n’est pas important.
95% de ce qui importe dans le webdesign est typographie.
Ne nous demandez pas de porter des lunettes.
Plutôt que d’avoir les yeux sur l’écran, nous préférons continuer la lecture confortablement assis dans une position relax.
Cinq règles simples à appliquer pour améliorer l’harmonie visuelle de vos pages web »
Article en plusieurs parties : Page suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
"Remplacer les images par du texte peut sembler attrayant, mais le web n’est pas fait pour ça" c’est pas le contraire ? -> Remplacer le texte par les images …
Dans ta craduction tu parles de taille de texte qui doit être minimum de 1em par défaut…
Il semble que tes commentaires ne respectent pas cette règle : je viens de me fracturer l’oeil droit en lisant le commentaire du dessus ;)
Sinon personnellement, j’ai toujours misé mes mises en pages sur la typographie uniquement (ou presque), car j’ai tendance à perdre bcp trop de temps sous toshop et autre.
J’ai pas la fibre artistique, alors mon design web perso est basé sur la typo, les couleurs et les espaces entres les parties :)
Bien des web designers feraient bien de passer lire ces quelques lignes de ton biller t
Samuel MARTIN > Bien vu, c’est corrigé, merci !
loïc m > C’est vrai, la taille des commentaires parait vraiment faible comparée au texte avec la taille par défaut. Je me pencherais dessus. Tout à fait OK avec ton principe de mettre le paquet sur le texte qui est souvent l’élément dominant de la plupart des sites (et je ne parle pas des blogs !) mais aussi le plus négligé… du genre :
– t’as vu comment j’ai traité ce visuel qui déchire ?
– Ouais, mais tu le mets où le texte ?
– Ah, ouais, tiens, c’est vrai… Bon, je mets tout en 10px et baste !
/me sifflote…
Etrange comme ça me rappelle certains de mes articles sur les fondamentaux de la mise en page qui manquent à beaucoup de "Webdesigner". ;)
Aymeric > des liens, des liens ! (en plus il n’y a pas de nofollow…). Nul doute que ces règles de bons sens se retrouvent dans toutes les bonnes boutiques ;)
Ca fait du bien de pouvoir lire un billet calé au fond de mon siège sans forcer sur les yeux ! (surtout en fin de semaine). J’adhère totalement.
Cyril
Pfff Br1o ispice di fignasse. :)
Pour rappel :
http://www.ajcrea.com/index...
http://www.ajcrea.com/index...
http://www.ajblog.fr/index.php/q...
Si un jour je retrouve du temps, je continue la série.
Merci pour les liens, Aymeric, tiens, en parlant de "fignasse", je te souhaite de bonnes vacances :D
a++
"La règle est simple : pas plus de 10 à 15 mots par ligne."
Je suis d’accord avec le principe de ne pas faire une colonne de texte trop importante, mais pas avec la fourchette proposée. Il est difficile de garder son attention sur une colonne de texte qui n’occupe qu’un tiers (avec l’exemple de votre blog, sur un écran 1024px, et encore, aujourd’hui 1024px et un minimum) de la largeur.
Brio, je ne sais pas si je te l’ai signalé mais j’ai finalement choisi ce nom de domaine et la solution où je ne passe pas mon temps à m’arracher mes divins cheveux auburn ! Bon, merci en tout cas pour tes encouragements. Et tu es le bienvenu, même sur un blog pour les nanas !
laeti > le nom de domaine que tu as choisi sonne vraiment bien :) Tu as fais un choix judicieux avec GandiBlog qui t’évitera bien des soucis capillaires ;) Bienvenue dans mon aggrégateur et ma blogroll ! a++
Benoît > Sur ce billet, si j’ai pu artificiellement augmenter la taille de la police pour qu’elle se rapproche de la taille par défaut du navigateur, je n’ai pas augmenté la taille de la colonne ! De sort que le nombre de mots à la ligne est, je te l’accorde, bien trop faible. La largeur de la colonne pourrait sans problème passer de 500px à 800px ! Soit une taille tout à fait convenable en 1280×1024
Bien sûr, toutes les valeurs sont données à titre indicatif, sachant que les 15 mots/lignes peuvent passer facilement à 20 ;)
Toujours un plaisir de lire tes articles ;) Effectivement, la lisibilité devrait être la priorité des webdesigners. Totalement d’accord avec l’importance de la taille de police d’origine ainsi que l’interlignage.
Par contre, dommage que certains liens dans l’article ne fonctionnaient pas (vers le site japonais)
Rémi > En effet, il semble qu’à part la page d’accueil le site rencontre des problèmes :( J’espère que c’est passager car c’est vraiment une ressource intéressante en terme d’ergonomie, d’interface, etc. F5 ! F5 ! F5 ! ;)
En plus tu réponds aux coms régulièrement ! Je suis en extase devant ton blog et les multiples possibilités au niveau design, contenu, etc. Je rêve d’un jour où j’aurais quelques compétences en la matière. Ouais, bon, tout ça reste un rêve… Chacun son job, finalement. Tout de même, j’aimerais bien avoir moi aussi de beaux verts comme ça, au lieu de mon truc blanc bleu pâlot…
C’est marrant, j’ai une traduction de "Improving accessibility through typography" (accessites.org/site/2007/… qui est en cours de relecture… On y retrouve plein de points que tu évoques ici, mais aussi des conseils sur le choix des polices. Faut que je secoue la liste pour qu’on le sorte tant que le fer est chaud, mais avec l’été les consensus sont un peu ralentis…
On dirait que les expressions régulières ont dévoré mon lien. Il s’agit donc, sans les parenthèses, de accessites.org/site/2007/…
#Goulven {
Je ne connaissais pas le site en question, c’est réparé. Les questions liées à la lisibilité sont dans l’air du temps : et ce n’est pas plus mal ;) En fait, petit à petit les gens se rendent compte qu’être lu par Google, c’est bien, mais pas suffisant ^_^
}
salut,
j’étais passé à côté de cet article : bravo et merci. Le rappel de ces règles de bon sens est indispensable…je vais me repencher sur mon design pour vérifier que je respecte ces règles.
à bientôt !
Je dois être débile… que signifie cette phrase ? « faire défiler une page saimal »
Merci pour tous ces commentaires. L’interligne est le genre de truc auquel je n’avais jamais fais gaff.
@Hervé: le défilement en question concerne le scroll vertical : pendant longtemps une certaine catégorie de « webdesigner qui en ont juste l’air » se sont attachés à faire des mise en page web qui tenait sur un seul écran (sans scroll vertical, donc).
Le « Saimal » fait référence à un site qui a eu son 1/4 d’heure de gloire à une époque : http://les.filles.saimal.fr/. les garçons aussi d’ailleurs http://les.garcons.saimal.fr/ :)
@Billyboylindien: Content que tu y trouves ton bonheur ;)
Très bien les règles simples.
Comment + : le « pas de défilement vertical » : malheureusement, cette demande ne vient pas forcément du webdesigner qui se la pète, mais surtout (de par mon expérience de webdesigner qui ne se la pète pas trop) des clients. Des clients, pour la majorité institutionnels, qui en sont restés à la borne internet d’exposition ou au cd-rom, vous voyez ? Des clients qui sont des bêtes de concours mais qui n’ont pas encore compris que la majorité des souris vendues sur le marché comportait deux boutons et une mollette au milieu. En avril 2008, j’ai encore dû argumenter pour « imposer » la page longue à un client qui voulait une site « innovant » sur une seule hauteur d’écran. Mon pauvre ami, mais qu’est-ce qu’on peut faire de toi…
Pour le contraste des couleurs, ça va s’améliorer. Ya les contraintes d’accessibilité qui vont nous y aider (et parce que les clients, ils veulent de l’oooooooor !).