Ductile blog

Ce billet complète « Ce que Ductile est et ce qu’il n’est pas ».

Maintenant que les fondamentaux des CSS sont en place ainsi que le haut et le bas de page, je vais m’occuper des fichiers HTML des différents modes : la page d’accueil, l’affichage d’un billet avec ses commentaires et rétroliens, d’une catégorie, d’un tag, etc.

La présentation que j’ai en tête subira quelques variations selon le support de consultation la largeur de la fenêtre de consultation. Par exemple, j’ai l’intention dans le contexte d’un petit écran de ne présenter que le billet le plus récent en entier et le titre seul pour les suivants. Or, je vais utiliser les mêmes fichiers de structure, c’est uniquement par le jeu des CSS que ceci ou cela sera visible à l’écran.

Lorsqu’on souhaite utiliser un thème dédié aux mobiles, on intercepte des informations sur le support de consultation au moment du chargement de la page et l’on redirige vers ce thème spécifique grâce à cette détection. Le plugin mobileThemeSwitcher offre cette fonctionnalité. Si vous l’installez vous pouvez par exemple le coupler avec les thèmes dc2iphone ou dc2smartphone que brol propose dans une version améliorée.

Dans le contexte d’une consultation sur téléphone, deux cas de figure sont donc possibles^[1].

Le cas du thème dédié

Je ne sais pas faire de jolies infographies mais de façon très sommaire ça se déroule comme ça :

1. Le proprio du blog installe un thème pour consultation normale et un autre pour la consultation sur mobile. Il installe également un plugin de détection (mobileThemeSwitcher par exemple).
2. Le visiteur tape l’url du site/blog
   • si le plugin détecte qu’il s’agit d’un téléphone il associe le thème mobile
   • sinon il associe le thème « normal »

Les deux thèmes étant distincts, on peut alors faire tout autre chose dans l’un et l’autre cas dès les fichiers de structure (autrement dit les fichiers .html qui déterminent les contenus générés et affichés).

Le gros avantage est évidemment de pouvoir soigner aux petits oignons la présentation sur mobile et – surtout – d’alléger le poids des pages au chargement en ne générant que les contenus qu’on souhaite afficher sur ce support. L’inconvénient est de devoir réaliser deux thèmes distincts et installer un plugin spécifique.

Le cas du thème qui s’adapte

Ductile n’est qu’un et un seul thème ; les contenus générés sont les mêmes dans les deux cas, ça n’est qu’à l’affichage que des différences s’opéreront : vous pouvez déjà le constater pour la zone de l’entête et les titres des billets par exemple, dont non seulement la présentation est différente mais également où certains contenus sont masqués (exemples : le sous-titre du blog, les sous-titres des items du menu de premier niveau). Le fichier mediaqueries.css gère ces différences d’affichage.

Les avantages et les inconvénients sont les miroirs inversés de ceux décrits pour le cas du thème spécifique : pages plus lourdes (on charge des infos dont on n’a pas besoin) mais maintenance plus légère (on ne fait qu’un seul thème, on n’a pas de plugin à installer).

Rêvons un peu

Pour la distribution classique de Ductile, j’en resterai à cette seconde option qui ne vise qu’à offrir un confort supplémentaire à la consultation sur petit écran. Mais si les petits cochons ne me mangent pas et si j’en trouve le temps j’envisage de distribuer, hors distribution de base, la variation équivalente à celle du mediaquery correspondant aux petits écrans. Les proprios de blog auraient ainsi le choix entre utiliser Ductile seul et lui laisser faire son boulot d’adaptation ou installer également le switcher et (si je le réalisais) le thème DuctileMobile. Je me demande si d’ailleurs celui-ci ne pourrait pas être un « enfant » de celui-là.

Mais pour l’heure, occupons-nous déjà de poursuivre et finir Ductile classique :-)