Designing with Drupal in MindDesigning with Drupal in Mind

Introduction

With careful consideration and planning, there is nothing you cannot build with Drupal.

Design isn't something you can sit and nail down in an afternoon. It takes years of practice, training, and self-improvement to become a good designer, so for the purpose of this post, let's assume that we've all come from a design background. Drupal is a great system that allows you to give tremendous flexibility to your clients. Unfortunately, as of the version 6 release, it's not exactly something you can just sit down and immediately build amazing sites with (things are definitely looking up for version 7 however). Because it is a CMS with thousands of contributed modules, there is nothing that you can't throw at it, the the only question is: how do you tackle the responsibility of creating a site using Drupal?

As I said before, web design is a comprehensive and involved process. CMS Quickstart isn't just a clever name, we are trying to simplify the hard part for the customer, and the way we do that is by creating meaningful, feature-rich themes that are pre-configured to go live right from the start. Designing for templates is drastically different from designing for a specific client because you don't really know how the site implementer will decide to use the theme. In this post, we're going to break down the process a bit and let you know the steps needed for creating fully-functioning Drupal themes.

Part 1: Collaboration

Keeping lists is a good way to make sure your Drupal project is on track.

If you are a solo designer / developer, then your first impression may be to skip this section. I would invite you to stay and have a listen first because this point still applies to you. Communication is key in any design undertaking, even if it's with yourself. If you work in the standard designer + developer team environment, then you are probably familiar with the general process. However, there are some things to keep in mind when theming specifically for Drupal.

It's always a good idea to use a project management system that lets you keep and update lists. Basecamp is a current propular platform for doing this, however you can accomplish similar tasks using the Storm module or Open Atrium on your own Drupal site, or even Google Documents. Make a habit of making checklists for each theme you build, make notes about modules, and keep track of bug reports.

Speak the language of Drupal in your design documents. Whenever you make a comment, label a screenshot, or discuss a themed element, use Drupal specific language to figure out what it is and how you will build it. Point out commonly used variables like "$links" and "$terms" and solidify what is output from Drupal core and what will be handled using contributed modules like Views and CCK.

Make sure your design files are organized. Place Photoshop / Illustrator layers into labeled folders. Avoid leaving layers with the default name, especially when copying. It may seem annoying at the time but it will prevent your colleagues from wanting to strangle you; It will also save you a lot of frustration down the road when you don't have a document filled with layers called "Layer 142 copy 4." It may help to label things in a parallel way to how Drupal creates output. For instance, you can create a folder called "Links" inside another folder "Blog node" where you will style common buttons that are generated from the $links variable.

Part 2: Determine functionality before you start mockups

As I said before, designing for templates is very different from designing a stand-alone web site. The main issue is that you have no idea what the site might be used for or what the site author will put into its pages. How do you deal with this situation? A good idea is to begin designing with a target function in mind. Instead of just saying "I want to make a nice shiny theme with buttons that look like glass," you may want to start with a goal. Make a theme that would work for a small company. How would this be different from a mid-size and large corporation? What about a site for a personal blogger or a restaurant? Beginning from there, you can then create design assumptions based on what someone might want on the site you are designing. In other words, make like you are building a full web site and not just a facade. A Drupal theme is more than just a visual look, it includes functionality as well.

Once you have planned out what the target needs will be, you can go about selecting any contributed modules you will need. Keep these in mind when you start composing your mockups, as they will dictate the scope of what you need to theme.

Part 3: Composing mockups

If you are working with a developer or development team, then at this point you may begin putting together a development build of your theme. Otherwise you are ready to dig in with the visual front-end design work. Make sure you take into account all the core node types as well as display options for those nodes. Never assume someone will enable or disable certain aspects for each individual node type. Therefore, it's probably a good idea to design in things like links, taxonomy, and comments by default. You may wish to keep these elements consistent throughout your node types and allow for them to be hidden or disabled without affecting your layout.

One you have core nodes down, go ahead and create any custom node types per your theme and skin any included modules. Don't forget about including some default styles for very popular modules like Views. The hardest part of template designing is anticipating what people who use your theme will want to do with it. Theming some default styles is a good way of covering your bases in the event you run across someone who actually wants to use the core Drupal forums (hey, it could happen).

Whatever you choose to do, leave options open to the end user.

Part 4: Build the theme

Packaging a subtheme with your theme will be greatly appreciated by those who want to make custom tweaks to your theme.

If applicable, your development team may have already begun work on this. Otherwise, now is the time to start putting it together. Modules like the Devel module and browser addons like Firebug for Firefox can greatly decrease your build times. Here are some things to remember that can be easily overlooked:

• Collapse regions that are not in use. You can do this by calling a simple PHP statement in your page template file: <?php if($region): ?>Some HTML markup<?php endif;?>.
• Make it easy for the site implementer to change things. Try to include a custom sub-theme so that they can build their own CSS or override your CSS. Organize your CSS files, include comments, and if necessary, include separate documentation files.
• Progressive enhancement. If you're building in something and you're worried it won't work in all browsers, progressive enhancement is your friend. Your first goal is to make sure at least something shows up on the page for all browsers. Then, allow that functionality to be extended by those browsers that can handle it. You can use this to include things like rounded corners, CSS drop shadows, and opacity effects.

Part 5: Test

Standards testing should be the norm on all your Drupal projects.

Ah, the dreaded test phase. It's time to start stress-testing your design for different browsers. Simpler designs probably won't be set back by this very much but complex layouts with many modules may take a hefty hit in this department. Things to look for include typography bugs, layout glitches, and module errors. Make sure you test ALL the admin pages to make sure things are rendering properly and tackle bugs by going from general to specific. If you have a bug the affects 3 or 4 browers, chances are you have a crucial error in your CSS files. If you come across a bug that is only visible in one browser, research before attempting to fix it. There are many browser quirks that can be fixed with a single line of CSS.

Make sure your new theme hits all the W3C standards for XHTML (Strict). This will give your the theme the best shot at being rendered properly for many years to come. Also, throw in some different content types, put in dummy content with images. Make sure that things like block positions and modules with floats don't ruin your layout.

Conclusion

Congratulations, you've just seen a theme all the way from inception to release. Make sure you post on the Drupal boards and make Drupalers aware of your new creation. Better yet, start in on a brand new one...