Hafen 1.0 : un thème, 38 looks, zéro fichier de police
Notre thème de blocs quitte la série 0.x. La 1.0 transforme cinq variantes de couleurs en un système de looks à 38 visages, met la colonne de lecture au service de la lisibilité et embarque le durcissement issu d’une vraie migration en production. Voici ce qu’elle contient exactement et les décisions qui se cachent derrière.
Une version 1.0 pour un thème est une promesse : ceci est pensé jusqu’au bout. Hafen tourne depuis la version 0.4 sur des sites en production, de la fédération à la plateforme de coaching, et chacune de ces installations a laissé des traces dans le thème. La 1.0 rassemble tout cela en un état que nous assumons sans note de bas de page. Le plus gros morceau, c’est le système de looks.
De cinq variantes de couleurs à 38 looks
Presque tous les thèmes de blocs connaissent les variations de style, et presque partout cela veut dire : la même page dans d’autres couleurs. C’était trop peu pour nous, car le caractère d’un site tient au moins autant à la typographie, à la forme et à l’espace qu’à la palette. Les 38 looks de Hafen 1.0 jouent donc sur quatre axes de design : la couleur, la typographie (paire de polices et échelle de tailles), la forme (rayons d’angles, des angles vifs à la forme de pilule) et la densité (espacements, hauteur de ligne, largeur de texte).
Le résultat : huit caractères déclinés chacun en quatre versions, plus un électron libre pour la plage. Sobre et fonctionnel pour les prestataires, chaleureux et narratif pour les sites personnels, voyant et percutant pour les campagnes, calme et sérieux pour les cabinets et le conseil, accessibilité maximale, technique, ludique, éditorial. Changer de look est un clic dans l’éditeur de site, les contenus restent intacts, et comme les rayons et les ombres vivent depuis la 1.0 sous forme de tokens dans theme.json, les cartes, les boutons, les images et même la pagination du blog suivent le mouvement de façon cohérente dans chaque look.
Zéro fichier de police, et ce dans chaque look
Voici sans doute la décision la plus inhabituelle de la 1.0 : les 38 variations utilisent toutes des piles de polices système. Segoe UI sous Windows, San Francisco sur les appareils Apple, Roboto sous Android, soigneusement appariées et pondérées, mais sans le moindre téléchargement de police. Seul le look par défaut charge la police Inter fournie, en un seul fichier variable servi depuis votre propre serveur, sans aucune connexion à Google Fonts ni à un quelconque serveur tiers.
Le gain est double : il n’y a rien à charger et rien ne saute au chargement, et côté protection des données, il n’existe tout simplement aucun fournisseur tiers de polices auquel il faudrait penser.
La vérification des contrastes comme arrêt de chantier
Vérifier à la main la lisibilité de 38 looks est illusoire, alors c’est une machine qui vérifie. Un outil applique chaque variation sur la theme.json, résout toutes les valeurs de couleurs et mesure environ 30 paires premier plan-arrière-plan réellement présentes dans le thème contre les critères WCAG 2.1 AA. Si une paire obligatoire échoue, le build de release s’interrompt. Dès son tout premier passage, l’outil a trouvé six erreurs de contraste dans un état pourtant déjà validé, corrigées avec la 1.0. C’est exactement pour cela que l’on construit ce genre de garde-fous.
Une colonne de lecture au service du texte
Le changement le plus visible pour les sites existants : le corps du texte coule désormais dans une colonne de 680 pixels avec une police de base de 18 pixels, soit environ 68 caractères par ligne au lieu d’environ 90 auparavant. La règle typographique pour des lignes bien lisibles se situe depuis des décennies entre 45 et 75 caractères, et pratiquement toutes les plateformes de lecture s’y retrouvent. Les listes d’articles, les accroches et les blocs larges restent inchangés à 1180 pixels, et le texte gagne en plus un vrai rythme vertical : les titres s’attachent au paragraphe qui les suit au lieu de flotter à distance uniforme.
Et comme la largeur de lecture est aussi une affaire de goût, elle reste un réglage : dans l’éditeur de site, sous Styles, Mise en page, documentée en quatre paliers recommandés de 620 à 860 pixels. Le standard est une recommandation, pas un dogme.
Le durcissement issu d’une vraie migration
La 1.0 intègre par ailleurs tout ce que la migration d’un site de production bien rempli, d’un thème classique vers Hafen, a mis au jour : un template de page pour les anciens contenus à largeur fixe, un airbag d’embed contre les sauts de mise en page mobiles causés par de vieilles intégrations vidéo, des ancres qui ne disparaissent plus sous l’en-tête sticky et un menu mobile qui porte les couleurs du thème même dans les looks sombres. La série de mesures complète, avec tous les chiffres et toutes les limites, se trouve dans notre étude de cas sur le changement de thème.
Ce qui vient ensuite
La 1.1 est déjà esquissée : des recettes de pages complètes sous forme de patterns (accueil, à propos, contact, tarifs à assembler), une variante d’en-tête centrée et un renforcement de l’accessibilité en direction du label officiel accessibility-ready. Si vous avez des souhaits, le forum de support du thème vous est ouvert.
Essayer Hafen 1.0
Dans le répertoire officiel des thèmes WordPress, gratuit et sous GPLv2. Installez-le, feuilletez les 38 looks dans l’éditeur de site sous Styles et trouvez le vôtre.
Questions fréquentes
Hafen est-il vraiment gratuit ?
Oui, entièrement. Hafen est publié sous GPLv2 dans le répertoire officiel des thèmes WordPress, sans version Pro et sans fonctions verrouillées à débloquer. Les 38 looks, tous les patterns et tous les templates sont inclus dans le paquet gratuit.
Qu’est-ce qu’un look et comment en changer ?
Un look est une variation de style du thème : un ensemble cohérent de couleurs, de typographie, de rayons d’angles et de densité. Vous en changez dans l’éditeur de site, sous Design, Styles, en un clic, sans que rien ne bouge dans vos contenus. Revenir en arrière se fait tout aussi proprement, sans aucune perte.
La mise à jour vers la 1.0 modifie-t-elle mon site existant ?
Pas les contenus, et le look que vous avez choisi reste choisi. Ce qui change, ce sont des détails visibles : la colonne de lecture est un peu plus étroite avec 680 pixels, la police de base un peu plus grande avec 18 pixels, les titres se rapprochent du paragraphe qui les suit et les formulaires ont désormais leur propre mise en forme. Si vous préférez l’ancienne largeur, vous la rétablissez avec une seule valeur dans l’éditeur de site, sous Styles, Mise en page.
Pourquoi la colonne de lecture est-elle plus étroite maintenant ?
Parce que les lignes longues se lisent mal. Avec l’ancienne largeur, une ligne comptait environ 90 caractères, alors que la règle typographique classique se situe entre 45 et 75. Les nouveaux 680 pixels donnent environ 68 caractères. Les grilles magazine et les blocs larges restent à 1180 pixels, et la largeur reste librement réglable, documentée en quatre paliers de 620 à 860 pixels.
