L'allure de votre site

Site public → Apparence. Typoza ne propose pas des thèmes à installer, mais une dizaine de réglages qui composent une allure.

C'est une position assumée : on ne déplace pas des blocs sur une grille, on ne choisit pas la couleur d'un bouton en particulier. C'est ce qui permet à un texte publié aujourd'hui d'être encore correctement affiché dans cinq ans.

Les couleurs

Le réglage

Ce qu'il touche

Couleur des liens

Les liens dans le corps des textes

Couleur d'accent

Boutons, éléments mis en avant

Le mode de couleur

Trois valeurs : Clair, Sombre, ou Selon le système du lecteur.

La troisième est la bonne réponse dans presque tous les cas. Un lecteur qui a choisi un fond sombre sur son appareil l'a choisi pour une raison, et le lui reprendre au milieu d'une lecture est désagréable.

Les polices

Trois familles, réglables séparément :

• Police des titres

• Police du texte

• Police du code

Séparer les trois permet un titre marqué et un corps sobre, ce qui est la combinaison la plus lisible sur un texte long.

La mise en page

Le réglage

Ce qu'il fait

Largeur du contenu

La longueur des lignes, en pixels

Arrondi

Le rayon des coins — jusqu'à « Aucun »

La largeur est le réglage le plus sous-estimé de l'écran. Une ligne trop longue fatigue : au-delà d'une certaine largeur, l'œil perd le début de la ligne suivante. Si vous n'y touchez qu'une fois, touchez à celui-là.

La marque : logo et icône d'onglet

Un bloc à part, sur le même écran. « Le logo de votre bandeau et l'icône de l'onglet. »

Le champ

Ce qu'il demande

Logo

Affiché à la place du nom de l'atelier, en 256 px de haut. PNG, WebP ou AVIF, 512 Ko au maximum

Logo sur fond sombre

Facultatif. Sans lui, le logo clair sert sur les deux fonds

Icône de l'onglet

Carrée, 128 px de côté au minimum. PNG, WebP ou AVIF, 256 Ko au maximum

Icône sur fond sombre

Facultative, même repli

Deux comportements qui se remarquent, et qui ne sont pas des défauts :

• Un logo n'est jamais recadré. C'est la seule image du produit dont la forme appartient à quelqu'un d'autre. Donnez-la à la bonne hauteur.

• L'icône sombre n'est pas encore affichée. Elle est gardée avec votre atelier, mais aucune page ne l'annonce : Chrome et Firefox ignorent, sur l'icône d'un onglet, la bascule entre fond clair et fond sombre. L'onglet montre l'icône claire.

Sans rien poser, rien ne manque : le nom de l'atelier s'affiche à la place du logo, et une icône est générée depuis vos initiales et votre couleur d'accent.

Un lecteur qui revient sur votre site voit, sur l'icône de l'onglet, le nombre d'articles parus depuis sa dernière visite : « 2 », ou « 9+ » au-delà de neuf. Il n'y a rien à régler. Le compte tient toute la visite, pages suivantes et rafraîchissements compris, et repart à la suivante de ce que le lecteur a vu : une visite se termine après trente minutes sans page regardée. Pour s'en souvenir, son navigateur garde la date du dernier article qu'il a vu et l'heure de son départ : ni cookie ni requête, et la page des cookies les déclare.

La mention de Typoza

Sous la marque, un interrupteur : Masquer la mention de Typoza. Il est ouvert aux offres payantes, et s'enregistre dès qu'on le touche.

Où

Ce qui change

Le pied du site

« Propulsé par Typoza » disparaît

Le lien des cookies

« Les cookies de Typoza » devient « Cookies », vers la même page

Le pied de la Lettre

« Publié avec Typoza » disparaît

Un atelier sans article

Le mot du fondateur de Typoza disparaît ; l'horloge et l'inscription restent

La fin d'un article, dans le voisinage

« Ailleurs sur Typoza » devient « Ailleurs »

La page des flux

« Ces liens ne rapportent rien à Typoza » devient « Ces liens ne rapportent rien à personne »

Deux choses restent. Le lien vers les cookies : ceux que votre site pose sont ceux de Typoza, et la loi veut qu'un lecteur sache lesquels. L'adresse d'expédition de la Lettre, qui part sous le nom de votre atelier depuis une adresse de Typoza.

Une offre qui redescend à Découverte rend la mention sans effacer votre choix : elle repart avec une offre payante. Sur Découverte, l'interrupteur reste grisé, et un lien mène aux offres.

Le thème du code

Trois thèmes : GitHub, Vitesse, Catppuccin. Chacun en version claire et sombre, qui suit le mode de couleur choisi par le lecteur.

Voir Le code et sa coloration.

Prévisualiser avant d'appliquer

Un aperçu en bas de l'écran montre un titre, un paragraphe, un lien et un bouton avec vos réglages en cours. Il se met à jour pendant que vous bougez les curseurs.

Rien n'est appliqué tant que vous n'avez pas cliqué Enregistrer l'apparence.

Ce que vos lecteurs règlent pour eux-mêmes

Vos réglages font l'allure du site ; trois autres appartiennent à celui qui lit, et ne changent rien pour personne d'autre. Ils sont en haut à droite de chaque page, dans le gris discret du bandeau.

Le réglage

Ce qu'il fait

Le soleil et la lune

Le fond clair, sombre ou automatique, qui l'emporte sur votre mode de couleur

« Aa »

La taille du texte, en quatre crans — la colonne s'élargit avec elle —, et la police : la vôtre, ou l'une de deux polices dessinées pour lire plus facilement, Atkinson Hyperlegible et Lexend

Mode concentration

Près du titre d'un article : tout s'efface, sauf le titre, le texte et ses images. Échap le referme

À sa première visite, une courte phrase sous « Aa » les présente, puis s'efface. Rien de tout cela ne se désactive, et c'est voulu : l'accessibilité ne s'achète pas, et un lecteur qui lit mal les petits caractères ne doit pas dépendre de la largeur que vous avez choisie.

Ce qui ne se règle pas ici

• La disposition. Pas de colonnes, pas de barre latérale au choix, pas de blocs déplaçables.

• Les menus. L'en-tête et les trois colonnes du pied ont leur propre onglet, à côté de celui-ci : les menus.

• Les comptes de réseaux sociaux, qui sont dans Site public → Réseaux.

• Le CSS. Il n'y a pas de champ de feuille de style. Ce qui n'est pas dans cet écran n'est pas réglable, et c'est le prix de la promesse du début.

Un changement d'apparence laisse une trace dans le journal d'activité.