Rien à voir avec les spams de Viagra. Non. Sous ce titre un peu malicieux, je tenais à vous parler d’une chose que je ne supporte plus : les tailles de texte minuscules dans les pages html. Cette impression d’avoir sous les yeux le dictionnaire Édition Larousse en lisant un article de blog.

Pourtant je ne pense pas qu’il soit plus difficile de lire sur un écran que de lire un livre. Il suffit de copier la façon dont les livres mettent en page le texte.

Pour être un peu plus précis, le problème se situe souvent sur le nombre de caractères que contient une ligne de texte. La taille de la police sera donc à priori proportionnelle à la largeur de son conteneur.

Être lu comme on lit un livre

Partons d’un constat simple : je suppose que pour vous aussi il est plus facile de lire un bouquin que de lire pendant pas mal de temps sur votre écran d’ordinateur. Le premier argument pour ça est de dire que c’est l’écran qui fatigue les yeux. Pour moi la vraie raison est la taille minuscule des typos sur le net.

Depuis plusieurs jours j’ai une obsession. Je compare les articles de blog à des livres de ma bibliothèque. Et souvent je vois la même chose : on est largement en dessous des 16px par défaut des navigateurs. À croire que les designers cherchent à mettre le plus d’informations possible dans le moins d’espace possible. Ça peut marcher pour quelques applications web mais pas pour une longue lecture.

Le nombre optimal de caractères par lignes

Tout est une histoire de rythme. Si une ligne est trop longue, le lecteur aura du mal à bien voir où une ligne commence et termine. Ça sera plus difficile de trouver la prochaine ligne sur de long bloc de texte. Pas top pour se concentrer dessus.

Inversement, des lignes trop courtes cassent le rythme de lecture. Elle se retrouve artificiellement accélérée et le lecteur sautera parfois des mots (pouvant être important à la compréhension).

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

— The Elements of Typographic Style Applied to the Web ^*

La bonne pratique est donc d’avoir environ 66 caractères par lignes, en comptant les espaces aussi. Le css avec les media-queries deviennent indispensables sur une page fluide, la largeur des colonnes de texte pouvant changer selon la résolution.
Je dois d’ailleurs améliorer pas mal ça sur mon blog.

Autres considérations

Ne pas hésiter à utiliser des interlignes amples dans vos textes. En utilisant la propriété css line-height avec un coefficient sans unité. Par exemple 1.5 est une bonne base, à ajuster suivant la police.

Les nouveaux paragraphes doivent être bien marqués. On peut utiliser des lettrines, de l’indentation, un pied-de-mouche (❡) ou simplement un saut de ligne.

Éviter la justification sur des colonnes de textes minces. Mais généralement la justification sur le web ne fonctionne pas. À cause du support des césures encore aléatoire, du manque de crénage (kerning) automatique et des ligatures (on y vient avec Firefox ^†).

Enfin les polices serifs facilitent la lecture. Boudées pendant un temps à cause des résolutions assez basses de nos écrans, elles sont parfaitement utilisables de nos jours.

Conclusion

Voilà pourquoi j’ai augmenté la taille du texte ici. Si votre navigateur à une taille de police de 16px par défaut, alors ce texte devrait faire 20px. Et si vous avez lu mon article jusque ici, j’aurai gagné une partie de mon pari.

Et promis j’arrête de vous faire chier avec la typographie avant un bout de temps.

❧

Aujourd’hui je vais donc vous montrer quelques polices sans empattements que je trouve plutôt cool. Donc si vous en avez un peu marre d’Helvetica ou d’Arial, n’hésitez pas à les tester. Ces fonts ont été trouvés, à l’image de l’article précédent, sur Typekit.

LFT Etica Web & PT Sans

LFT Etica Web est une police moins froide que ces consoeurs, presque de type humaniste. Elle se décline sous 16 graisses/styles différents et peut être utilisée pour du texte ou des headings.

PT Sans est une font au look moderne et humaniste. Là encore, elle possède plusieurs familles et styles et peut donc s’adapter à l’usage. Par exemple la famille caption sera utilisée pour les petits textes.

Proxima Nova

Proxima Nova (2005) est une refonte complète de Sans Proxima (1994). Les six polices originales (trois poids avec italique) ont été élargies à 42 polices OpenType complet. Proxima Nova chevauche l'écart entre les fontes comme Futura et Akzidenz Grotesk. Le résultat est un hybride combinant des proportions humanistes avec un aspect un peu géométrique.

FF Dagny Web Pro

En 2002, le journal suédois Dagens Nyheter (DN) a migré du format broadsheet vers un format tabloïde. Le changement au format tabloïde a rendu le cadre plus compact et Pangea a été mandaté pour produire un correspondant sans-serif pour le journal Suédois. Cela est devenu DN Grotesk, qui a maintenant évolué en FF Dagny. Conçu par Örjan Nordling et Söderström Göran.

Myriad Pro

Myriad Pro, un grand classique d‘Adobe est aussi disponible sur Typekit. 10 fonts au total (5 graisses différentes).

Ratio

Ratio est disponible en 6 graisses allant de minces à lourdes avec les italiques pour chaques. Que ce soit sur ​​papier ou sur écran, Ratio ajoute un niveau de sophistication et de polyvalence qui fait ressortir le meilleur dans n’importe quel design.

Et voilà. Ce n’est qu’un petit échantillon des polices disponibles pour font-face, à l’heure où j’écris ces lignes, je compte plus de 140 sans-serifs sur Typekit. Pour le prochain article, je prépare une collection de slab-serifs.

320 and up

1140 CSS Grid

Less Framework 4

Mobile Boilerplate

Skeleton

Golden Grid System

The Semantic Grid System

Je vous conseille aussi de ne pas hésiter à modifier ces divers frameworks pour votre utilisation. Par exemple le thème de ce blog tourne sur une version modifiée de Skeleton — j’ai rendu la grille fluide – et les bibliothèques Javascript de 320 and up.

En regardant le code de ces projets vous allez avoir une meilleure vision de ce qui se passe avec les media queries. Et ainsi adapter leurs fonctionnements à votre propre projet.

Si vous en connaissez d’autres, n’hésitez pas à en parler aux gens avec les commentaires.

Le processus de création d'une police pour le format web est moins simple que l'on peut le penser au premier abord. Il ne suffit pas de prendre une simple .ttf et de la convertir au format @font-face. La police doit être retravaillée complètement pour être lisible sur les différents OS/Navigateur. Un processus appelé en anglais « hinting » et très bien expliqué ici et là par Typekit. Les grandes fonderies travaillent donc à convertir leurs grands classiques au format web, pour mon plus grand plaisir !
J'ai donc décidé dans cet article de vous présenter ma série de polices web préférées du moment, en me concentrant uniquement aujourd'hui sur la famille des serifs. Vous l'aurez compris d'autres articles viendront plus tard dans le même style.

FF Meta Serif Web Pro

Cette police a été créee en partant de la version sans-serif de base (FF Meta). Elle a été développée en 3 ans par 3 designers Erik Spiekermann, Christian Schwartz & Kris Sowersby.

Adobe Minion Pro

Une police Adobe désignée par Robert Slimbach dans les années 90. Elle a le style des polices utilisées dans les livres pendant la Renaissance. Minion est élégante et très lisible.

FF Tisa Web Pro

Dessinée par Mitja Miklavčič pour l'usage dans des magazines modernes. Un « x-height » large et des serifs prononcés améliorent la lisibilité. Et je trouve vraiment la version italique jolie.

Skolar Web

Skolar, la police primée conçue par David Březina, est une serif qui a été désignée à l'origine pour des publications savantes et multilingues. La police maintient sa crédibilité tout en incorporant un style subtil personnel.

FF Scala Web

FF Scala is an old style, humanist, serif typeface designed by Dutch typeface designer Martin Majoor in 1990 for the Vredenburg Music Center in Utrecht, the Netherlands. The FF Scala font family was named for the Teatro alla Scala (1776–78) in Milan. Like many contemporary Dutch serif faces, FF Scala is not an academic revival of a single historic typeface but shows influences of several historic models. Similarities can be seen with William Addison Dwiggins' 1935 design Electra in its clarity of form, and rhythmic, highly calligraphic italics. Eric Gill's 1931 typeface Joanna (released by Monotype in 1937), with its old style armature but nearly square serifs is also similar in its nearly mono-weighted stroke width.

— Wikipedia, source

C'est la police que j'utilise dans les paragraphes de ce blog. J'aime beaucoup les détails calligraphiques. Il existe plusieurs familles dont une condensée et une « small-caps ». Et aussi une version sans-serif.
Toutes ces fonts sont disponibles sur Typekit. C'est d'ailleurs ce service que j'utilise, parce que c'est là où toutes les polices professionnelles se trouvent. J'ai testé un peu Google WebFonts et à vrai dire je n'en trouve pas beaucoup de bonne qualité. À part peut-être la famille de fonts Droid ou Lobster la nouvelle Comic Sans de nos chers designerfags en herbe — Mais c'est cool ça fait retro ! — Bref je m'égare, je garde ma haine pour la mauvaise utilisation de Lobster dans un article à part.

On a inventé ce système pour pouvoir mettre plus de mots sur une page donc économiser du papier à l'imprimerie et améliorer la justification. Même si on n'utilise pas de papier sur le web, on peut toujours gagner de la place et améliorer l'aspect général de la typographie.

Parfois les textes justifiés sont vraiment horribles sur les pages web, avec des rivières monstrueuses. Les césures améliorent nettement ça, donc passons maintenant au code.

Nouvelle méthode CSS3

p {

    hyphens: auto;

    -webkit-hyphens: auto;

    -moz-hyphens: auto;

}

À l'heure où j'écris ces lignes, les navigateurs supportant ces propriétés sont Firefox 6+ et Safari 5.1+. Pour les désactiver il suffit de passer auto en manual. En mode manuel, les ­ sont néanmoins toujours respectés.

Les césures ont des règles strictes d'utilisation, règles changeant suivant la langue. Le navigateur doit savoir dans quelle langue vous écrivez, donc vous devez la renseigner. Un lang="fr" dans la balise <html> suffit par exemple.

Hyphenator

Cette bibliothèque javascript permet d'activer les césures sur tous les navigateurs supportant le « trait d'union conditionnel ». Ce caractère &shy; est invisible quand on le place mais il sert à déterminer l'endroit où une césure peut avoir lieu.

L'avantage de ce script est qu'il privilégie l'utilisation de la méthode CSS3 sur les navigateurs la supportant.

http://code.google.com/p/hyphenator/

Examples

Les paragraphes de mon blog devraient maintenant tous fonctionner avec ce système de césures — depuis la mise à jour du thème en fait — et donc vous devriez les voir sur cet article (et les autres) — à condition d'avoir un navigateur assez récent, mais je ne me fais pas de soucis pour vous.

Qu'est-ce que c'est ?

Le module CSS multi-colums permet de diviser un long flux de texte en plusieurs colonnes de manière automatique. Et donc nous n'avons pas besoin, par exemple, pour 3 colonnes de créer 3 conteneurs. Cette technique est beaucoup utilisée dans les journaux ou les magazines mais encore très peu sur le web.

Ainsi de larges blocs de texte peuvent être divisés facilement en sous-colonnes pour offrir une meilleure lecture et améliorer l'esthétisme d'un site. C'est un avantage aussi d'un point de vue sémantique, car on se passe de balises supplémentaires nécessaires pour avoir le même rendu sans CSS3.

D'un autre côté la lisibilité d'un site peut être complètement ruinée avec une mauvaise utilisation de ce module. Un site web n'étant pas forcément statique comme le serait la page d'un magazine. Par exemple l'utilisateur ne doit pas avoir à scroller quand il lit la fin de la colonne et passe à la suivante.

Compatibilité des navigateurs

• Opera 11.10+, Opera Mobile 11.10+
• IE 10+
• Firefox 3.6+
• Safari 3.2+
• Chrome 10+

Utilisation

Il y a deux façons de créer des colonnes, on peut d'une part spécifier un nombre fixe de colonnes à l'aide de la propriété column-count ou alors spécifier la largeur des colonnes à l'aide de column-width (pixels ou ems, mais pas de pourcentage…). Les deux propriétés peuvent être cumulées, mais le navigateur choisira l'une ou l'autre suivant les cas. Il existe bien sur d'autre propriétés :

• column-gap pour gérer l'espacement entres les colonnes
• column-rule, column-rule-width, column-rule-style, column-rule-color pour gérer l'apparence de la séparation des colonnes
• break-before, break-after, break-inside permet par exemple de forcer le passage d'un élément sur la colonne suivante. Plus d'infos sur le site du w3c.

Exemples

Séparation en deux colonnes

Code

div.twocol {
column-count: 2;
column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-o-column-count: 2;
-o-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
}

Séparation en trois colonnes + style

Code

div.threecol {
column-count: 3;
column-gap: 10px;
column-rule-color: #ccc;
column-rule-style: dotted;
column-rule-width: 2px;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule-color: #ccc;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 2px;
-o-column-count: 3;
-o-column-gap: 10px;
-o-column-rule-color: #ccc;
-o-column-rule-style: dotted;
-o-column-rule-width: 2px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 2px;
}

Conclusion

La propriété CSS multi-columns se dégrade assez naturellement sur les navigateurs qui ne supporte pas encore la spécification. On voit simplement qu'une seule colonne. Pouvoir gérer ce genre de layout sans avoir recours à des scripts quelconque est vraiment pratique. À l'heure où les designers donnent de plus en plus d'importance à la lisibilité du contenu, je pense qu'on en verra un peu plus d'ici quelques temps.

P.S. : Vous avez reconnu les citations des exemples ?

Réf. : Spécifications

S'adapter

Au début on avait pas énormément d'appareils exotiques en dehors du desktop. On voyait souvent un sous-domaine dédié à l'affichage d'un site sous iPhone, avec un thème propre. D'un point de vue conception on était tranquille, le thème mobile était indépendant du thème principal, et on connaissait les contraintes de l'iPhone. Mais maintenant on a beaucoup plus de smartphones et même des tablettes, chaque appareil possédant sa propre résolution. Et là on se rend compte que faire un thème dédié pour chacun de ces appareils est une idée complètement idiote. Donc le site web doit s'adapter.

Bonjour media query

Vous les avez déjà utilisées. Mais si, media="print" pour avoir un CSS dédié à l'impression par exemple. C'est pas nouveau, ça date de la norme CSS 2.1. Ce qui est nouveau se sont les ajouts de la norme CSS3. Des ajouts nous permettant de tester la résolution de l'écran, le type de device etc.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css"/>

Si l'appareil à une résolution inférieure ou égale à 480px en largeur, le fichier mobile.css sera lu. L'attribut @media du CSS permet de faire la même chose sans avoir à le faire dans la balise <link>.

Par exemple sur ce site quand la résolution devient petite, j'enlève la sidebar sur la gauche pour la placer en dessous du contenu. C'est ce que permettent de faire les media queries. On peut imaginer faire disparaître certains éléments qui n'auraient par leur place sur un petit écran, avec un display:none; par exemple.

Les media queries de ce type ne fonctionnent que sur les navigateurs récents et sur la plupart des navigateurs mobiles (webkit, opera). Il y a donc un script js que j'utilise pour certains navigateurs (Oh hai, Internet Explorer). Vous pouvez le trouver sur cette page.

Responsive Grid

Pour me faciliter le travail j'ai utilisé une Grid CSS réactive. Construite sur les media queries, les différents blocs peuvent se ré-agencer suivant la taille de l'écran. Voici une liste non-exhaustive

• Less Framework 4
• Less+ Framework
• Skeleton
• 320 and up

FitText

FitText.js est un plugin jQuery permettant de rendre les tailles de polices flexibles. Je l'utilise pour certains headers. Ce plugin va les redimensionner par rapport à la taille du conteneur. Pratique.

Thème Phollow

Je met en ligne la source du thème WordPress actuel sur Github pour les personnes intéressées. Vous pouvez le trouver sur cette adresse. Les forks sont fortement encouragés.

Pour moi il est maintenant obligatoire de travailler sur des sites qui fonctionnent sur n'importe quelles resolutions que sur des sites qui fonctionnent sur les résolutions des appareils actuels.

Ces mockups ne seront pas forcément une image exacte des versions finales. Ils ont été réalisés avant tout dans une optique de recherche et de discussions. On peut voir sur ces premiers écrans la disparition de la barre de recherche, que j'avais déjà enlevé personnellement la trouvant inutile, un nouveau style de menu et un mode plein-écran qui a l'air plutôt sympathique.

Comme d'habitude ces expérimentations sont ouvertes et disponibles pour ceux qui veulent les tester. Mozilla a crée un nouveau build appelé Australis et téléchargeable à cette adresse. Ce build est une nightly, donc tous les jours une update pourra être téléchargée. La team UX Firefox déclare que c'est sur cette version que seront déposé leurs différents tests.

Maintenant je vais faire mon community manager en vous demandant ce que vous pensez de ces premiers concepts ? Pour ma part ça me plaît beaucoup même si on voit encore que Chrome a pas mal inspiré nos designers.

Via Mozilla

Généralement il y a toujours un thread Post your screenshot and configs sur les différents forum des distributions *nix. La config était généralement collée à l'arrache en dessous. Pas pratique pour les retrouver plus tard. Certains utilisent Github, ce qui me semble déjà une bonne évolution mais encore à un niveau en dessous de Dotshare, qui lui est fait seulement pour ça.

Dotshare.it veut donc faciliter le partage et la recherche de fichiers dotfiles. Ils sont triés par applications, avec une capture du résultat. On peut aller chercher tous les fichiers d'un utilisateur en particulier sur sa page profil, suivre cette personne pour être alerté des updates etc.

Le look du site web est minimaliste et c'est une bonne chose. Ça ne devrait pas trop piquer les yeux des adeptes des CLI tools. L'information est bien présentée et l'essentiel est là. Il y a même des petites références au monde de la ligne de commande, comme scrot pour voir la capture du logiciel.

On a donc tout pour avoir un joli petit réseau social pour le partage des fichier de conf. Unix. Reste à voir si les gens vont suivre. Si vous avez des recommendations ou des demandes à faire aux devs vous pouvez toujours allez faire un tour sur #dotshare at freenode.

Via dotshare

Bonjour les enfants. Aujourd'hui on va s'amuser un peu avec Node.js et les Web Sockets. Pour ceux qui vivent encore dans une grotte, Node.js est un framework Javascript côté serveur basé sur V8 (Chrome). L'avantage est qu'il gère les entrées/sorties de manière asynchrone et supporte un modèle de programmation événementiel. En gros il est parfait pour les applications web temps réels (notifications, push serveur, streaming…).

En quelques lignes de codes on va être capable de faire cette petite démo. Tu as besoin d'avoir un navigateur à la pointe de la technologie pour que ça marche mon ami.

Installation

Pour commencer il nous faut Node.js bien sur. Alors là tu as plusieurs solutions. Tu peux déjà commencer par regarder si il est disponible sous forme de paquet dans ton OS ou distribution GNU/Linux. Sinon tu vas devoir le compiler, mais c'est pas très difficile: regarde.

Il est aussi important d'installer npm (Node Package Manager), il va nous simplifier la vie quand on voudra installer des extensions à Node.js.

Socket.io

Socket.io est la première extension que l'on va installer pour ce tutorial. Le but de cette librairie est de faciliter le développement d'applications web temps réel dans tous les navigateurs. Parce que tu as certains navigateurs qui gèrent les sockets et d'autres non. Alors cette librairie va décider elle-même quel chemin prendre pour tes échanges parmi ceux-là :

• Websocket
• Adobe Flash $ocket ©
• Ajax long polling
• Multipart XHR
• Forever iFrame (lol IE)
• JSONP polling

Et puisque l'on va jouer avec l'API streaming de Twitter, tu peux aussi installer l'excellent twitter-node de la même manière.

Code serveur

Au début du code on instancie quelques variables, dont la variable config que l'on passera à notre objet twitter-node. Elle contient les accès Twitter, le fait que l'on veut utiliser l'API Twitter en mode filtre et le mot sur lequel on veut filter. On instancie aussi un serveur Node.js, dans mon cas sur le port 8080.

On attache un objet socket.io sur notre serveur et on instancie un objet twitter-node. On démarre le stream de Twitter en attachant des fonctions aux évènements que l'on peut recevoir.

L'évènement du nom de “ tweet ” est appelé à chaque fois que l'on reçoit un tweet. Les évènements limit et delete sont envoyés par l'API Twitter. Par exemple le cas du delete est important à prendre en compte si on construit un client Twitter sur l'API de streaming. Imaginons que quelqu'un poste un tweet et l'efface 2s après. Vous l'aurez déjà reçu et affiché. Mais 2s après vous allez recevoir un signal DELETE sur ce tweet et votre client pourra gérer sa disparition.

Quand on passe dans l'évènement Tweet, je demande à Socket.io d'envoyer en broadcast (à toutes les personnes connectées sur mon serveur) d'envoyer un objet JSON du tweet reçu.

Côté Client

Donc là je charge jQuery et une fois que c'est fait je vais chercher le script socket.io.js. Il est automatiquement fournit par le serveur node, donc tu as peut-être le port à changer. Une fois que c'est fait on peut créer un nouveau socket et attacher une fonction à l'évènement message. Cet évènement est appelé à chaque fois que le serveur nous envoi quelque chose. Dans notre cas un tweet, donc je l'affiche.

Lancement du serveur

Tu n'as plus qu'a ouvrir la partie cliente dans ton navigateur et ça devrait marcher. Je trouve Node.js vraiment intéressant et je n'avais pas pris le temps de le creuser plus que ça. Mais le développement de ce programme est vraiment rapide et s'améliore de jour en jour. Il existe des wrappers node pour Mysql, mongodb et d'autres base de données. Et d'autres plugins aussi utiles que Twitter-node ou socket.io. Il y a même des frameworks de type MVC et cie. On en trouve une bonne liste sur cette page.

Démo