Comment on a designé un site de média mobile-first

Florent Tamet
Jan 12, 2016 · 10 min read

On avance sereinement et même plus rapidement que prévu. Sébastien enchaîne les lignes avec dextérité et volonté. Les fondations sont solides, propres et les premières bases prennent forme, dessinant peu à peu le minois relooké d’Ijsberg.

Peu de difficultés à relater pour cette première semaine. Aucun contretemps notable dont nous pourrions nous plaindre. Je pourrais arrêter l’article ici, du coup. Mais nous avons d’autres choses à vous faire partager aujourd’hui. Vous êtes prêts ? Très bien. Aujourd’hui, nous allons parler : DESIGN.

Leitmotiv pour les uns, gros mot pour les autres, le terme suscite beaucoup d’émoi. Nous avons tout entendu : « trop beau, donc pas assez grand public » (comme si la « populace » ne s’identifiait qu’au moche), « ronflant » (ça, c’était hier soir dans une interjection gratuite sur Twitter), comme « épuré », « stylisé » ou « efficace », dans la grande majorité. La notion de design, pour un média, semble assez aléatoire selon les perceptions de chacun. Alors je vais vous en parler : de notre démarche, de nos parti-pris et de nos difficultés. Le design n’est pas qu’affaire de délires créatifs ou de joli verni placé aléatoirement pour que « ça claque ». Le design en général, et le webdesign en particulier, supposent de composer avec des compromis, notamment techniques.

Pour rendre tout ceci plus tangible, utilisons la V2 d’Ijsberg comme un cas pratique.

1. Créer une atmosphère avec le moins d’éléments possible

L’énorme point faible de notre version 1 est le manque d’unité. D’un temps à un autre, d’une page de navigation à un article, le site ne présente pas le même visage. Nous le voulions protéiforme, certes, mais pas à ce point. « Déroutant » est l’adjectif qui revenait le plus régulièrement au sujet de la navigation. Pour un nouveau visiteur, arriver sur la page d’accueil d’Ijsberg revient à lui bander les yeux, le faire tourner dix fois sur lui-même et le lâcher en pleine forêt ; un seul contenu occupant tout l’écran, pas de thématiques classiques auxquelles se référer, le tout doublé d’un nom de site avec beaucoup trop de consonnes pour un média respectable. Le plus gros de mon travail, pour cette deuxième version, a été de combler ce déficit de repères et d’intégrer une cohérence spatiale logique. Il a donc fallu tout gommer et repartir de zéro. D’autant que, soyons francs, la première version avait été pensée pour desktop puis adaptée sur mobile.

Sur mobile, que nenni. Tout est affaire d’efficacité et de lisibilité.

Plus d’un an est passé et aujourd’hui, au même titre que le reste du web, la majorité de nos visiteurs proviennent de supports mobiles. Nous avions réussi, pendant un temps, à afficher un fabuleux 33–33–33 (mobile, desktop, tablettes), qui s’en est bien vite allé. Plus de doute aujourd’hui : Instant Articles de Facebook, Project AMP de Google, le mobile est bien le maître-étalon.

Qui dit écrans mobiles dit, évidemment, peu de place. Composer une maquette de média sur desktop est relativement simple ; l’espace est large, l’horizontalité des écrans facilite le colonage hérité du papier et l’on peut facilement placer des éléments tout à fait incongrus mais néanmoins utiles, tels que des suggestions Outbrain ou de grands encarts clignotant.

Sur mobile, que nenni. Tout est affaire d’efficacité et de lisibilité. Bon point pour nous, Ijsberg a banni la publicité de son site et s’inscrit dans une démarche de « content first ». Verdict : la transition de la maquette desktop-first vers une nouvelle maquette mobile-first s’est faite sans encombre. Ijsberg s’adapte très bien à cette nouvelle contrainte.

Revenons à la cohérence. Dès les débuts d’Ijsberg, nous avons souhaité donner énormément de place aux temps d’information. Quand la version 1 marquait structurellement la différence entre les trois (Promptement, Calmement, Lentement), la version 2, elle, explicitera beaucoup plus leurs identités respectives. Pour cela, nous avons procédé à un redesign de leurs logos. Jusqu’alors représentés en pictogrammes, ils assumeront demain davantage leur aspect « brand » (j’entends d’ici les huées). Conservant l’héritage du pictogramme, nous les faisons ainsi évoluer vers une forme typographique, plus explicite.

Demain, sur la nouvelle version d’Ijsberg, le logo du média apparaîtra sur la homepage et sur les pages de navigation. Dès que vous vous trouverez sur une page en lien avec un temps, c’est le logo du temps en question qui s’affichera dans le menu et non celui d’Ijsberg. Il s’agit de la suite logique de la désolidarisation d’Ijsberg en tant que vecteur de contenu, au profit de ses « rubriques ». Là encore, il ne s’agit pas d’une fantaisie différenciatrice. Si nous faisons ce choix, c’est que les modes de narration sont différents selon les temps. Un Promptement ne raconte pas une histoire de la même manière qu’un Lentement : leurs démarches éditoriales respectives s’inscrivent dans la vision globale d’Ijsberg, mais leur mode narration est différent.

Et l’unité dans tout ça ? Bonne question. Bien plus que la version 1, la version 2 fera appel à des élément fixes : des repères invariables et rassurants destinés à être des points d’ancrage. Où que vous vous trouviez sur Ijsberg, ils seront là. Répondent à l’appel : le logo du temps, le menu, les boutons de partage et une autre fonction dont je ne vous parlerais pas aujourd’hui. On ne se refait pas, on aime le teasing.

Plus généralement, nos contenus répondront à davantage de règles, notamment celle des tiers. Elle répond à une interrogation simple et légitime : comment présenter différemment — mais avec cohérence — des articles venant des trois temps ? Les tiers semblaient être la réponse la plus évidente : trois temps, trois niveaux d’immersion différents, donc trois degrés de couverture de l’espace. Mon échelle a été l’immersion : plus le temps en question est immersif, plus l’image doit occuper l’espace. On arrive très vite à une règle simple : Promptement, l’image occupe un tiers de l’écran, Calmement deux tiers et Lentement trois tiers. En image, ça donne ça :

Autre élément d’identité, la typographie. À notre lancement, il y a un an et demi, nous avons fait le choix d’attacher à Ijsberg une double typographie très web. Pour les titres et les corps gras : Raleway. Pour les textes : Lato. Aujourd’hui duo fameux, ces deux typographies commençaient à peine à se faire remarquer à l’époque.

L’histoire de Lato avait une signification particulière pour nous. Créée par le designer Łukasz Dziedzic, elle était originellement destinée à l’un de ses clients. Après que le client ait choisi d’emprunter une autre direction typographique, Łukasz Dziedzic a souhaité mettre sa typographie, dont le nom signifie « Été » en polonais, en libre accès sur internet. De grande qualité, elle a vite été repérée et intégrée comme police par défaut dans le thème Twenty-fourteen de Wordpress.

Combinée à Raleway, elle constitue une police agréable, fine et haute. Pour la version 2, nous souhaitons conserver les typologies de ces deux typographies, tout en accentuant leur caractère identitaire. Le choix de la police n’est pas à prendre à la légère : il ne repose pas sur des considérations purement esthétiques.

Sur le web, deux catalogues majoritaires de polices existent et permettent de les afficher sans encombre sur tous les périphériques : Googles Fonts et Adobe Typekit. Pour cette version, nous avons choisi deux polices Adobe.

Plus à notre goût, les typographies présentes sur Typekit nous permettaient de piocher dans un éventail plus en phase avec la nouvelle identité d’Ijsberg, tout en optimisant le chargement. Les deux typographies que nous avons retenues sont :

Épaisse, ronde et assez « fun », cette typographie marque une rupture avec le côté rigide de Raleway. Encore plus web et aussi plus actuelle, elle a dans son ADN suffisamment de caractère pour que vous sachiez immédiatement où vous vous trouvez.

Qualifiée d’ « Helvetica pour lecteurs », Acumin Pro représente une alternative plus professionnelle et confortable pour les longues lectures. Bien que nous ayons choisi de conserver un corps relativement light, la lecture sera facilitée.

Nous voulons un site universel, capable de charger vite et partout. Les dernières études publiées par Chartbeats montrent que les internautes veulent naviguer sur des sites dont le temps de chargement des pages n’excède pas deux secondes. 47% avortent leur tentative lorsque ce délai excède la troisième seconde. Ce n’est pas négligeable. En plus de l’optimisation de nos serveurs, Sébastien a également réécrit le code de manière à l’alléger le plus possible et ainsi accélérer le chargement d’Ijsberg. Mes choix de design, devaient donc prendre en compte ces données et s’adapter à la réalité.

2. Les questions toujours en suspend

Évidemment, tout ne va pas comme sur des roulettes. Nous sommes pour le moment en plein débat concernant trois questions fondamentales. Peut-être à la lecture de ces paragraphes aurez-vous des suggestions. N’hésitez pas à en faire part dans les commentaires ou à nous faire signes sur les réseaux sociaux.

L’équipe est en désaccord. Je vous plante le décor : consécutivement à notre choix de « brander » les temps et de n’afficher que leurs logos à la place de celui d’Ijsberg, je souhaite également qu’ils remplacent l’icône de menu. À la place d’avoir un « hamburger » comme il est de mise sur mobile, je souhaiterais inciter le clic sur le temps par une animation CSS. Il ouvrirait ensuite le menu d’une manière tout à fait normale.

Ma croyance est qu’il est possible de remplacer l’icône affreuse et inutile du menu en intégrant subtilement sa fonction aux différents logos. Une autre partie de l’équipe pense qu’il est préférable de jouer la carte des repères, en attribuant une icône connue au menu.

Avouez, vous trouvez ce débat futile. Mais il n’en est rien. Notre nouveau menu fera pleinement écho à la nouvelle navigation plus claire du site ; notamment par une structuration visuellement explicite de la place des temps dans la navigation, mais également par l’usage d’animations CSS le plaçant « par-dessus » le site. Par souci de cohérence, je souhaiterais que tout passe par une seule et même porte d’entrée/sortie : les logos. Je souhaiterais que le lecteur ait une expérience tactile avec la navigation, qu’il se l’approprie.

Bien sûr, cela suppose de distiller une nouvelle dose d’insécurité en faisant disparaître une figure bien connue des internautes. Le débat suit son cours, nous sommes preneurs de vos conseils et avis !

Peut-être l’ignoriez-vous, mais Facebook — et plus largement les réseaux sociaux dans leur ensemble — représentent aujourd’hui la première source de trafic des sites d’information, devant Google. Ijsberg n’échappe pas à la règle : la majorité de notre trafic provient aujourd’hui des réseaux sociaux. Il convient donc de soigner le partage des articles. Là encore, deux écoles. Une partie de l’équipe aspire au minimalisme, avec la présence fixe des boutons de partage dans la barre de menu. L’autre, notamment menée par Willy, notre redoutable Social media manager, estime judicieux de doubler la mise par la présence de boutons de partage en toute fin d’articles. La question à poser est donc : un article est-il partagé parce qu’il est bon ou bien parce que l’on affiche de gros boutons sous le nez du lecteur ? Là encore, je pense que la solution viendra de vous, n”hésitez pas à nous faire part de votre ressenti.

La question peut paraître idiote. Mais peu ou prou savent véritablement comment achever un article. Pour les médias à publicité, les recommandations Outbrain arrivent généralement juste après le point final. Pour les médias sans pub, il s’agit du bloc auteur — que nous avons préféré placer en haut des articles. Nous avons par ailleurs ajouté une nouvelle fonctionnalité : l’autoload. Plus besoin de cliquer sur quoi que ce soit à la fin de votre lecture, Ijsberg enchaîne automatiquement avec d’autres articles. Côté chargement, nous vous avons encore gâté : la plupart des médias à autoload préchargent l’article suivant très tôt dans la page, surchargeant la bande passante. Nous avons fait en sorte que le site précharge votre contenu suivant le plus tard possible, toujours par souci de vitesse de chargement. La boîte à outils s’épuisent, donc, d’où notre interrogation. À suivre.

À la semaine prochaine !

(PS : on cherche à renforcer l’équipe, si vous êtes intéressés c’est par là : http://join.ijsbergpress.com)

Ijsberg : le making-of

Comment nous construisons la startup média

Florent Tamet

Written by

Co-founder, Publication director and Editorial designer at @ijsbrg, Google Prize for Innovative Journalism 2014.

Ijsberg : le making-of

Comment nous construisons la startup média