Phollow.me

Enlarge your police

Jérôme M. — Sat, 04 Feb 2012 21:42:16 +0000

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.

❧

^* Une lecture que je conseille fortement, plein de conseils et de bonnes pratiques sur la typographie adaptée à l’usage du web – source

^† Using OpenType font features with CSS 3: Part 1 – source

Mes polices web préférées [sans-serif]

Jérôme M. — Wed, 30 Nov 2011 12:35:38 +0000

Après un premier article sur les polices de types serif, je continue sur ma lancée avec cette fois-ci les sans-serifs. Ce type de police n’a pas d’empattements, d’où leur nom. En français on les appellent aussi polices linéales. Elles ont été longuement privilégiées pour le corps de texte sur les écrans, car à l’époque les écrans analogiques et la basse résolution ne rendaient pas l’affichage d‘une serif optimale. La nature simple des polices linéales fait qu’elles sont mieux lisibles sur ce type d’écran. De nos jours avec nos écrans LCD, l’antialiasing etc., ce n'est plus vrai je trouve.

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.

Sur le site web de Joni Korpi, on peut voir l’utilisation de ces deux polices. Avec LFT Etica Web pour les titres et PT Sans pour le corps de texte.

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).

Principalement utilisée sur ce site pour le corps de texte et quelques headlines.

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.

Disponible aussi sur Typekit, avec la variante Ratio Display.

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.

7 frameworks CSS pour développer en Responsive Web Design

Jérôme M. — Mon, 21 Nov 2011 12:51:19 +0000

Je commence une série d'article à propos d'outils permettant de faciliter le développement d’un site internet responsive, s’adaptant dynamiquement à la taille de l’écran du média. Dans cet article, je vais parler uniquement de tout ce qui a un rapport avec le CSS. En particulier des grids et des templates CSS.

320 and up

320 and up est un template basé sur HTML5 Boilerplate et la grid de Less Framework 4.

320 and up

1140 CSS Grid

1140 CSS Grid se base sur la résolution d’un moniteur de 1280 de large, et se réduit de manière fluide sur les plus petites résolutions.

1140 CSS Grid

Less Framework 4

Less Framework 4 permet de construire des sites web qui s’adaptent aux différents devices grâce à 4 templates et 3 pré-réglages typographiques.

Less Framework 4

Mobile Boilerplate

Mobile Boilerplate est une collection de CSS, HTML et diverses bibliothèques Javascript permettant de bien démarrer un projet web mobile.

Mobile Boilerplate

Skeleton

Skeleton contient une grille CSS et un style de base (typographie, formulaire, boutons…) pour commencer un projet.

Skeleton

Golden Grid System

Golden Grid System : Pour moi une des grilles adaptatives les plus propres. L’avantage de celle-ci est qu’elle conserve plusieurs colonnes tout le temps, même au format mobile.

Golden Grid System

The Semantic Grid System

The Semantic Grid System est intéressante dans le sens où c’est vous qui choisissez le nombres de colonnes, la taille des marges etc.

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.

Homebrew, un gestionnaire de paquet pour Mac OS/X

Jérôme M. — Tue, 01 Nov 2011 19:12:51 +0000

Quand on a pris la bonne habitude de travailler sous un environnement Unix, il y a certains outils qui vous manquent cruellement quand on se retrouve par exemple sur Mac OS/X. Ce système d’exploitation ne possède pas de gestionnaire de paquet comme apt-get sous Debian ou yum sous CentOS. Il existe heureusement des solutions, comme par exemple Macports. J’en avais parlé sur ce billet il y a quelques temps déjà.

Aujourd’hui j’utilise un autre gestionnaire de paquet s'appelant Homebrew. Il se veut plus simple que Macports et diffère un peu dans sa manière de faire. Pour faire simple Homebrew va toujours essayer d'utiliser les librairies déjà sur le système pour compiler nos paquets. Cette manière de procéder possède des avantages et des inconvénients. L'avantage c'est que pour compiler un paquet, on ne va pas devoir compiler X librairies avant. L'inconvénient c'est que nos exécutables risquent grandement de planter après une mise à jour de l’OS ; les librairies de Mac OS/X étant mises à jour.

C'est donc un choix à faire. Et j’ai choisit Homebrew car je n'ai pas non plus 50 paquets à maintenir, une vingtaine tout au plus, et je ne mets pas mon système d’exploitation à jour tous les quatre matins.

Pré-requis

Il faut savoir que par défaut il n’y a pas les outils de compilation dans Mac OS/X. Alors on va devoir installer gcc et ses potes, et ça se fait simplement en installant Xcode. Pour certains paquets vous allez peut-être avoir besoin du « Java Developer Update ». On peut trouver ce qu’il faut sur cette page.

Installation

L'installation à proprement parler du gestionnaire de paquets peut maintenant commencer. Homebrew est écrit en Ruby et son script d’installation aussi.

/usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

Il va faire son nid dans /usr/local, ce qui nous permettra d’installer des paquets sans passer par sudo. De plus cet endroit est assez indépendant du système, on pourra donc facilement tout enlever si besoin. Il est bien sûr toujours possible de mettre tout ça ailleurs si vous préférez.

Et ensuite on peut RTFM

J'admets avoir la flemme de tout vous expliquer, mais franchement il suffit de lire.

Pour avoir la liste complète de ce qu’il est possible d’installer, on peut se rendre sur GitHub, sur cette page. À savoir que vous pouvez créer vos propres formules et la proposer à la communauté si vous voyez un manque. Homebrew m’a servi pour installer quelques paquets toujours pratiques comme git, ffmpeg, x264, mongodb, redis, htop, wget…

Site web de Homebrew.

Mes polices web préférées [serifs]

Jérôme M. — Sun, 23 Oct 2011 20:04:59 +0000

Le marché des « web fonts » ne s'est jamais aussi bien porté. Et son avenir le semble tout autant. La quantité et la qualité des polices croissent tous les jours et avec l'aide des services comme Adobe Typekit et Google WebFonts, l'intégration est simple.

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.

Fig. 1: Le blog personnel de Trent Walton utilise cette police à 100%. Elle rend bien à n'importe quelle taille que ça soit pour les paragraphes ou les headings grâce notamment à son « x-height » élevé.

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.

Fig. 2: Le blog de Rob Weychert l'utilise dans ces paragraphes.

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.

Fig. 3: Dan Cederholm l'utilise dans les paragraphes de ces articles.

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.

Fig. 4: Elliot Jay Stocks utilise cette police à toutes les sauces. Dans les paragraphes ou les titres en majuscules avec un letter-spacing etc.

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.

Les césures dans le web

Jérôme M. — Mon, 10 Oct 2011 21:59:14 +0000

En typographie, la césure est l'art de couper un mot de telle manière à ce qu'il entre dans la justification. Cette pratique est utilisée dans les livres et depuis peu de temps possible aussi sur le web.

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 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 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.

CSS Multi-Columns

Jérôme M. — Thu, 06 Oct 2011 22:28:43 +0000

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

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.

Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

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

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.

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

Un exercice sur le Responsive Web Design

Jérôme M. — Sun, 28 Aug 2011 16:44:28 +0000

Mon blog est maintenant responsive. Terme que l'on peut traduire à l'arrache par qui répond bien. Le thème et le contenu va automatiquement s'adapter à la taille de l'écran. Le concept est intéressant et plus pratique que de faire un thème normal + un thème mobile par exemple. À l'heure actuelle les sites internets ne sont plus seulement affichés sur un ordinateur mais de plus en plus souvent sur des appareils de type mobile, smartphones ou tablettes.

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.

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 .

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

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.

Wallpapers of the Week

Jérôme M. — Mon, 08 Aug 2011 11:04:10 +0000

Wallpapers of the Week : 8 août 2011.

NY state of mind vs LA state of mind

green...ish? by ~liqui

Grape Leaves by ~Zim2687

Icewind Dale by *IrvingGFM

Suong Dem by =kAtz93

Mockups des futures versions de Firefox 7 & 8 — Mac, Windows

Jérôme M. — Thu, 04 Aug 2011 20:15:20 +0000

La team des designers Firefox ne cesse de rechercher à améliorer l'ergonomie du navigateur. Et aujourd'hui ils nous proposent des mockups de ce que pourrait ressembler les futures versions de Firefox 7 ou 8. Firefox 4 avait déjà vu son interface grandement changée, l'histoire risque encore de se répéter — et c'est tant mieux !

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

Phollow.me

Enlarge your police

Être lu comme on lit un livre

Le nombre optimal de caractères par lignes

Autres considérations

Conclusion

Articles similaires

Mes polices web préférées [sans-serif]

LFT Etica Web & PT Sans

Proxima Nova

FF Dagny Web Pro

Myriad Pro

Ratio

Articles similaires

7 frameworks CSS pour développer en Responsive Web Design

320 and up

1140 CSS Grid

Less Framework 4

Mobile Boilerplate

Skeleton

Golden Grid System

The Semantic Grid System

Articles similaires

Homebrew, un gestionnaire de paquet pour Mac OS/X

Pré-requis

Installation

Et ensuite on peut RTFM

Articles similaires

Mes polices web préférées [serifs]

FF Meta Serif Web Pro

Adobe Minion Pro

FF Tisa Web Pro

Skolar Web

FF Scala Web

Articles similaires

Les césures dans le web

Nouvelle méthode CSS3

Hyphenator

Examples

Articles similaires

CSS Multi-Columns

Qu'est-ce que c'est ?

Compatibilité des navigateurs

Utilisation

Exemples

Séparation en deux colonnes

Code

Séparation en trois colonnes + style

Code

Conclusion

Articles similaires

Un exercice sur le Responsive Web Design

S'adapter

Bonjour media query

Responsive Grid

FitText

Thème Phollow

Articles similaires

Wallpapers of the Week

Articles similaires

Mockups des futures versions de Firefox 7 & 8 — Mac, Windows

Articles similaires