Text Edit


Objectif

Composer un texte responsive
mobile
écran
papier

Introduction

Le code fait loi

De la liberté dans le cyberespace


Lawrence Lessig

Code is law est le titre d’un article de référence écrit par Lawrence Lessig en janvier 2000 pour Havard Magazine.

Lawrence Lessig est professeur de droit des affaires au Centre Berkman de la Harvard Law School. Dans cet article, il présente le code comme la "loi du cyberpespace", proposant que selon comment le code est conçu il modifie radicalement la façon dont on peut utiliser les outils informatiques ou numériques.

L'auteur analyse notamment la régulation d'internet, ce que contrôle le code, évoque les architectures du cyberespace et enfin les valeurs sous-jacentes du code : les codeurs (majoritairement hommes, blancs, de classes sociales aisées) écrivent le code, mais avons-nous démocratiquement un mot à dire dans les valeurs qu'ils mettent dans celui-ci ?

La traduction du texte a été produite par Barbidule, Siltaar, Goofy & Don Rico pour Framasoft. L’article original est en ligne sur Harvard Magazine

Devenu un “classique”, le texte a inspiré de nombreuses réactions. Lionel Maurel en a proposé un renversement, « Law Is Code », sur son blog S.I.Lex. Véronique Bonnet, présidente de l’April, professeur de philosophie, propose Code is Education. Olivier Ertzscheid, pas avare en jeux de mots annonçait « Code is Jail / business / money / judge ». Lessig est par ailleurs un des fondateurs des licences Creative Commons et l’auteur du livre Free Culture, téléchargeable légalement ici-même.

Lire le texte


1. Mobile text first

L’approche mobile first, notamment développée par Luke Wroblewski dans son ouvrage éponyme (Mobile First, A Book Apart, Eyrolles, 2012, à télécharger ici) permet de se concentrer sur l’accessibilité et la lisibilité du contenu dans les conditions de mise en page les plus contraintes.

Il s’agit donc dans un premier temps de veiller à la qualité de la composition typographique : choix des familles de caractères, gestion de la hiérarchie, espace blanc, adaptation du corps de texte au support, etc.

Quelques exemples de composition de texte

Composition typographique
LeMonde.fr
Composition typographique
QZ.com
Composition typographique
Medium.com
Composition typographique
Material.io
Composition typographique
MagnetRiver.com
Composition typographique
Qalqalah.org
Composition typographique
ShapeOfDesignBook.com
Composition typographique
NYTimes.com
Composition typographique
Error.re

2. Vibration

Le design graphique est un langage dont la richesse réside dans la tension qu’il entretient entre art et communication, entre la mise en forme d’un matériau informatif et la création d’une vibration esthétique et sensible.

The important question then, is not: Are we becoming cyborgs? It is: What kind of cyborg do we want to be, now and in the future?

Mark Zuckerberg à la conférence Samsung au MWC2016, photo © Facebook + Sean Ness, Human+Machine Futures in Full Color: Extending Our Senses and Ourselves (IFTF, 2015) cité par la revue Z

Tout exercice de design propose au designer de s’approprier le contenu à mettre en forme. Les contraintes issues de l’approche mobile first, notamment spatiales, ne doivent pas empêcher l’audace et l’ambition dans la mise en page ou la composition typographique.

La convocation d’images, de citations, d’illustrations est possible. Tout comme est possible – souhaitable – la création d’un rythme au sein du document, qui soutienne la lecture.

Le paratexte (titre et sous-titre, auteur, date, colophon et crédits) doit être questionné et pris en charge pour le donner à lire : dans quel ordre doit-on afficher ces éléments ? Quels registres hiérarchiques doit-on proposer ? Est-il envisageable de commencer par le texte et de finir par le titre ? etc.


3. Think fluid

Le web est un média fluide.

☞ Une page Web est un document liquide : si on redimensionne la fenêtre d’un navigateur affichant un simple document HTML, les éléments s’adaptent à l’espace disponible et “coulent” à l’intérieur. Le “viewport”, la zone visible du navigateur n’a pas de dimension fixe, elle est “scrollable”, “zoomable” et sa dimension originelle, qui s’adapte naturellement à la quantité de contenu, est inconnue.

☞ Le Web est fluide temporellement, il est animé, il accueille des mouvements spatiaux, des vidéos et des animations, il est en transition entre de multiples états.

☞ Sa fluidité est aussi celle de son contenu. Il est traversé par des flux de données en évolution constante, qui émettent des signaux, se répondent

Le design fluide crée des architectures fluides : des structures malléables, liquides, capables de supporter toutes sortes de contenus

Louise Drulhe, Design Fluide, Manifeste

Références et ressources

Responsive 💧 man par Nir Avigad. The Quick brown 🦊 par Jonhatan Puckey. Requête 🚀 spatiale, workshop de Louise Drulhe et Raphaël Bastide. What You See 👀 Is What You Get par Jonas Lund.

Quelques ressources sur la micro et macro typographie et les bases du Responsive web design, ainsi que quelques exemples liés au RWD ou à la mise en page avec flex et grid, voire même à la mise en page de texte responsive.