Comme au jour 2, je prends tout d’abord un instantané du rendu du blog à l’étape précédente pour pouvoir comparer avant/après.

Capture Ductile, Jour 2

Idéalement j’aurais fait une capture de tous les contextes pour pouvoir comparer mieux encore, mais les bras m’en tombent et la digestion des crêpes n’y est pas propice. Je vais plutôt te raconter ce que j’ai fait.

Côté structure (mediaqueries.css)

Désormais, le « sidebar » prend sa place en fonction de la largeur de la fenêtre de consultation : en bas jusqu’à 960px, sur le côté au-delà. Pour les ombrages (et il en est de même pour chaque élément à ombrage ou à fond dégradé), j’ai utilisé les nouvelles possibilités offertes par CSS3. Sur les navigateurs à la traîne, ça restera présentable mais moins joli. Je t’invite donc à jouer à réduire et agrandir ta fenêtre pour mieux te rendre compte des adaptations.

Côté styles (style.css)

J’ai copié-collé le contenu de la feuille de style vierge base.css qu’on trouve sur Dotaddict, dans la série des Aorakits puis j’ai pu ainsi appliquer les styles que je souhaitais pour chaque élément. Mine de rien, cette feuille de base sert également de checklist des choses auxquelles penser ! (À part ça, je me suis rendue compte de quelques petits points à corriger dans ce fichier base.css, je tâcherai de faire une mise à jour sur Dotaddict sans trop tarder).

Les titres

Comme souvent une fois en condition réelle, j’ai finalement un peu modifié la présentation des titres par rapport à la maquette : leur couleur prend un beau framboise écrasée sur les affichages « en liste » et ils sont surtout beaucoup plus gros. J’espère que ça te plaira parce qu’ils me conviennent bien comme ça. Il m’arrive régulièrement de faire découvrir un blog ou un autre à des personnes n’en fréquentant pas jusqu’alors ; j’ai constaté qu’ils étaient souvent perdus dans le repérage du « quoi lire ». Une bonne mise en valeur du contenu important devrait favoriser leur lecture.

Les commentaires

Je ne me suis pas trop compliqué la vie, il est possible que j’y revienne plus tard, mais pour l’instant ils sont déjà nettement plus pratiques à lire et le formulaire plus confortable à utiliser. Je reviendrai à ce formulaire quand je modifierai les fichiers de structure car j’aimerais l’organiser autrement, notamment en plaçant le champ de saisie avant les renseignements sur l’auteur du commentaire. Ça me semble plus logique et plus convivial : placés avant ces champs semblent exiger de montrer patte blanche pour avoir le droit de réagir à un article…

Le sidebar

Une série de boîtes à fond kaki léger (toujours cette préoccupation de faciliter l’ergo en lecture) ; cette série de boîtes s’empile en bas de page sur les largeurs inférieures à 960px, en une ou deux colonnes selon les cas. Quand on les repliera je pense que ça rendra bien.

Le contexte du billet seul

J’ai mis en forme cette partie en m’appuyant sur le billet « les balises wiki in situ » de mon blog de test en local. Ce billet bien pratique permet de n’oublier aucune des principales balises html.

Les autres contextes

Et pour finir je me suis occupée des autres contextes.

Il y a des choses à peaufiner mais je n’ai pas jugé utile d’aller plus loin dans le contexte du jour (c’est-à-dire sans toucher aux fichiers .html) puisque je devrai y revenir une fois tous les éléments bien en place dans leurs fichiers.

N’hésite pas à me poser des questions sur telle ou telle mise en forme ou à me faire part de tes remarques. J’y répondrai avec le grand plaisir que j’ai toujours de converser avec toi.

Je te souhaite une très agréable soirée en compagnie non moins agréable.