Drupal sites often need to change and add new functionality after launch, which can lead to design failures if the original design was too specific. The document provides tips for designing generically in Drupal to avoid this issue, such as styling all HTML elements, creating generic page, block, and content list designs, and accounting for common Drupal elements like expanding/collapsing regions, menu trees, tabs, and pagers. Designing at a more abstract level following these principles helps ensure a Drupal site's design remains coherent as new features are added.

1. Tips for
Designing in Drupal
John Albin Wilkins
Drupal Taiwan — February 27, 2010

2. How is Drupal unique?
(what to watch out for)
• Expanding/collapsing regions
• Unique Drupal-isms (menus, tabs, etc.)
• #1 issue:
Drupal sites often grow after launch

3. What can happen when a website
changes after launch?
1. Site admin adds new functionality
using contrib module.
2. Design FAIL. Because design was too
specific.
3. Pay for new design work. :-(

4. It’s easy to design
specific elements.
It’s challenging to
design generically.

5. Design generically
• HTML Elements — make a list of all
HTML tags and style them all.
• Generic content page
• Generic block (for each region)
• Generic list of content (think Views)

6. Drupal-isms

7. Expanding/collapsing
regions
•Regions only
appear on a page
if the region has
content.
•Content column
expands to take
up space left by
collapsed sidebar
regions

8. Menu trees
Extremely common navigation style

9. View/Edit tabs
(and Revision/Outline/etc tabs)

10. Pager
(navigate through a list of content)

11. The Basics:
one more time…
• HTML Elements
• Generic page, block, content list
• Expanding/collapsing regions
• Menu trees
• View/Edit/etc Tabs
• Pager