Le Wiki KoumbitSuite à un travail d'explication de DavidLesieur pour un client, voici quelques recommandations pour les graphistes qui s'aventurent à dessiner un site pour Drupal ou toute page web destinée à être rendue en XHTML/CSS.
Contents
Visiter des galeries de Thèmes Drupal 
Polices de caractères
Utiliser des polices de caractères web-friendly, car presque tout le texte affiché dans une page provient d'une base de données, ce qui empêche généralement l'utilisation de textes pré-fabriqués dans des images. Notamment: Items de menus, titres d'articles (ou de tout autre contenu), noms de champs de saisie.
La taille des contenus
Prévoir que la taille des contenus peut varier grandement. Il ne faut jamais avoir de boîtes à taille fixe. Contrairement à Flash, les pages générées par Drupal sont en xhtml et css, alors l'affichage peut être interprété différemment dans différents navigateurs et dans différentes configurations des visiteurs. Un titre peut entrer sur une ligne chez quelqu'un et en prendre 3 chez un autre, parce qu'il a réglé son affichage pour du texte plus gros.
Spécificités Drupal
Les unités primordiales de Drupal sont les nodes et les blocs. Les nodes (noeuds) correspondent au contenu principal et occupent généralement la partie principale d'une page (qui peut contenir une ou plusieurs nodes). Le reste est pratiquement toujours dans des blocs: Menus, contenus des colonnes latérales, entête, bas de page. Il est généralement difficile d'avoir des éléments graphiques (autres qu'un background) qui ont une quelconque continuité entre les différents blocs.
Des menus déroulants
Les menus déroulants (popup) représentent plus de travail et l'implémentation inadéquate des standards web (W3C) dans certains logiciels de navigation ne permettent pas toujours d'assurer que des menus conçus en CSS et XHTML standards fonctionnent bien dans tous les cas.
Il est possible de réaliser des menus déroulants simplenment en CSS avec du XHTML standart. Ces menus fonctionneront correctement pour toutes les personnes navigant avec firefox, Opera, Mozilla, konqueror, et bien d'autres, pourvu qu'ils soient adaptés aux normes web (W3C). Malheureusement c'est souvent un logiciel de navigation, pour lequel on ne peut rien faire en ce qui concerne son développement, qui nous empêche d'avoir de beaux menus déroulants simples à réaliser parce qu'il n'est pas adapté aux normes du W3C. Nous ne pouvons pas fournir de menu déroulant qui ne fonctionnent pas bien dans Internet explorer vu que c'est le navigateur le plus répandu...
Certainement, on ne veut pas d'un système de menu qui ne fonctionne que pour les visiteurs qui ont Javascript ou flash.
Il est donc difficile de réaliser des menus déroulant fonctionnant facilement avec tous les navigateurs. À étudier de près pour les petits budgets.
Les styles (CSS)
Il y a beaucoup d'états possibles pour un élément donné. Essayer d'en représenter plusieurs sur la maquette et, pour ceux qui n'y sont pas, de les documenter (possiblement dans d'autres documents visuels). Voir la Checklist plus bas.
En même temps, il faut être cohérent et ne pas chercher, par exemple, à avoir des liens de style différent à l'intérieur d'un même bloc, car encore là le contenu est généré dynamiquement et on n'a aucun moyen de prévoir quel lien apparaîtra dans le bloc, encore moins lequel afficher dans quel style.
Il est possible d'avoir des styles différents d'un bloc à l'autre, mais c'est plus de travail. À éviter pour les petits budgets.
Checklist
Voici le liste des éléments à prévoir dans une maquette par ordre d'importance. Ceci dans l'optique de prévoir les styles des éléments qui apparaitront dans toutes les pages du site.
La plastique
- Le site est Elastique
- le site a une largeur fixe
- Le site a une hauteur fixe
Les menus
- Item de menu normal,
- Item de menu visited,
- item de menu actif (sélectionné),
- item de menu survolé par la souris,
- item de menu collapsed
- item de menu expanded
Les liens
- texte de node,
- lien dans un texte de node,
- lien survolé par la souris dans un texte de node,
Les titres
- titre de node,
- titre de node à la fois titre et lien,
- titre de node à la fois titre lien survolé par la souris,
Les blocs
- texte de bloc,
- lien dans un texte de bloc,
- lien survolé par la souris dans un texte de bloc,
- titre de bloc,
Les messages
- textes de messages d'information,
- textes de messages d'erreurs,
- etc...
Les formulaires
- Noms des champs de saisie
Les exceptions (goulots d'étranglement ou "bottleneck")
Si le design doit contenir ces éléments ou que le designer en a décidé ainsi, il faut tout de même que les intégrateurs et les programmeurs soient informés de la présence de ces éléments dans le site. Le temps nécéssaire à leur implémentation pouvant déséquilibrer la répartition des heures dans le contrat.
- Coins ronds (ou tout élément non "carré")
- Menus déroulants
- Les animations
- Les diagonales (alignements ou fonds de couleurs)
- Les images pour les titres
- Les images pour les menus
- Le site a une hauteur fixe