Drupal
23/06/2014

Le theming responsive dans Drupal - Part III - Le mode opératoire de bluedrop.fr

image
3ème et dernière partie de notre dossier consacré au theming responsive avec Drupal : nous vous invitons à visiter nos process, nos transactions, nos méthodes. Pas de doute, l'espionnage intellectuel et l'Open Source ne font pas bon ménage :)

3ème et dernière partie de notre dossier consacré au theming responsive avec Drupal : nous vous invitons à visiter nos process, nos transactions, nos méthodes. Pas de doute, l'espionnage intellectuel et l'Open Source ne font pas bon ménage :)

Retrouvez l'ensemble des considérations traitant du responsive dans Drupal :
Le theming responsive dans Drupal - Part I - Approche générale
Le theming responsive dans Drupal - Part II - Les maquettes et wireframes responsives
Le theming responsive dans Drupal - Part III - Le mode opératoire de bluedrop.fr

Utiliser un générateur de sites statiques

Je fais le choix de Patternlab qui permet surtout de présenter agréablement et efficacement des maquettes et des styles de guides.
Patternlab est très minimaliste et n'impose que peu de choses. Il faudra donc passer du temps à le configurer suivant notre besoin, comme nous l'avons fait pour la distribution.

Désosser Drupal pour se constituer notre propre bibliothèque

Que l'on utilise Omega ou Bootstrap (ou n'importe quel autre système d'ailleurs...), Drupal ne génère au final que du code HTML.
L'idée est d'analyser en profondeur le code généré par Drupal (Omega et/ou Bootstrap par ex.) et de l'intégrer dans Patternlab pour avoir nos propres molécules et organismes adaptés.
Ansi lorsque nous appliquons des styles sur Patternlab, les CSS pourront être facilement transposées dans Drupal.

Cela rejoint aussi l'idée déjà évoquée d'avoir des bibliothèques d'éléments propres qui ne se limitent pas aux diaporamas et autres animations mais qui contiennent également (liste non exhaustive) :
- navigations
- types de contenus fréquents
- vues communes
- systèmes d'identification
- pages produits, etc.

Revoir le workflow et redistribuer les rôles

Lorsque vous disposez :
- D'une version "customisée" de Patternlab qui puisse être rapidement déployée
- En plusieurs versions : * Omega 4 * Bootstrap ** etc.
Alors vous pourrez vous en servir de diverses manières.

Proposer des maquettes statiques à nos prospects

Pour cela il faudrait que les designers maîtrisent Patternlab. En soit ce n'est pas insurmontable quand on connait le HTML / CSS. Ce n'est pas non plus de la programmation, juste des balises à connaître.
1. Design des éléments graphiques (dans ce bon vieux Photoshop par exemple) ;
2. Déploiement de Patternlab et choix d'un moteur de thème (Bootstrap, Omega,...)
3. Création du design (Homepage ou plus) en utilisant les éléments de bases de Patternlab ;
4. Modification de la feuille de style Sass / Css par défaut pour design ;
5. Eventuellement, création de nouveaux éléments ou surclassage d'éléments existants ;
6. Inclusion des éléments graphiques (images) ;
7. Génération du site statique de présentation (bien entendu, on Git tout ça).

Dans le cas de maquettes purement ergonomiques, on pourrait se restreindre à un framework déjà bien complet comme Twitter Bootsrap ou équivalent.

Travailler la charte, le theming / styling d'un site

Déployer une instance de patternlab sur un sous-domaine du futur site permet :
- De travailler en parallèle du développement sur la future charte graphique ;
- De mieux interagir avec les différents acteurs (l'idéal est de rajouter par-dessus un système de notes - tickets, mais ce serait déjà mieux cadré avec Redmine en reprenant les URL de Patternlab) ;
- De traquer les bugs d'affichage et les incompatibilités en amont.

Reste la question de la prise en charge de l'outil par les chefs de projets. Cela n'est pas évident, mais cela n'est pas insurmontable non plus.

De rester DRY

C'est peut-être angélique, mais dans la mesure où votre version de Patternlab reprend le code généré par Drupal et ré-utilise les mêmes classes CSS :
- La feuille de style CSS générée par Patternlab est directement (ré)-exploitable dans Drupal ;
- Ce sous-domaine peut-être un livrable et une documentation pour le client et son équipe ;
- C'est aussi une base de travail et un environnement de développement simple pour une évolution graphique, une V2, etc.
- C'est un cadre de travail pour un développeur front-end externe qui ne maîtriserait pas Drupal.

Rappel :
Le theming responsive dans Drupal - Part I - Approche générale
Le theming responsive dans Drupal - Part II - Les maquettes et wireframes responsives
Le theming responsive dans Drupal - Part III - Le mode opératoire de bluedrop.fr 

Ludovic Coullet
Twitter : @lcoullet