"Ajouter une image" depuis l'interface d'administration de WordPress

Classes CSS pour aligner les images

• Aucun — .alignnone {}
• Gauche — .alignleft {}
• Centre — .aligncenter {}
• Droite — .alignright {}

Les styles associés (à titre indicatif)

img.alignnone {
    margin: 0 1em;
}
img.alignleft {
    float: left;
    margin-right: 1.5em;
}
img.aligncenter {
    display: block;
    margin: 1em auto;
}
img.alignright {
    float: right;
    margin-left: 1.5em;
}

Formats des images

Les formats (tailles) sont précisés dans Réglages → Médias.

• Miniature — .size-thumbnail {}
• Moyenne — .size-medium {}
• Large — .size-large {}
• Taille originale — .size-full {}

A ce niveau, on peut déjà s’amuser avec les classes multiples en stylant différemment les images selon leurs alignements et leurs formats :

• .size-thumbnail.alignnone {}
• .size-medium.alignleft {}
• .size-large.aligncenter {}
• .size-full.alignright {}
• Etc.

Légende (caption)

Lorsqu’on ajoute une légende, notre image est enveloppée dans une balise div ; une balise p englobe la légende. Les classes impliquées dans l’alignement de l’image sont déplacées sur cette balise div qui contient déjà une classe .wp-caption. Ce qui nous donne les combinaisons suivantes :

• .wp-caption.alignright {}
• .wp-caption.alignleft {}
• .wp-caption.alignnone {}
• .wp-caption.aligncenter {}
• .wp-caption.alignnone {}

Les classes CSS impliquées dans le format restent chevillées à la balise img. Ce qui élargit encore notre terrain de jeu :

• .wp-caption.alignright .size-thumbnail {}
• .wp-caption.alignleft .size-medium {}
• .wp-caption.alignnone .size-large {}
• .wp-caption.aligncenter .size-full {}
• etc.

(Je vous fais grâce de toutes les combinaisons dont l’intérêt est tout relatif).

Classes multiples dans IE6 ?

N’hésitez pas à lire le billet 3 fonctions Javascript pour lutter contre le bug des classes multiples dans IE6 pour utiliser les classes multiples dans IE6 : une fonction simple avec jQuery, une autre plus évoluée (toujours avec jQuery) et une dernière fonction en pur Javascript pour ne pas charger la mule !

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Editeur de dégradés CSS3 à la mode de Photoshop
• Lutte des classes CSS !
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

Lisibilité des caractères

Les caractères avec des empattements sont réputés pour offrir une lisibilité supérieure à ceux qui n’en possèdent pas. Les empattement guideraient l’œil. Pourtant dans le même temps, on entend souvent dire que l’on ne déchiffre pas les mots lettre à lettre mais que l’on reconnait la forme globale des mots. Il manque donc un paramètre pour démontrer la supériorité des caractères possédant des empattements.

Il faut savoir qu’au début du XXe siècle, il y avait effectivement une différence notable entre la lecture des caractères serifs et sans-serif : ces derniers faisaient tout juste leur apparition. En matière de lisibilité, les habitudes sont un critère important.

→ Lire Le petit journal permanent de la TypOgrApHiE !

Lecture en «F» ou en «Z» ?

Certaines études utilisant l’eye-tracking ont démontré que les résultats issus de la page du moteur de recherche Google étaient pour ainsi dire «scannés» par l’œil selon un parcours en «F». Pour autant, vos pages doivent-elles se contenter d’un seul sens de lecture ? Non ! Le parcours en «Z» d’une page imprimée est sans doute encore d’actualité sur le web. La question étant plutôt de placer les éléments importants de votre communication au-dessus du fold plutôt qu’au-dessous.

→ Lire 10 principes pour un design web efficace et Les habitudes de scrolling à la loupe (Eyetracking).

Interlignage à 120% ou 150% ?

Dans l’imprimé, on utilise couramment des valeurs d’interlignage comprises entre 100% et 120% de la taille des caractères pour les pavés de textes destinés à la lecture continue. A l’écran, ces valeurs sont trop faibles. En raison des contraintes de la lecture à l’écran (définition, contraste, luminosité, distance de lecture), il est préférable d’utiliser un interlignage compris entre 140% et 150% par rapport au corps de la fonte utilisée.

A moduler évidemment selon l’œil, la hauteur d’«x» des caractères, la largeur des pavés de textes, le nombre de mots et la difficulté intrinsèque des concepts abordés. Un nombre de caractères compris entre 60 et 66 par ligne est idéal pour la lisibilité et l’intelligibilité des textes. On peut aussi estimer la largeur des pavés à environ 40 fois la taille du caractère qui le compose (soit 640 pixels pour un corps de 16 pixels).

→ Lire Manifeste pour un interlignage minimum syndical pour les blogs !

Taille des caractères

La distance qui nous sépare du support de lecture est un élément essentiel qui est rarement évoqué pour expliquer la différence qu’il y a entre lire à l’écran et sur le papier. C’est pourtant cette distance qui a été retenue pour définir la taille par défaut des polices utilisées par les navigateurs : les 16 pixels que certains trouvent trop importants à l’écran ne sont finalement que l’équivalent des 12 points sur le papier, si l’on tient compte que l’œil n’est pas à la même distance dans les deux cas.

→ Lire 5 règles simples pour améliorer l’affichage de vos textes.

Nombre de fontes par page

Au-delà de trois fontes, il est généralement admis qu’une page web ou imprimée manque de… de quoi au juste ? De classes ? De lisibilité ? D’intelligibilité ? Bref, on ne sait pas trop. Mon conseil : utilisez autant de fontes que nécessaire, selon votre projet. Ne vous limitez pas à-priori. Expérimentez : il en restera toujours quelque chose ! Il sera toujours temps de faire le ménage dans un deuxième temps. Notez que c’est la même chose pour l’utilisation des couleurs.

→ Lire Des ensembles de polices cohérents pour le web et La typothèque idéale par Smashing Magazine

Rédaction web

La lecture à l’écran n’est pas si différente que sur le papier. Loin d’être des sœurs ennemies, ces deux lectures sont plutôt des sœurs jumelles dizygotes. En conséquence, il n’y au aucune raison pour que l’écriture pour le web soit si différente que celle destinée au papier. Si vous maitrisez l’enchainement des idées, la grammaire et l’orthographe, votre prose sera lisible sur tout les supports !

→ Lire Bien rédiger [ pour le web ] [ tout court ]

Justification des textes

L’alignement des textes au «fer à gauche» garantit un espacement constant entre les mots, ce qui améliore la lisibilité. Les textes justifiés offrent quant à eux l’avantage de produire des marges régulières à droite et à gauche, donnant au bloc de texte la forme d’un rectangle très net. HTML n’offre aucun mécanisme pour gérer les césures (je ne parle même pas des veuves et les orphelines.) ce qui entraine souvent des pavés de texte plein de trous (lézardes)…

→ Pour y remédier, jetez un œil sur Hyphenator — Gérer les césures avec Javascript.

Sortez du cadre !

Entre les idées toutes faites et les idées reçues, il reste de la place pour exprimer sa créativité : mélangez les polices de caractères et les couleurs, osez les structures de phrases alambiquées et l’imparfait du subjonctif (juste ce qu’il faut, hein ?). Jouez avec le sens de lecture pour maintenir l’attention de vos lecteurs et sortez du cadre (attention à la tête). Bref, soyez vous-même. Enfin, là, demandez quand même autour de vous, si c’est judicieux :-D

A suivre…

Linkographie

• La lecture facile à l’écran,
• De la typographie pour le web,
• Confort de lecture : l’écart entre l’écran et le papier se réduit,
• La macrotypographie de la page Web,
• La typographie comme outil de design,
• The 100% Easy-2-Read Standard,
• How Users Read on the Web et iPad and Kindle Reading Speeds,
• Stanford Poynter Project (Etude Eyes-tracking sur 67 personnes [en]).

Articles sur le même sujet

• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Le petit journal permanent de la TypOgrApHiE !
• 7 conseils pour mélanger plusieurs fontes dans votre design web
• 940.css version fluide — Grille de mise en page en pourcentage

1. Aller droit au but (Path to completion),
2. Alignement des labels (Label alignment),
3. Aide et astuces (Help & tips),
4. Validation (Inline validation),
5. Actions primaires et secondaires (Primary & Secondary actions),
6. Actions en cours (Actions in progress),
7. Erreurs (Errors),
8. Input inutiles (Unnecessary inputs),
9. Organisation du formulaire (Form organization),
10. Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
• Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!

Articles sur le même sujet

• Aligner le contenu d'un champ input avec le label associé
• Styler vos champs de formulaires de recherche avec CSS
• Personnalisez vos formulaires avec CSS et Javascript
• Guide de bonnes pratiques HTML & CSS par Google
• Recommandations pour développeurs web front-end

Pour un champ input de 20px de haut, on aura ainsi les valeurs :

input {
    height: 13px;
    padding: 3px 0 4px 0;
}

Pour une hauteur identique à :

input {
    height: 20px;
}

And the cat’s in the bag!

Articles sur le même sujet

• 10 bonnes pratiques pour des formulaires HTML efficaces
• Styler vos champs de formulaires de recherche avec CSS
• Personnalisez vos formulaires avec CSS et Javascript
• Design de formulaire HTML avec CSS
• Trucs et astuces CSS