Très cher complice,
Tu ne trouveras rien de véritablement neuf dans la livraison d’aujourd’hui. C’est que, mais tu le sais, il faut parfois savoir opérer quelques ruptures de rythme dans nos fols élans afin de savourer l’instant présent et le rendre plus parfait encore. Rien ne presse, n’est-il pas, à faire cesser au plus vite ces moments de délicieux partage.
Voici donc en ce cinquième jour quelques progrès réclamés par les amis qui ont eu la gentillesse de nous rendre visite en ce lieu et d’autres qui se sont fait jour.
Les stickers
Tu t’en souviens peut-être, j’avais promis il y a quelques jours – dans un de ces instants de folie où mon esprit s’abstrait des contraintes de mon agenda – de rédiger quelques tutoriels dignes de ce nom et les publier ici, dans la rubrique À la loupe. C’est ce que j’entrepris de commencer avant-hier dans le but d’expliquer pas à pas le HTML et les CSS utiles à la présentation des stickers en fonction de la largeur de la fenêtre de consultation.
Enfer et patatras, ce fut là l’occasion de me rendre compte que le code donné au détour du quatrième jour, s’il fonctionnait bien sur le plan graphique, présentait des soucis sur le plan de l’accessibilité. Plus précisément, ainsi que je l’avais construit les personnes utilisant un lecteur d’écran allaient entendre énoncée deux fois la même chose : le texte de remplacement de l’image et l’intitulé du lien. Or le texte de remplacement, s’il fait double usage lorsque ces liens sont en bas manquait cruellement en haut, là où ne s’affiche que l’image. J’avais d’autres contraintes avec lesquelles négocier mais dont je te fais grâce.
Retiens seulement que le designer, qu’il soit professionnel ou d’occasion, gagne à devoir expliquer et décortiquer son code… et se rendre compte au passage que savapa, savapadutou.
Voici donc dans cette livraison le code pour les stickers modifié. Je finirai de rédiger le tutoriel et le publierai dans les jours qui viennent, probablement pas avant ce week-end parce que pour le reste de cette semaine je finis ma formation chez Temesis et j’ai des devoirs à rendre.
Le sidebar
À l’usage, à force de jouer à agrandir et rétrécir la fenêtre, le fameux mal de mer dont nous parlions au sujet des mediaqueries m’a saisie : c’est que j’avais réglé la largeur du sidebar en pourcentage de la largeur de la page. Les mediaqueries n’y sont d’ailleurs pour rien en l’occurrence, mais le mal de mer est le même !
La largeur du sidebar est donc fixée proportionnellement à la taille des caractères, ce qui s’obtient en lui donnant une dimension en em.
Dans ma lubie de l’instant j’ai aussi changé sa couleur de fond pour un gris pâle à la place du beige clair.
Les titres sur petit écran/fenêtre
Je me suis rendue aux raisons de nos petits camarades et j’ai réduit un peu la taille des titres sur grande largeur et surtout considérablement la taille des titres des billets sur petite largeur. Comme je trouvais le résultat esthétique peu réussi en conservant les autres paramètres (italique et maigre) dans le cas des petites largeurs, j’ai, du même coup, réglé ces titres pour qu’ils soient en romain gras. Tu me diras ce que tu en penses ?
Du reste, grâce aux merveilles du configurateur que tu nous concoctes avec amour, ceux à qui ces titres ne plairaient pas auront tout loisir de les modifier.
et autres broutilles
Il y a d’autres petites choses mais j’ai bien faim et aucune d’entre elles ne change l’apparence de façon flagrante. Le noir un peu plus noir ici, le padding de deux pixels de plus là…
Je pense que tu me pardonneras aisément de ne pas les décrire une à une, lentilles, harengs et oignons frais m’appellent désespérément ! Comme d’habitude je t’invite chaleureusement à décompresser (le zip en pièce jointe) et entreprendre son délicat effeuillage.
