95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans l’article Technical Web Typography: Guidelines and Techniques, Smashing Magazine détaille la mise en place d’une grille verticale en utilisant les règles immuables d’une bonne typographie, qu’il s’agisse de créer un carton d’invitation pour un anniversaire ou un faire-part de décès. →
Archives des tags : Titre
Une solution CSS accessible pour remplacer du texte HTML par une image
Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau `h1` (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes. →
HTML5 — Repenser le découpage des pages web et des contenus
Derrière les nouvelles balises proposées par HTML5 se cache un nouveau modèle de structuration. Jusqu’à présent, on rencontre souvent la structure suivante : un niveau de titre `h1` pour le nom du site et ça continue avec `h2` pour le titre des articles ; reste `h3` — `h6` pour structurer la prose, ce qui est suffisant ou pas. HTML5 introduit la notion de Sectioning Content (cf. le concept d’outline) de manière explicite avec les balises `section`, `nav`, `article` et `aside` ou de manière implicite a chaque utilisation d’un niveau de titre `h1`. →
jQuery — Toutes les femmes sont folles | de Q | 10 +
Il suffit parfois d’une coupure de fin de phrase malheureuse pour que le sens global nous échappe ou qu’un double sens politiquement incorrecte voit le jour… Par ailleurs, un mot seul sur sa ligne n’est pas très esthétique visuellement. Voici une fonction jQuery pour remettre les choses en place ^_^ →