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 notamment l’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 – lire 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

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 ? Quelles sections, phrases, mots, mettre en exergue ?

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.

4. Print it!

Depuis sa version 2, en 1998, le langage CSS permet de spécifier des propriétés dédiées (⇒ donner une forme spécifique) aux documents web imprimés. Si les fabricants de navigateurs n’en ont pas fait une grande priorité dans leurs développements, des designers ont investi cet espace et en ont fait un champ d’expérimentation, d’exploration et de production.

La section webtoprint offre une introduction à ces pratiques et référence des outils, inititatives et exemples de projets.

Parmi ces outils, la librairie Paged.js est l’une des initiatives les plus abouties et prometteuses. Basée sur les standards CSS Print définis par le W3C, elle permet de mettre en page des documents paginés (= des livres, des magazines, des fanzines), de les imprimer ou d’en générer des pdf depuis le navigateur.

La documentation –en anglais– de la librairie est importante. Lire notamment Getting Started with Paged.js et Named Page. Le dépôt Gitlab recèle de très nombreux et utiles exemples liés à des questions spécifiques et le projet qui a été présenté (Printing in Relation to Graphic Art).

Julien Taquet (et Julie Blanc) répondent régulièrement aux questions posées sur mattermost.

Un exemple, récapitulatif de l’ensemble des étapes parcourues, est accessible ici :

Go To Print