Lorsqu’on travaille dans le web (mais pas seulement j’imagine), il n’est pas rare d’être confronté à une multitude de fausses idées préconçues sur ce qu’est un bon site web en général et sur nos métiers en particulier. À commencer par ma douce maman, qui croit encore que je travaille dans « l’informatique ».

Dans un registre plus professionnel, il n’est pas rare non plus d’entendre « je sais ce qu’il faut pour mon site web, moi qui vais sur internet à longueur de journée… ». Faux, comme dirait l’ami Norman. Ce n’est pas parce-que je mange du pain trois fois par jour que je sais en faire (et j’ai essayé), ou parce-que je conduis mon automobile chaque jour que je peux aller voir mon garagiste et lui expliquer ce qu’il doit faire et comment. Pour le web, c’est la même chose : il faut avoir des compétences (fini les sites web créés du fond de ma chambre) et connaître et appliquer les règles du métier.

Ceci dit, j’ai moi-même débuté du fond de ma chambre, mais c’était il y a fort longtemps, quand on voyait encore des sites avec des GIF animés et des couleurs qui piquaient les yeux. Aujourd’hui, nous sommes huit à bosser sur des sites web mitonnés aux petits oignons, ergonomiques, accessibles et (notre projet chéri du moment) adaptatifs.

Bref, développer un bon site web n’est pas si aisé que ça, comme faire un bon pain ou changer la tête de delco de sa Fuego. Voici donc quelques exemples tirés de nos vraies vies.

Vous pouvez me mettre ce texte en rouge ?

Il arrive que le rouge, le vert ou le bleu soit notre couleur préférée. Ou qu’on trouverait sympa de voir ce texte en rouge. Et pourtant, dans certains cas, un pro du webdesign s’acharnera à vous expliquer (ô monde cruel) que ce n’est pas une bonne option. L’esthétique c’est bien, mais c’est surtout subjectif (vous aimez, votre voisin déteste) et les couleurs sur un site web sont l’un des ingrédients de base pour que votre site web soit lu.

Mais pourquoi s’acharner ? Pour trois raisons ma bonne dame :

• La lisibilité : un site web est fait pour être lu. Mettre du texte en jaune sur fond blanc est totalement illisible, même si vous aimez le jaune ou que cette couleur fait partie de votre identité visuelle. D’accord, cet exemple est un peu extrême, mais il vaut aussi pour toutes ces couleurs qui « bavent », comme le vert sur du bleu.
• L’accessibilité : un site web est fait pour être lu par tous, que j’ai 10 à chaque oeil ou pas. J’avais évoqué le sujet dans un précédent billet sur le web accessible.
• Le sens : un site web est fait pour être lu et compris par tous. Pour illustrer mes propos, rien de mieux qu’une petite capture d’écran du site d’un titre de la presse quotidienne régionale :

Cliquez sur moi pour me voir en grand

Le rouge est utilisé à deux endroits : sur un bouton à droite pour attirer mon regard sur « je crée un compte », et au-dessus du formulaire d’inscription. Pour le bouton, ça marche : on comprend bien que Le Parisien a très envie que je créé un compte. Pour le texte, c’est loupé. Je viens d’entrer mes identifiants et on me dit que tout s’est bien passé (« identification réussie avec l’adresse e-mail »)… en rouge !

Mon premier réflexe est de me dire que je me suis trompé (je vois la couleur rouge, red alert, avant de lire le texte). Et je vous avoue que c’est encore le cas aujourd’hui, même si je sais que ce texte en rouge va apparaitre chaque fois que je me loggue.

Et puis, soit dit en passant, j’aurais mis cette ligne en-dessous des deux champs d’authentification et pas au-dessus, mais c’est une autre histoire…

Trop d’infos tue l’info

Sous ce titre accrocheur se cache une dure réalité : un site étant fait pour être lu, il faut donc qu’il y ait… du contenu dedans. Et il n’est pas rare qu’on veuille y mettre des tas de choses, et justement trop.

La solution ? Prévoir des parcours utilisateurs entre les visiteurs de votre site web qui souhaiteront s’informer, ceux qui voudront acheter et ceux qui chercheront où vous trouver. Il faudra d’ailleurs prévoir ces différents parcours à la fois dans le menu de votre site et dans l’organisation de vos pages elles-mêmes en surface (ce qu’on voit) et en profondeur (les différents liens internes).

Si on reprend l’exemple du Parisien, un site où il y a par définition énormément d’infos, la première page écran (c’est-à-dire ce qu’on voit lorsqu’on arrive sur le site) s’en tire plutôt pas mal. Par contre, si on commence à descendre sur cette même page, on attrape le tournis : des menus en veux-tu en voilà, des animations, des pubs, des espaces pour les partenaires… Bref, on en oublierait presque ce pour quoi on est venu.

Ce site n’est pas le seul dans ce cas, et il est souvent compliqué de trouver un compromis entre ce qu’on veut et ce qu’on peut ajouter comme contenu, et comment.

Ces parcours utilisateurs peuvent d’ailleurs être tout bien prévus pour attirer le regard de vos visiteurs là où vous souhaiteriez qu’ils se rendent. Parmi ces options, on peut évoquer le call to action, comme sur le site du Parisien dans l’exemple ci-dessus : le journal nous incite forcément à nous inscrire, et nous déblaye le terrain pour qu’on n’ait pas à chercher trop longtemps.

Le webdesign c’est aussi et surtout ça : concevoir «  l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web « , comme le dit si bien Wikipédia. On pourra aussi se baser sur des études utilisant l’eye-tracking et le mouse-tracking, qui permettent d’étudier les comportements des internautes sur votre site web : où regardent-ils, où vont-ils cliquer, etc. etc.

Bref, je n’ai pas traité ici de tout ce qui fait du webdesign un vrai métier, mais on voit bien ici qu’il y a un écart (que dis-je, un abîme) entre les deux faces d’un même site : entre ceux qui le conçoivent et ceux qui le visitent.

Le responsive webdesign est la solution clé pour résoudre les problèmes d’adaptabilité de votre site web… mais pas uniquement : la question se pose aussi, voire surtout, pour les campagnes d’e-mailing.

Pourquoi ? Parce-que les Français s’équipent de plus en plus en smartphones et en tablettes, et sont de plus en plus connectés en situation de mobilité. À ce sujet, les derniers chiffres sont tombés hier dans Les Échos : les ménages français ont acheté plus de tablettes que de bons vieux PC.

Sachant que les deux premiers usages mobiles sont 1) s’informer et 2) lire ses mails, on voit bien ici tout l’intérêt de repenser sa campagne d’e-mailing pour qu’elle soit lue par ceux que l’on vise, plutôt que d’être jetée à la corbeille en un glissement de doigt.

Flash (back) sur l’adaptatif

Le web adaptatif, c’est quoi ? Grosso modo, le responsive webdesign (en anglais, vous l’aurez compris) désigne une interface web conçue pour s’adapter à l’utilisateur, et donc au matériel qu’il utilise pour se connecter.

Depuis quelques années, la logique du web s’inverse doucement : on commence à pouvoir penser le web comme un outil à la disposition des internautes et non l’inverse. Je dis bien « pouvoir penser » car l’ergonomie web ne date pas d’hier, seul le contexte technique, et le contexte tout court (le grand Internet et le fourmillement d’internautes connectés), permettent au webdesign(er) d’évoluer et d’être plus responsive.

D’ailleurs, si vous souhaitez en savoir plus ce qu’est le responsive webdesign, je vous recommande chaudement de lire Quand le web design vous répond au doigt et à l’oeil.

Exemple d'un e-mailing en responsive design : version desktop (à gauche) et mobile (à droite)

Et l’e-mailing dans tout ça ?

Justement, l’e-mailing et l’adaptatif devraient être aujourd’hui conçus main dans la main, together forever, bref ils sont aujourd’hui indissociables. On l’avait vu dans un précédent billet sur la petite histoire du mail : consulter ses mails en situation de mobilité devient monnaie courante, voire notre principal mode d’accès à notre boîte aux lettre électronique.

C’est en tout cas ce qui ressort d’une étude que nous avions relayé début janvier, dont on ne sait précisément quels sont les pays visés, je vous l’accorde. Ceci dit, je pense ne pas trop me risquer en disant que les détenteurs de smartphones en France consultent tous les jours leurs mails sur leur mobile, et même parfois uniquement selon le jour ou l’heure de la semaine.

Vous voyez où je veux en venir : le webdesign adaptatif prend tout son sens car il est presque impossible de prévoir sur quel modèle de smartphone, avec quelle taille d’écran, ou même sur quelle tablette ou sur quel ordinateur votre campagne d’e-mailing sera lue.

C’est donc à ce moment-là qu’apparait super-media query, ces requêtes qui permettent à votre interface de s’adapter à l’utilisateur et de lui apparaître lisible et attractive.

Exemple de test de compatibilité : e-mailing et responsive webdesign

Chez LunaWeb, nous avons tranché (chérie) pour une solution maison qui permet à nos clients d’écrire le contenu de leurs newsletters sans s’occuper du contenant, qui est prévu en responsive webdesign. Et hop, leurs newsletters, landing pages et liens internes à la newsletter sont tous adaptatifs ! En amont, nous avons bien sûr longuement bossé sur la compatibilité de ces e-mailings sur n’importe quel outil de messagerie, webmail, navigateur ou matériel utilisé en situation de mobilité… ou pas !

Alors bien sûr, ce travail de fond technique (ergonomie, webdesign, adaptabilité) est lui aussi indissociable du travail de fond en amont sur la forme à savoir le contenu, les destinataires, le meilleur moment pour l’envoyer et bien sûr le fameux call to action. Mais c’est une autre histoire, et n’ayez crainte, nous y reviendront…

Vous pourrez aussi lire à ce sujet Usabilité : l’iPad sous l’œil du microscope

Allez, 2011 est finie, l’occasion de vous souhaiter rapidement nos vœux pour 2012, nous aurons d’ailleurs l’occasion d’en reparler ici tout prochainement.

Voilà plus de cinq ans que ce blog est animé par la LunaTeam, évoluant en teneur et en longueur, au fil du temps et des envies. On se souvient notamment du billet (synthétique… enfin presque) de Gaël-Ian sur l’ergonomie de Mac OS X ou encore du petit journal de tranches de vie que nous concoctait Antoine, puis Guillaume chaque semaine.

Bref, depuis cinq ans, nous essayons d’expliquer notre métier, ce qui se fait de « bien », pourquoi c’est souvent utile et pourquoi c’est un vrai métier.
En 2011, nous avons mis sérieusement la main à la pâte. Voici un petit flash back de nos billets préférés, à découvrir ou redécouvrir.

Du web… en barre

Cette année, nous vous avons conté l’histoire des moteurs de recherche (comment ça marche, comment ils évoluent), des flux RSS (quelle est donc cette bête étrange que nous utilisons au quotidien) ou encore de l’eye-tracking, qui permet de comprendre les parcours de lecture des internautes (qui ne sont pas si évidents que ça en réalité !)

On vous a aussi expliqué ce qu’est l’HTML5 et les QRcodes, ces codes qui font fureur depuis longtemps dans d’autres contrées, et qui sont apparus il y a peu dans l’hexagone.

Côté cuisine, nous vous avons révélé les recettes de mère-grand pour mitonner des formulaires d’inscriptions qui remplissent leur objectif (qu’on y réponde !), ou encore comment réussir sa campagne AdWords.

Qui dit web, dit aussi web accessible, thématique chère à notre coeur, et qui commence à percer dans le monde du web (mon petit doigt me dit que l’engouement pour le référencement n’y est pas pour rien, parce-que les contenus accessibles sont aussi SEO friendly).

On vous a aussi plus récemment parlé du webdesign adaptatif, c’est-à-dire la possibilité de développer des interfaces web qui comprennent toutes seules (ou presque) sur quel support vous naviguez, et surtout sur quel écran.

Ce qui m’amène au prochain sujet : la mobilité.

Du web… mobile et social

Le cheval de bataille actuel des webdesigners férus d’ergonomie et de d’usabilité ? Les interfaces mobiles ! Les internautes de France et de Navarre s’équipent de plus en plus de smartphones et autres tablettes, mais les sites web (ou même les applications) qu’ils visitent restent encore difficilement accessibles, ou tant tout cas n’ont pas été conçues pour ces écrans et pour la navigation tactile.

Bref, nous vous avons décortiqué l’usabilité sur iPad et le cycle de vie d’une application iPhone, car le monde du web et a fortiori le monde mobile, sont en constante ébullition.

Côté étude, nous avons tiré le portrait des mobinautes français et des utilisateurs de tablette en général. On vous a expliqué pourquoi les sites web ne vont pas disparaitre de si tôt, même si on s’enthousiasme des plateformes et des outils du web social.

D’ailleurs, à ce sujet, nous sommes revenus sur ce qu’est le web social. J’ai même expliqué à ma chère maman ce qu’est l’e-réputation, et en trois volets s’il vous plait !
Madame Michu, boulangère de « A la bonne mie » (fictive malheureusement) nous a d’ailleurs apporté son aide grâce à son témoignage.

Nous avons aussi pris notre plume pour expliquer pourquoi la curation nous agace un peu, et nous avons expliqué les applications pratiques du web social (qui ne sont pas limitées à avoir des amis sur Facebook et à raconter ce qu’on mange sur Twitter), comme le social CRM, ou la gestion de la relation client grâce aux médias sociaux.

Bref, 2011 a été une année bien remplie pour le blog de Luna, en plus de l’être également pour la LunaTeam. En 2012, quelques surprises vous attendent… pour de nouvelles aventures ! D’ici là, nous vous souhaitons une excellente nouvelle année!

Fin d’année oblige, de nombreux professionnels s’emparent de leur plume bloguèsque pour faire le point sur ce qu’a été le web en 2011 et sur ce qu’il sera en 2012.

Deux billets, ou plus précisément deux recueils de points de vue, m’ont tout particulièrement intéressés cette semaine, à savoir What I Learned About the Web in 2011 du très bon A List Apart et Les douze tendances de consommation incontournables pour 2012 de Trendwatching.

La combinaison des deux est plutôt intéressante car le premier est plutôt orienté webdesigner / pros du web, alors que le second se concentre davantage sur les consommateurs. L’un n’allant pas sans l’autre, je vous propose, ladies and gentlemen, de vous en extraire quelques morceaux choisis.

Des webdesigners enthousiastes…

Sur A List Apart, les professionnels du web l’affirment : le web ne doit plus être considéré comme une plateforme, mais comme un service aux internautes, aux formes multiples. Un designer ajoute :

Wired Magazine called it the “death” of the web. I call it an evolution.

Pour d’autres, la clé réside dans l’adaptabilité des interfaces web : dans la même mouvance que les usages du web social, le web et ses interfaces doivent s’adapter aux utilisateurs, plutôt que l’inverse.
En 2011, le webdesign a pris son envol. Souvent oublié et considéré comme superflu, il est aujourd’hui de plus en plus intégré dans la réflexion en amont :

Most websites and apps launching today all are beautifully designed with care. People realize design isn’t just something you slap on your product right before it ships, but is something you take into account from day one.

On pourrait d’ailleurs constater que ce problème se déplace en partie sur les interfaces mobiles, qui sont aujourd’hui le cheval de bataille des webdesigners :

Mobile apps and websites have to be more than lite version of their desktop counterparts; they should have the conceptually same content and features as other platforms. Our job isn’t to remove complexity but to make complex information accessible—a challenge for the small screen, but an important one.

Je n’oublie pas bien sûr le responsive webdesign, qui est aujourd’hui l’une des composantes essentielles du webdesign, même si elle reste perfectible :

Unlike many design trends, (…) responsive design has an immediate positive impact on users. This really sets it apart as something more than a simple trend or technique. It’s now a fundamental tenet of web design.

… et des consommateurs chouchoutés

Parmi la dizaine de tendances évoquées par Trendwatching, une bonne partie touche à la mobilité et ses usages. J’en ai retenu trois, que nous avions déjà évoqué (au moins un peu) sur ce blog.

La première est « la culture de l’écran » : les écrans, déjà bien présents dans notre vie, vont nous suivre partout. Ceux des ordinateurs au travail, celui du smartphone entre deux trains, et celui des tablettes pendant nos temps « off » et de de loisirs.
Les écrans, quelle que soit leur taille, ne sont plus réservés aux geeks ou aux férus de technologie : l’offre de produits mobiles est de plus en plus variée et les prix de plus en plus accessibles. Et c’est sans compter sur le développement du web social (qu’on souhaite échanger des infos ou acheter des produits) ou de technologies comme le cloud computing, qui permet d’utiliser des applications sur n’importe quel ordinateur ou écran tactile. D’ailleurs, d’après Les Echos du jour : Près d’un tiers des internautes sont désormais « nomades ».

La deuxième tendance est le paiement sans contact, c’est-à-dire sans monnaie sonnante et trébuchante. Fini les poches pleines de pièces jaunes !
J’en avais parlé sur ce blog il ya peu : les banques et les différents acteurs du paiement en ligne comme Paypal s’intéressent de très près à la technologie NFC (Near Field Communication), qui permet de payer dans les magasins ou dans les transports en commun par exemple, tout simplement en passant son mobile à proximité d’un terminal. Il faudra quand même entrer un code (ou le compte bancaire risque de faire la tronche) et le tour est joué !

La troisième tendance est celle de l’accès instantané à des informations et à des connaissances, grâce à son smartphone. Trendwatching site l’exemple de Google Goggles, une application de reconnaissance d’images qui permet aux utilisateurs d’accéder à des infos complémentaires sur l’objet ou l’image devant eux. Si je me trouve face à une peinture de Frida Kahlo, et que je souhaite en savoir plus à ce sujet, il me suffit de la prendre en photo via cette application qui affichera ensuite des tas d’infos et des résultats complémentaires dans le moteur de recherche.

D’autres applications, comme celle d’Amazon, permettent de comparer les prix des produits vus en magasin à ceux du site marchand, en scannant tout simplement le code barre du produit. Je pense que vous avez aussi testé Shazam, application qui en a époustouflé plus d’un : vous n’arrivez pas à reconnaître le titre ou le chanteur de la mélodie qui passe à la radio ? Pas de problème, il suffit d’approcher votre iPhone près du haut parleur !

Loin de devenir des feignasses incultes et impatientes, ces innovations mobiles nous permettront d’en savoir toujours plus sur l’environnement qui nous entoure et d’interagir avec lui. D’ailleurs, une des dernières initiatives en date a été lancée par La Poste, qui combine à la fois l’utilisation du QR code, de la puce NFC et de la géolocation pour donner des informations pratiques aux personnes qui souhaitent poster une lettre (bureau le plus proche, levée du courrier, code postal, offres promotionnelles de commerces aux alentours, etc.)

En bref, beaucoup d’applications restent possibles… en route pour 2012 !

Le webdesign adaptatif, ou le responsive webdesign quand on est super bilingue, est l’un de nos sujets de prédilection chez LunaWeb. Nous y avons d’ailleurs consacré quelques billets, avec un premier article sur ses principes et ses applications, un second sur le très bon livre d’A Book Apart et enfin un troisième dédié aux sites mobiles.

En quelques mots, le webdesign adaptatif vise à placer l’internaute au centre des préoccupations et à mettre en œuvre des moyens techniques pour que la navigation web s’adapte à l’utilisateur et au matériel utilisé, plutôt que l’inverse. D’ailleurs le responsive s’applique aussi à d’autres métiers, comme l’architecture, qui travaille sur le même principe : un environnement adaptatif.

C’est en lisant le billet Responsive Web Design, most complete guide que j’ai eu envie de compléter ce qui avait déjà été écrit sur ce blog. Car même si le webdesign adaptatif est prometteur, il n’est ni parfait, ni la solution systématique.

L’option sur-mesure

L’article sus-cité souligne un élément essentiel dans le choix d’une version adaptative : les internautes qui accéderont à votre site web dans sa version « classique » (desktop) n’auront pas les mêmes attentes que ceux qui navigueront sur tablette ou smartphone. Doit-on alors toujours concevoir en adaptatif les sites Internet ?

Prenons l’exemple d’eBay, qui n’a (pour le moment) pas d’autre choix que de créer plusieurs versions de son site, en fonction du matériel utilisé pour se connecter. Et pour cause, le site d’eBay est tellement fourni en informations et en fonctionnalités qu’il ne peut être développé en adaptatif pour sa version mobile.

Dans ce cas précis, il faudra donc étudier ce que vont rechercher les mobinautes. Sur eBay, la page d’accueil du site mobile se focalise sur deux possibilités : s’identifier ou rechercher un produit. Pourquoi ? Parce-que le mobinaute ne navigue que sur une courte durée, avec ses gros doigts et avec un besoin précis.

Source : WebDesignShock

eBay a donc dû développer des versions radicalement différentes de son site.

• Une pour les mobinautes qui souhaitent trouver un produit et l’acheter en s’authentifiant rapidement à leur compte = 1 usage.
• Une pour la version « desktop », possédant toute sels fonctionnalités et avec laquelle il est possible de rester longtemps devant son écran sans en perdre la vue ou attraper un torticolis = plusieurs usages.

The winner is : ni l’une, ni l’autre… bien au contraire

Pour autant, cette règle ne s’applique pas à tous les sites. eBay est un exemple un peu particulier, mais qui met le doigt sur une réalité : tous les sites ne peuvent pas être conçus en adaptatif.

L’élément qui déterminera l’une ou l’autre option est centré sur l’utilisateur, après avoir étudié son comportement et ses attentes, qu’il soit en situation de mobilité ou non.

Mais comme bien souvent, la réalité (ô monde cruel) est bien plus compliquée que cela, car le webdesign adaptatif peut tout à fait être couplé au webdesign « sur-mesure » (on parle ici de sur-mesure à partir du moment où l’on décline un site en plusieurs versions adaptées au contexte d’usage). Car, contre toute attente, le responsive webdesign est une solution pertinente pour que votre site web soit mitonné aux petits oignons quelle que soit la taille de … votre écran d’ordinateur.
Aujourd’hui, ces écrans sont de longueur et de hauteur variables, qu’ils soient portables ou pas : on peut avoir un énorme écran (ex: iMac 27″) ou un mini-portable (ex: Assus Eee PC), et vouloir accéder au même site.

Bref, l’adaptatif n’est pas forcément LA solution quel que soit le site web. Pour autant, les possibilités multiples offertes par le responsive webdesign sont à étudier et surtout à pratiquer. Car l’un des principaux freins, qui est financier, finira bien par tomber avec le temps et les usages. Et alors là, mesdames et mesdames, on en reparlera !

Les applications mobiles, comme n’importe quel produit ou service, a son propre cycle de vie. Le connaître s’est avant tout identifier ses failles et l’adapter au mieux aux attentes des mobinautes.

D’après Josh Clark, auteur du livre Tapworthy: Designing Great iPhone Apps, ces mobinautes n’ouvrent en moyenne que vingt petites fois une application, et seulement un tiers des apps installées sont utilisées après 30 jours. A l’exception peut-être des applications d’utilité quotidienne comme la météo ou les lecteurs de flux RSS (encore que…). D’ailleurs, à ce sujet, nous avions publié quelques chiffres sur les mobinautes français en général, et les utilisateurs de tablettes en particulier.

Bref, la vie d’une application est globalement courte…

D’après cette infographie réalisée par UXmatters, le cycle de vie d’une application mobile se déroule en cinq étapes :

• La mise en vitrine de l’application sur l’App Store;
• L’ouverture de l’application pour la (toute) première fois (tou-toute première fois);
• La découverte et l’utilisation des fonctionnalités de base;
• L’approfondissement et l’utilisation de fonctionnalités plus avancées;
• La mise à jour.

À chacune de ces étapes, l’application concernée peut être supprimée sans pitié par son utilisateur si celle-ci ne remplit pas les conditions (représenté ici par des petits rond rouges où est inscrit « delete app »- oui, j’ai de bons yeux, merci).

Mais quelles sont ces conditions ? Pouf, pouf, voici donc un condensé des bons conseils prodigués par UXmatters.

La mise en vitrine

Qu’une application soit acceptée sur l’App Store ne vous assurera pas qu’elle soit 1) facilement trouvée par les mobinautes et 2) qu’ils aient envie de l’installer.

L’App Store est un magasin d’un format assez particulier puisqu’il ne permet pas aux mobinautes de toucher et d’expérimenter le produit, comme on le ferait dans les points de vente physiques (bon ok, peut-être pas à la boulangerie).

Pour faire son choix, l’utilisateur se base donc sur quatre types d’infos : le prix de l’application, sa description, les captures d’écran et les notes des autres utilisateurs.

Notre bon conseil : mettre en valeur et décrire précisément de quoi il retourne pour susciter l’intérêt du mobinaute et répondre à ses questions.

L’ouverture et la découverte

Ouvrir une application qu’on vient tout juste d’installer, c’est un peu comme quand on déchire le papier cadeau d’un paquet dont on sait à peu près ce qu’il y a dedans : si on est déçu, on passe à autre chose.

C’est donc LE moment où le mobinaute fait connaissance avec votre application et son interface, qu’il jaugera très rapidement.

L’utilisateur essaiera ensuite de tester les fonctionnalités de base de votre application. Par exemple, si je souhaite avoir toutes mes recettes de cuisine sur mon iPhone, je vais très vite chercher comment ajouter des ingrédients et comment rédiger une recette. Si je met plus de deux minutes (et encore) à trouver comment atteindre mon objectif, ou pire, si je me rend compte que cette application est seulement un recueil de recettes publiées par d’autres, je passerai mon chemin et j’essaierai une autre application.

Notre bon conseil : anticiper les fonctionnalités que vont rechercher les mobinautes en premier lieu et les rendre facilement accessibles, au risque d’être jeté à la corbeille vite fait bien fait.

L’approfondissement et la mise à jour

Si votre application passe le cap de la troisième étape, vous êtes près du but ! Car si j’ai trouvé, téléchargé, ouvert et testé (et approuvé) l’application, il y a fort à parier que j’essaierai d’autres fonctionnalités pour voir ce qu’elle a dans le ventre.

Si je reprend l’exemple du livre de cuisine, après avoir testé les fonctionnalités de base, je vais chercher comment partager mes recettes (par mail, sur les réseaux sociaux, etc.), comment les imprimer, comment ajouter des photos pour qu’elles soient toutes jolies, comment ajouter des tags personnalisés pour les retrouver facilement, etc. etc.

Et si je suis convaincu, je vais garder cette application sur mon iPhone et même (roulement de tambour) la mettre à jour. Cette dernière étape est essentielle puisque, même si votre application a passé les quatre précédentes sans encombre, il faut continuer à l’adapter (aux nouveaux OS par exemple) et à la perfectionner pour enrichir l’expérience utilisateur (par exemple, suivre l’évolution des usages sur le web social et proposer des fonctionnalités de partage).

Ensuite, la boucle n’est pas bouclée, ô monde cruel des applications mobiles : vous devrez continuer à faire vos preuves car vous retournez à la case départ pour les nouveaux utilisateurs, sans oublier de susciter encore et toujours l’intérêt de ceux qui l’ont déjà installée sur leur mobile.

Notre bon conseil : miser sur une interface ergonomique, sur l’étude de l’expérience utilisateur, et bien sûr sur le webdesign… que vous retrouvez d’ailleurs en fil rouge de chacune de ces différentes phases, de la mise en vitrine à la mise à jour.

Ce billet est fortement inspiré d’un article récemment publié sur UXmatters intitulé The Lifecycle of a Mobile App, a User’s Perspective.

Si vous suivez ce blog régulièrement, vous avez certainement vu passer des tas de chiffres qui soulignent que le smartphone c’est super, et que surtout, ce sera l’un des piliers du web de demain. La mobilité est déjà en marche : d’utilisation naissante nous sommes passés à une explosion des pratiques.

Et pour cause ! On l’oublie parfois, mais l’iPhone n’a pas toujours existé. Il fut un temps où nous devions lire nos mails sur notre bon vieil ordimini et pis c’est tout. Aujourd’hui on peut les consulter n’importe où !

Alors oui, on va me dire que l’iPhone n’est pas le premier smartphone, et que peut-être bien que je serai influencé par mon sérieux penchant pour les produits pommés. Oui certes, vous dirais-je. Mais l’iPhone est LE smartphone qui a fait exploser les usages mobiles : l’internet mobile, les applications diverses ou encore les opérateurs de téléphonie mobile qui se sont adaptés à la demande du marché (ou en d’autres mots nous éviter de perdre un bras à chaque facture mensuelle parce-qu’on a regardé deux vidéos).

En quatre petites années, si peu que ça, l’iPhone a modifié la façon dont nous nous informons, communiquons, consommons… Bien sûr, rien n’est parfait. Et cette société consommatrice à outrance ? Et mes données personnelles alors ? Et ma tranquillité ? Pourtant, m’est avis que les points négatifs ne font pas le poids contre toutes les opportunités que représente ce fabuleux appareil.

Tout ceci pour vous dire que nous n’en sommes finalement qu’au début et qu’il reste beaucoup à faire. Ça tombe bien, une étude toute récente s’est plongée dans les méandres de l’expérience utilisateur pour nous montrer…. que les mobinautes sont globalement agacés.

Pour info, cette étude a été réalisée un peu partout dans le monde, dont en France. Un répondant sur huit étant Français, on peut estimer que, pour une fois, cette étude est adaptée à nos usages hexagonaux.

Ce qui fait fuir les mobinautes

D’accord, les mobinautes sont des impatients mal élevés : à force de les habituer à avoir tout tout de suite, ils nous tournent les talons dès qu’il s’agit d’attendre ne serait-ce que quelques secondes.

C’est d’ailleurs ce que nous montre cette étude : le temps d’attente est la première cause de frustration.

Vous l’aurez remarqué, les applications mobiles rencontrent plus de problèmes que les sites web « classiques ». Le premier point évoqué est la lenteur du chargement, puis les plantages divers et les « fausses promesses » (l’application ne fait pas ce qu’on attend d’elle).

Un peu plus loin dans l’étude, on apprend que l’internaute souhaite qu’un site web mobile se charge en 3 secondes maximum. Pour l’ensemble des pays interrogées, on arrive à une moyenne de 59%. Voici ce qu’ont répondu les mobinautes par pays :

Autre problème celui des plantages à répétition et autres bugs rencontrés par le mobinaute qui veut tout simplement prendre une photo, acheter un bouquin ou afficher une page. Erreurs fréquentes puisqu’elles occupent la seconde place dans le tout premier graphique.

Ce qui ne poserait pas de problème si… les internautes ne se disaient pas « fini, je ne reviens plus ! ». Et c’est quand même fâcheux de développer un site web ou une application mobile pour que ça ne serve pas, ou pire que ça vous desserve…

Pour conclure sur une conclusion

Ceci explique cela : comme de par hasard, une autre étude vient nous glisser à l’oreille que les « markerteurs » européens seraient globalement frileux à investir dans des déclinaisons mobiles. Si on fait un raccourci (mais pas si bête que ça) on peut dire qu’il y a ceux qui ne veulent pas en entendre parler (ils verront bien mon site sur leur mobile non ?) et ceux qui investissent peu (c’est trop cher !). Car développer une application ou un site qui soit ergonomique et qui fasse ce qu’on lui demande, c’est loin d’être simple et ça prend du temps et donc… de l’argent.

D’ailleurs, j’avais déjà évoqué quelques petites choses à prendre en compte quand on pense au web mobile. Pas plus tard que la semaine dernière, nous parlions sur ce blog de responsive webdesign, qui permet de créer des sites qui s’adaptent tout seul à l’appareil et à la taille de l’écran qu’on utilise.

On avait aussi parlé des bons ingrédients qui font une application réussie ou encore de l’e-mailing adapté aux smartphones et aux gros doigts qui y naviguent.

Les derniers chiffres de l’audience mobile de Médiamétrie en rajoutent une couche : les mobinautes français ne cessent de croitre (+10% au deuxième semestre). Nous sommes aujourd’hui près de 18 millions à posséder un smartphones, et 70% des mobinautes se connectent à internet tous les jours sur leur téléphone. De quoi faire réfléchir lorsqu’on voit la réalité du web mobile et les attentes de ses utilisateurs…

… ou presque ! Dans le jargon du métier on parle de responsive web design, ou en bon françois de web design adaptatif. Et vous allez voir que le titre de ce billet n’est pas si tiré par les cheveux qu’on ne pourrait le croire !

Mais avant de vous expliquer ce que voudrait dire ce « responsive », voyons voir de quoi il retourne quand on parle de web design. On voit bien qu’il s’agit de design pour le web (oui, je sens que vous me remerciez pour cet éclairage), mais pour être plus précis le web design dépasse la seule conception graphique et englobe plus généralement celle de l’interface (ce qui n’est pas tout à fait la même chose, vous en conviendrez).

Le web design repose sur quatre grands piliers (merci à Wikipédia pour nous avoir soufflé sa définition) :

• l’architecture interactionnelle,
• l’organisation des pages,
• l’arborescence du site,
• la navigation dans le site web.

Maintenant que nous nous sommes chauffés les mandibules avec ce premier élément de réponse, rentrons dans le vif du sujet…

Le pourquoi du comment

Si on devait résumer le responsive web design à deux mots, ce serait sans doute ceux-ci : réactivité et flexibilité. Ce « nouveau » concept n’est d’ailleurs pas uniquement réservé au monde du web : on parle aujourd’hui d’art interactif et de responsive architecture (pas pour le net mais pour les bâtiments cette fois-ci). L’idée sous-jacente de toutes ces nouvelles tendances est la même : l’utilisateur est au centre des préoccupations, et son environnement s’adapte à lui plutôt que l’inverse.

Et dire qu’il y a quelques années encore, on devait se lever pour changer de chaîne sur notre bonne vieille télé (et il fallait tomber pile poil sur la bonne fréquence) ! D’ailleurs, on pourrait très bien imaginer un système où le spectateur aura juste à penser à ce qu’il souhaite regarder pour que le programme voulu s’affiche tout seul. Je vous vois vous marrer doucement, mais nous n’en sommes pas si loin que ça…

Bref, au-delà du fait que nous devenons progressivement de grosses feignasses, le responsive web design répond à un besoin réel : internet est un univers mouvant, dont les usages, les supports et les habitudes de consommation évoluent et se transforment à toute vitesse. Qui aurait imaginé l’explosion des smartphones il y a quelques années ? Et c’est sans parler des tablettes…

Aujourd’hui, on navigue avec nos doigts, on joue vraiment dans un jeu (avec la Kinect), on peut tester des meubles ou essayer des habits chez soi avec la réalité augmentée… Bref, les films de sciences fictions n’étaient finalement pas si farfelus qu’on le croyait…

Prendre le train en marche

Je crois que nous sommes tous d’accord sur ce point : que le web du futur soit « web 3.0″ ou « web au carré » (web squared), la mobilité en sera l’une des composantes majeures. Pour autant, on continuera à cumuler tous les supports possibles et imaginables pour se connecter sur le net, en fonction du contexte. On utilisera son iPhone en attendant le métro pour aller au boulot, son ordi au travail, et son iPad en rentrant chez soi.

Mais voilà, tout ceci est très problématique pour ceux qui veulent communiquer sur la toile : comment faire pour que son site web soit visible de tous, sur n’importe quel support et quelle que soit la taille de l’écran (hé oui ! Tous les smartphones n’ont pas la même taille, ni les tablettes ou les écrans d’ordinateurs).

L’une des solution est de créer une déclinaison propre à chaque support (un pour l’ordi, un pour la tablette, un pour l’iphone), ce qui est coûteux et chronophage (hop, une modification effectuée sur l’une des versions devra l’être sur les autres). L’autre possibilité, c’est, je vous le donne en mille… le responsive web design mesdames et messieurs !

Cette solution repose essentiellement sur :

• des grilles fluides : pour faire simple, plutôt qu’une organisation figée des pages du site (telle taille et pis c’est tout), celles-ci s’adapteront automatiquement à l’espace qui leur sera accordé;
• des images flexibles : même chose pour les images dont la taille, mais aussi la disposition, s’ajusteront à l’écran utilisé;
• les requêtes de média qui permettent de vérifier quel est le support utilisé (ou plutôt la taille de son écran) et de s’adapter en conséquence.

Le responsive web design, c’est donc des contenus qui s’adaptent à leur environnement, au grand plaisir des inter-mobinautes. C’est n’est d’ailleurs pas seulement une question de taille de page flexible ou de texte qui s’agrandit ou non selon l’écran utilisé, c’est aussi une nouvelle manière de miser sur des interfaces ergonomiques : le responsive web design permet au contenant d’être réactif en faisant disparaitre ou apparaitre des éléments pour adapter la navigation au support (on pourra laisser plus d’éléments sur un site web « classique » et se concentrer sur l’essentiel pour sa version mobile).

Un petit exemple ? Jetez un œil à ce site, qui est non seulement très chouette mais aussi « responsive ».

Mais pas d’emballement, car rien n’est parfait dans ce bas monde ! Les possibilités techniques offertes par le responsive web design restent à parfaire… Et puis il faut aussi (et surtout) que nos chers navigateurs, qui ont toujours mis du temps à suivre les innovations, nous permettent d’utiliser pleinement le potentiel du responsive web design. Sachant que tout reste à faire en termes de mobilité (seulement un site web sur deux est accessible sur smartphone), nous risquons d’avoir du pain sur la planche… et tant mieux !

Le « web mobile », c’est notre dada ! Sachant qu’aujourd’hui un téléphone sur quatre acheté en France est un smartphone, ce sujet intéresse de plus en plus, et tout particulièrement les entreprises.

Certains prédisent même un renversement des tendances : d’ici 3 à 5 ans, les internautes navigueront majoritairement en situation de mobilité, plutôt que sur leur ordinateur.

Alors, développer une application ou un site mobile ? J’avais abordé ce sujet il y a quelques temps, n’hésitez pas à y jeter un coup d’oeil si vous souhaitez creuser le sujet. Car aujourd’hui, nous allons nous concentrer sur le site mobile.

Pourquoi ? Parce-qu’on a tendance à penser que les principes de design et d’ergonomie des sites mobiles seraient les mêmes que les sites web « classiques ». Et pourtant, ils sont très différents.
D’ailleurs, d’après une étude menée par Jakob Nielsen, 80% des sites web sont accessibles sur ordinateur, et seulement 64% des sites conçus pour mobiles.
Toujours d’après cette étude, seulement 53% des sites web prévus pour un écran d’ordinateur peuvent être consultés sur un smartphone… soit un sur deux !

Organiser différemment ses contenus

Le smartphone est un support particulier : son écran est plus petit qu’un écran d’ordinateur (320 x 480 pour l’iPhone par exemple), sa connexion internet est plus limitée et sa navigation se fait au doigt.

Trois bonnes raisons de revoir et d’adapter vos contenus ! Vous pourrez notamment :

• Choisir les contenus les plus importants : sur un site web « classique », nous disposons de beaucoup plus de place pour intégrer et écrire des contenus (même si nous vous conseillons -là aussi- de miser sur le minimalisme et la concision).
  Sur un site mobile, il faudra réduire d’autant plus la quantité et la longueur des contenus.
  Même chose par exemple pour le « footer » (le pied de page du site web qui permet de détailler le plan du site, les coordonnées de l’entreprise…) peut être long sur un site web. Sur smartphone, il faudra élaguer !
• Limiter voire supprimer les images et les animations : certains formats ne sont pas supportés par les smartphones (animations Flash et certains javascript notamment), autant les supprimer et utiliser cet espace pour publier du contenu vraiment important.
  Pour les images, c’est plus ou moins la même chose : si vous choisissez d’en ajouter, soyez très sélectif et surtout pensez à la résolution et au poids de ces images. Car si votre site mobile met trop de temps à charger, le mobinaute passera son chemin.
  D’ailleurs, l’esthétique d’un site mobile se travaille davantage sur le contenant (formes, couleurs, etc.) que sur le contenu (images, animation, etc.)
• Opter pour une lecture verticale et sur une seule colonne : le mobinaute lit de haut en bas, pas de gauche à droite. Le meilleur moyen de s’en rendre compte est de faire le test : intuitivement vous irez chercher le contenu vers le bas en non pas vers la droite.
  Et puis, les sites web peuvent être organisés sur une, deux, voire trois colonnes. Pour les sites mobilse, on devra se limiter à une seule colonne, pour des raisons de place, mais aussi d’ergonomie !

Site web et site mobile de LunaWeb

Naviguer au doigt… et à l’œil !

Je le disais un peu plus haut, le smartphone est un support à part. Au delà de son format ou de sa taille, sa particularité réside essentiellement dans la navigation qui est très différente entre celle « au doigt » et celle effectuée à la souris.

Il faudra donc adapter les menus et zones de navigation, comme par exemple :

• Prévoir un menu vertical : beaucoup de sites web organisent leur menu à l’horizontale. La lecture étant verticale sur smartphone, la navigation l’est aussi. Les « à propos », « nos prestations », etc. devront donc être organisés sur ce modèle.
• Ne pas inclure de « fil d’Ariane » ou « chemin de fer », qui permet à l’internaute de se repérer dans sa navigation sur le site. Les mobinautes vont très rarement en profondeur, et vont chercher les informations disponibles en surface.
• Limiter la navigation contextuelle, qui propose des contenus et des liens en fonction de ce que demande l’internaute et de ce qu’il visite. Les points de repère sont plus difficiles à identifier par le mobinaute, qui pourra se perdre rapidement si trop de possibilités s’offrent à lui. Et puis n’oubliez pas que sa navigation reste superficielle et qu’il est donc préférable de présenter en premier les contenus et informations que vous souhaitez mettre en avant.
• Inclure un nombre limité de liens hypertextes et de boutons d’actions car nous naviguons avec nos gros doigts et qu’il est possible (et frustrant) de taper sur un lien sans le vouloir. Les liens externes sont à limiter au strict minimum, car une fois sorti, il y a peu de chance pour que le mobinaute revienne sur votre site.

Pour conclure sur les sites mobiles

Pour développer un bon site mobile, la solution est sans doute de le considérer comme un moyen de communication à part, avec ses spécificités bien à lui.
En d’autres mots, plutôt que de faire une déclinaison de son site web, il faudra plutôt créer un site mobile tout court.

Pourquoi ? Parce-qu’on risque de mettre en ligne une version du site qui n’est pas adaptée à la navigation tactile, ou encore à la lecture sur petit écran.

Et puis, on risquerait aussi de passer à côté des opportunités offertes par les smartphones, qui permettent de se rendre sur internet où qu’on soit mais aussi de…. téléphoner !
Parmi ces opportunités, on peut citer par exemple celle d’être contacté directement (par téléphone donc) ou encore de profiter de la géolocalisation, afin de proposer des informations adaptées aux personnes mobiles et connectées (les magasins proches de vous, etc.)

Si vous souhaitez en savoir plus à ce sujet, vous pourrez lire 10 Ways Mobile Sites Are Different from Desktop Web Sites dont je me suis largement inspiré pour écrire ce billet, et consulter les recommandations du W3C pour les sites mobiles.

Le Web est un média naissant, l’information qu’il véhicule est transmise par des caractères et des images, animées ou pas. La typographie pour le Web a longtemps été LE parent pauvre du www, quelle misère de devoir composer avec les fameuses 11 polices compatibles !

Non, ce n'est pas la première version du Comic Sans MS

On devait alors composer avec le peu de variété à notre disposition (bon alors pour ce site, Arial ou Verdana ? Youhou !), ou passer les titrages en mode image pour éviter d’avoir une mise en scène proche du traitement de texte. Et donc alourdir le poids de la page, perdre l’accessibilité du texte, et faire reculer le référencement naturel.

Mais c’est fini ! Réduite initialement à un rôle purement pratique (juste pour lire du texte), la typo reprend ses lettres de noblesse sur le Web, et devient enfin un vrai vecteur de communication et d’identification du locuteur.

La typo, c’est quoi ?

Pour faire court, la typographie c’est (source Wikipédia) :

…l’art d’assembler des caractères mobiles afin de créer des mots et des phrases et de les imprimer.

Pur mieux comprendre la typographie, on peut notamment distinguer :

• la police (un ensemble de représentations visuelles de caractères),
• le corps (la taille de la police, mesurée en points),
• la mise en page (la disposition de ces caractères dans l’espace).

Pour pousser un peu plus loin dans le détail, on distingue les polices avec empattement (comme la Times New Roman) de celles sans empattement (comme la Sans-serif, aussi appelées « bâton »).

Au commencement…

Certaines typo sont vieilles comme le monde …enfin presque ! Par exemple, Helvetica a fêté ses 50 ans en 2007 (un film lui a même été dédié), Times New Roman fêtera ses 80 ans l’année prochaine.
Elles ont bien sûr été utilisées pour l’impression papier d’abord (la typographie existe quand même depuis 1440) et pour le web plus progressivement.

On se souvient tous plus ou moins de nos premières navigations sur internet, et encore mieux des premiers sites assez moches, avec ses pâtés de texte et ses liens en bleu canard…

Avec l’émergence Net, de nouveaux métiers ont éclos. L’édition électronique a progressivement pris ses marques. Les CSS, ces feuilles de style qui permettent de définir une fois pour toute l’organisation et la présentation de l’ensemble des pages web d’un site, n’existent que depuis une petite dizaine d’année.
C’est le CSS, couplé à la standardisation des navigateurs, qui ont notamment permis à la typo web de prendre toute sa place.

La typo pour le web, différente du print

D’autres que nous l’ont très bien résumé, comme Anne-Sophie Fradier lors de son intervention à Paris Web 2010 (vu chez Graphisme & interactivité) :

La page web est un Volumen, pas un livre, on la déroule. Le papier a des dimensions fixes et un contenu immuable. [Elle] n’a pas de dimension réellement prévisible, le web mobile, tout ce que l’on sait c’est qu’il offre un écran au format portrait.

(…) Avoir une « fin de page » n’existe pas sur le web, il faut donc trouver d’autres moyens pour assurer des pauses et assurer le confort de lecture. (…) On peut utiliser beaucoup la couleur (…), cela ressort mieux et s’avère souvent plus facile qu’avec l’imprimé.

On ne peut donc pas concevoir une page papier de la même façon qu’une page web : impossible de prévoir la dimension du support de lecture (la taille de l’écran), ni la façon dont les internautes le liront (ils peuvent par exemple agrandir la taille du texte pour mieux le voir).

Ceci dit, l’édition web ouvre de nouvelles portes vers la créativité et l’esthétisme du texte. En bref, on peut en faire des tonnes, sans perdre en confort de lecture.

Et aujourd’hui alors ?

Et bien aujourd’hui, ladies and gentlemen, vos navigateurs permettent à nos petites mains d’agence web d’inclure directement les polices !

Ça veut dire ? Et bien fini le choix ridicule des 3/4 polices archi-compatibles, désormais la technique Font-face de CSS3 permet de commander au navigateur d’aller chercher sur Internet la police que vous désirez afficher. Ça change tout !!

Ce qui signifie également qu’il en est enfin fini des textes en image. Résultat : des pages plus jolies et plus légères, des titrages accessibles aux moteurs de recherches, et l’assurance de conserver la possibilité de les modifier à la volée sur la forme (contenu du texte) comme le fond (graisse, couleur, famille, etc.).

Il y a tout de même encore quelques réserves (la liste des typos qui existent en format Web n’est pas infinie), mais l’essentiel est là !

Un exemple de site qui « tourne » selon ce principe, le récent Aqua Bien Être de Nantes que nous avons réalisé pour la société NGE :

Le Spa Aqua Bien Être à Nantes

Bien choisir une typo

À l’heure de choisir « sa » police, il convient de bien prendre le temps de tourner 7 fois son curseur autour du bouton de sélection.

Même s’il est possible d’en changer, autant éviter par exemple d’utiliser des polices dont on a usé et abusé (Comics Sans MS pour n’en citer qu’une, pas un menu de crêperie du fin fond du Trégor n’en est dépourvu…).

En effet choix des typos sur une page web est aujourd’hui tout aussi important que celui d’un logo : elle défini ou complète l’identité de celui qui l’arbore. Alors imaginez-vous le message global qui passe au moment de découvrir un site utilisant Comics Sans MS. Le site Bancomicsans se charge d’ailleurs de lui tailler un costard…

Autre conseil pratique dans le cas où vous décideriez d’utiliser une police existante, faites bien attention à ce qu’elle ne soit pas déposée et exclusive !
Dans la rubrique « faits divers », vous avez certainement entendu parler d’Hadopi qui a malencontreusement opté pour une police appartenant à France Télécom.

Les sites de polices gratuites abondent (dafont.com en est certainement le plus connu), mais ne vous y méprenez pas : le gratuit est rarement à la hauteur du payant, la typographie est un travail d’artisan, d’orfèvre même ; il convient de louer la qualité des collections réalisées par des professionnels, qui conçoivent des familles de polices capables de supporter différentes graisses, différents types d’affichage, et différents alphabets (qui n’a jamais pondu une super maquette pour un site en français, et se retrouve ensuite coincé par une police gratuite qui ne dispose pas de tous les accents, ou de version cyrillique pour la filiale russe du même site ?).

De nombreux sites font l’interface entre les grandes « fonderies » et le consommateur final, citons par exemple Myfonts.com.

Pour conclure

Chez LunaWeb, on utilise depuis un petit bout de temps des outils de remplacement de police tels que Cufón ou TypeKit, les nouvelles alternatives permettant de créer des typos web accessibles et dynamiques. Cette évolution technique n’a à ce jour aucun inconvénient par rapport à l’ancienne méthode (image ou création à la volée d’une petite animation flash contenant le texte mis en forme), si ce n’est d’être rendue inaccessible pour ceux qui ont désactivé Javascript sur leur navigateur (mais dans ce cas la police par défaut est utilisée, on ne perd personne…).

Un dernier petit mot avant de vous quitter : lors d’un récent voyage outre-manche, j’ai découvert un excellent bouquin retraçant l’histoire de typos célèbres, lesquelles se révèlent excellente à l’usage du design moderne : Classic Fonts For Contemporary Design.

Bonne lecture !