Case Study

Content First, by Jeffrey Zeldman

- 18.06.2012, an Event Apart, Boston

Contexte et découverte de la conférence.

Nous avons formé des groupes de 4 et avons reçu une conférence par groupe. L'objectif du travail était de s'approprier cette conférence et de la retranscrire pour le web, à l'écrit.

Notre conférence est donc "Content First" par Jeffrey Zeldman. Je connais déjà un peu Jeffrey, ce "meilleur ami du net", je vais pouvoir en savoir plus sur ce qu'il pense et le sujet de la conférence m'intéresse vraiment. Plutôt content, donc.

Content First? Content First.

La première partie du travail consiste en la rédaction du texte, à 4, on va pouvoir mettre en application ce qu'il se dit dans la conférence, tout ça a du sens, c'est merveilleux.

On s'est vite rendu compte que, malgré les premières impressions, la présentation n'est pas si structurée que ça. Après quelques écoutes, on dégage 3 grandes parties : la « souplesse » du design, le côté business et les différentes pratiques pour arriver à un contenu accessible à tous, ainsi qu'une conclusion reprenant quelques points de la conférence. Au sein de la partie sur la souplesse du design, on distingue également deux sous-parties différentes, la nécessité de pouvoir modifier le contenu sans casser le design, et le fait que le design garde son intégrité si les utilisateurs modifient des paramètres pour plus de lisibilité.

Nous avons également trouvé l'exemple des blogs intéressant, il résumait assez bien l'ensemble des idées évoquées au cours de la conférence. C'est pourquoi nous avons utilisé cette anecdote pour en faire une sorte de conclusion à notre retranscription.

Après plusieurs essais chacun de notre côté, on a comparé nos textes pour en créer un commun. Ca n'a pas été évident, Jeffrey utilise beaucoup d'exemples et d'anecdotes sous forme d'histoire qui prennent beaucoup de place dans sa conférence mais qui n'ont pas un grand intérêt à être racontées à l'écrit. Une fois un texte commun, on l'a écrit et réécrit plusieurs fois pour qu'il ait le plus de sens possible aux yeux de quelqu'un qui n'aurait pas vu la conférence. Au final, ce sont les transitions entre les différentes sections qui nous ont donné le plus de mal.

La mise en page.

La mise en page de la retranscription n'est plus en groupe, chaque membre fait la sienne. Le thème de notre conférence étant "Content First", créer une page surchargée de trop de style aurait encore moins de sens que pour une autre conférence. Je pars alors sur des idées simples, des couleurs sobres et des polices claires.

Concernant les polices, dans le cas d'une page avec beaucoup de texte, j'aime personnelle souvent l'association d'une sans-serif pour les titres et d'une serif pour les paragraphes. Après quelques essais, je retombe sur la Montserrat, que j'aime beaucoup, pour les titres et je choisis la Merriweather pour les paragraphes, assez légère et droite, qui me semble parfaite pour une lecture facile. J'ai choisi une hauteur de ligne de 28px pour mes paragraphes et un rapport de proportion de 1.25, qui m'ont permis d'obtenir des contrastes de tailles sans partir dans des extrêmes.

Montserrat Merriweather

Pour les couleurs, du blanc, un gris clair (pour le fond) un gris foncé, et un orange désaturé pour créer quelques variantes tout en restant dans des tons très sobres et classiques.

Les quelques images présentes sur la page sont là afin d'illustrer les exemples que Jeffrey Zeldman évoque au cour de sa conférence. Le tout est aligné sur une grille 6 colonnes, pour créer 3 colonnes de textes ou associer un paragraphe à l'image à laquelle il correspond.

Expérience globale.

Le travail de groupe s'est bien passé, même si on a plus souvent travaillé à 3 qu'à 4, et la demande était intéressante.

Au premier abord, je me suis dit plusieurs fois que designer une page contenant majoritairement du texte n'était pas très excitant et ne laissait pas une grand place à l'originalité, mais c'est en réalité justement un très bon exercice. Essayer de mettre en valeur ce texte, donner l'envie de le lire tout en le gardant comme élément central de la page n'était pas évident et c'est finalement ce qui m'a donné le plus de mal.