Lancement aujourd’hui de la nouvelle maquette d’Orient XXI (@orientxxi, #shameless_autopromo donc) :
►https://orientxxi.info
Évidemment c’est du pur #SPIP, et un aspect était d’assurer la continuité sans douleur avec les 2000 articles déjà publiés sur ce magazine. Boulot graphique affiné avec @diala. Travail sur la structure éditoriale avec Michel Raffoul.
Notre premier axe a été de travailler la lisibilité des pages d’articles. Les articles d’Orient XXI étant longs, c’est l’aspect primordial de la maquette. J’ai choisi la police Lora, que je trouve très lisible à l’écran, avec une certaine légèreté dans le gris typographique :
▻https://fonts.google.com/specimen/Lora
Avec un critère important : une italique joliment dessinée, clairement différenciée, et très lisible.
Pour faire le contraste, les éléments de navigation du site utilisent la police Raleway de The League of Movable Type :
▻https://www.theleagueofmoveabletype.com/raleway
utilisée en capitales, et en jouant sur une opposition marquée entre une version très grasse (black) et une version plutôt maigre (regular).
Pour la maquette du texte, le choix désormais classique d’une colonne unique, au maximum 700 pixels de large, et un corps de texte courant assez massif (environ 21px sur grand écran). L’idée étant, encore une fois, de privilégier le confort de lecture de textes longs. (Références : Medium.com, le mode « Lecteur » de Safari, et lecture Zen du Monde.)
Parmi les petites astuces dans les articles :
– les notes de bas de page s’affichent en colonne de droite quand on clique sur le numéro d’appel de note,
– un calcul un peu rigolo pour insérer à l’intérieur du corps du texte un bandeau d’inscription à la newsletter,
– les liens hypertexte vers l’extérieur ont un graphisme plus nettement différencié des liens internes,
– la maquette des intitulés des images, en dehors de la colonne de texte (parfois à côté de l’image, parfois sous l’image quand elle-même dépasse de la colonne de texte).
Autre aspect important sur les pages d’article : l’entrée de page est travaillée pour introduire rapidement la lecture : titre, chapeau, chemin de fer, boutons de partage, tout ça massif mais « above the fold ».
L’idée est de donner une impression de magazine, et non de quotidien. Ce qui donne des choix graphiques et tygraphiques forcément différents.
Pour le bandeau de navigation de haut de page :
– refonte du logo (l’emblème rond n’est pas de moi),
– petit jeu du menu qui se « décroche » en version plus compacte, et qui redevient visible quand on scroll vers le haut (désormais classique, mais efficace je trouve),
– menu de navigation dont deux éléments ont un sous-menu. Ce menu passe dans le hamburger sur petit écran et sur système qui ne gère pas le survol).
Au niveau de la structuration du site, très gros changement : la structure par rubriques est remplacée par une structure thématique et par pays. Cela repose certes sur les mots-clés de SPIP, mais les « thèmes » et les « continents » ne sont ni des mots-clés SPIP ni des groupes de mots-clés :
►https://orientxxi.info/outils/selections/les-pays/pays-du-levant,2316
Ce qui permet à la fois des thémes qui se croisent, et une sorte de fil d’ariane sur les mots-clés un peu plus profond qu’avec l’outil classique de SPIP (par exemple : Pays > Pays du Golfe > Bahreïn) tout en réutilisant la thématisation manuelle des 2000 articles déjà publiés :
▻https://orientxxi.info/fr/bahrein
La page d’accueil essaie de mettre en avant plus de contenu, avec des calculs un peu sympas pour savoir quels grands thèmes mettre en avant en fonction de l’actualité des publications.
Systématisation de l’utilisation de mon plugin « Centre d’intérêt d’images » :
►https://www.paris-beyrouth.org/Plugin-centre_image
qui permet d’indiquer directement dans l’espace privé le point « central » d’une image et de faire plein de recadrages différents sans couper n’importe comment.
Toujours sur la page d’accueil, une sorte de « player vidéo » qui présente toutes les vidéos directement là, sans changer de page. Assez rigolo à faire.
Travail sur les pages d’auteurs, avec autant que possible utilisation de photos des auteurs :
▻https://orientxxi.info/fr/auteur/alain-gresh
La récupération du flux Seenthis d’@OrientXXI est toujours là :
►https://orientxxi.info/au-fil-du-web
qui permet de publier un suivi d’actualité de manière vraiment simple.
On conserve également mon outil qui permet d’animer simplement des illustrations :
►https://orientxxi.info/va-comprendre/pourquoi-les-etats-unis-cessent-ils-de-financer-l-agence-des-nations-uni
Converser également cette possibilité, largement utilisée sur les articles historiques du site, d’installer de grandes images en haut de page, avec un jeu de dégradé, ce qui donne un aspect très « magazine » :
▻https://orientxxi.info/lu-vu-entendu/le-canal-de-suez-un-enjeu-toujours-actuel,2557
