Egressive - superior free and open source software solutions built on Linux and Drupal

One of the most common questions we get asked by customers and their web designers is "how do I create a design for a Drupal site?". It's a fair question, so I've decided to provide an answer to which we can point people. Much of what I'm writing here isn't specific to Drupal at all - much of it is just what I believe to be good web practice.

The Drupal Content Model

Drupal, as content management systems/development frameworks go, is extremely designer friendly. Its sage architects have imbued it with a very clean separation between form and function. As such, a graphic designer can be pretty adventurous with their ideas. You need only trawl through some of the theme designs on the web to see how diverse things can be. That said, some sorts of designs are easier to implement (i.e. converting a static picture or site mockup into a working, dynamic Drupal theme).

Drupal has a fairly simple concept for theming: in general, each "page" has some central content, and surrounding that content, an array of "blocks".

Drupal's normal content container is referred to as a "node", and there can be many kinds of nodes on a site, e.g. pages, stories, events, forum topics, images, etc.

Drupal also provides what are called "views", which are just dynamic lists of nodes, e.g. a calendar of event nodes, a list of document nodes, or a gallery of image nodes. In general, views tend to have a "page" version, i.e. that present their collecting in the form of central content, and also a "block" version, which might, for example, provide a teaser list of news stories with a link to the full page of recent news. A typical Drupal front page contains some sort of introductory message as it's primary content, and then a series of blocks for things like user login, site search, primary and secondary menus/navigation, recent news, latest blog post, upcoming events, featured products or stories, or any number of other things.

A good design is cognizant of all the types of content the site will support, and creates suitable devices to accommodate each - or, better yet, a few robust concepts flexible enough to suit many different - types of content. Some straightfoward Drupal sites, perhaps comprising a few separate pages, might only have a single menu, and a block or two. With so few elements, the web designer can come up with very fanciful graphics because there are only a few constraints. The design process becomes substantially more complicated for more involved sites. Often, sites have dozens of blocks and more than a dozen content node types, each of which is vying for the site visitor's valuable attention on the front page. Good designers know how to strike the right balance of promotion vs. elegant simplicity, wordiness vs. vacuous lack of content, robustness vs. fragility in the face of frequently changing content.

Control is an illusion

Many print designers find designing for the web a real challenge. Why? Lack of control. For a web design to really succeed, it's got to be a rugged concept, resilient in the face of many sorts of inconsistencies - either that, or labouriously catering to many many different exceptions and variations, or sometimes a mix of the two. On the web, people use a myriad of web browsers (from the latest standards compliant Mozilla Firefox down to Microsoft's horrible IE6) each with its own selection of available fonts, varying degrees of compliance with open web standards, different levels of support for various plugins. Moreover, different users have different screen sizes, internet connection speeds (apparently 20+% people still use dial-up!), choose different font sizes (e.g. due to vision impairment), and patience levels. And some people turn off processor-sucking javascript and gratuitous Adobe Flash. And if that wasn't complicated enough... the fastest growing segment of the web users is... people with iPhones and other mini-web devices, which are at the extreme end of the "small screen experience".

Some of the rules of thumb we use:

• Fixed vs. fluid layout - fixed layout designs - where the pixel width of the page is the same regardless of the size of the user's browser, tend to be easier to design and implement. The can, however, be frustrating for the user, particularly those with either very large or very small screens. Most fixed width themes are about 960px wide (to fit the most common 1024 x 768 pixel screen size without looking cramped). If the screen is wider, then margins expand. If narrower, then the user gets a horizontal scroll bar. The mark of a brilliant design (and designer) is the ability to pull off a good fluid layout, which expands and contracts (within reason) to suit the viewer's window width and choice of font sizes. In some cases, we build themes which are fixed width for the user-visible view, but have a fluid layout for the administrative view, which often includes wide tables of data which sometimes won't fit within a fixed width.
• Judicious use of graphical devices - graphical devices are things that make a design interesting or different, e.g. having paper-like torn edges on the main content page, or graphically rendered text on any page titles.  
• Backgrounds - graphical backgrounds are often used to spice up page headers, borders, content areas and to give added personality to blocks and headings. Please just remember that content and block columns don't always stay the same width or height (e.g. with different font sizes), so ensure that your design provides extra area for background images to allow for that variability. There are some clever devices to work with these variations - Alistapart is a treasure trove for good ideas.
• Browser vs. rendered text - many designers have a love affair with fonts and many corporate branding style guides necessitate a corporate font... by all means use the font in the website's branding imagery (typically a logo and a name), but consider very very carefully the ramifications of using a non-standard font elsewhere, e.g. for content and block titles. Because of the limited set of publicly available fonts (although web standards support the ability for websites to use arbitrary fonts, and Firefox 3.5 will soon support it, these standards have been stymied on the web due to font "foundries" overly precious approach to licensing their fonts - i.e. they don't.). I recommend using browser generated fonts (i.e. not graphically rendered in a drawing package) anywhere that the text might ever conceivably change. The hassle of getting someone to generate a new button or menu link (with mouse-rollover) or block heading with a custom font anytime the site's content changes is onerous, and it's not a good use of a content management system. If you REALLY want custom dynamic fonts, ask us about dynamic font rendering as graphics. It's possible, but it'll cost you.
• The Fold - remember that many people don't scroll down on web pages. If you (or your customer) has something important to say, make sure it appears above "the fold", namely the bottom of the page typically viewable. Despite the increasing use of inexpensive high resolution LCD screens, the most common screen size is still 1024 x 768 pixels, and increasingly with netbooks, that 768 drops to a modest 600!
• Web Standards - if you avoid design elements that can't easily be implemented in accordance with web standards, e.g. Microsoft Silverlight, iFrames, Adobe Flash - then your site will be quicker to implement, and the site is likely to be more robust in unexpected situations, like when viewed by someone using a tiny handheld device or a screen reader.
• Be graceful - above all, a good design is graceful in situations where the design pushes web conventions past the lowest common denominator. A good designer (and implementor) ensures that if a particular user doesn't have a Flash plugin or has javascript turned off, or has a visual impairment, that their site, while perhaps not as glitzy or ground breaking as it might be in its full intended glory, is still functional. We do, however, provide an explicit dispensation for those who choose not to make their site work with Microsoft IE6, because users of that browser should be made to feel sufficient pain to make an upgrade to a good browser necessary.

Formatting your design for easy implementation

To aid us (at Egressive) in implementing your design, here's what we respectfully request:

1. Please send graphics in layered XCF or PSD format. Our developers run Linux. For reasons known only to them, Adobe don't make a Linux version of Photoshop available, so we can't run it. We probably wouldn't run it anyway, as the Gimp is brilliant for web design (print, not so much).
2. For any CSS backgrounds (e.g. blocks, side margin designs, header background, menu tabs, etc.) please ensure that you
   • include extra background area to allow for 2 rows of text and extra width if possible - or make it a tile-able background, and
   • make sure that no mockup text is in the same layer as the backgrounds, so that we can clip them out without having to try to mask out irrelevant text.
3. Make sure that you include at least two mockups, one for the front page (which is typically a different design from other pages), and one for leaf page, so that we know what you expect them to look like.
4. Make sure you include a graphical colour palate of all the major colours - most image manipulation packages will produce this for you (it could just be included as part of the image, in a layer for instance) - and examples of all relevant colours in action. Especially remember that we'll need - and this might differ if you have text over different background colours - text colours and styles for
   • regular text
   • normal links
   • link hover
   • visited links
5. Please give your layers meaningful names, and ideally strip out any unnecessary layers in advance

I hope that provides you with some insight on building designs destined to be implemented as Drupal themes. Please use the comments below to ask for further clarifications, or to suggest improvements to this description!

Notes

Note to anyone still using Microsoft's IE6 (a browser so nasty not even its mother could love it): please do yourself and everyone designing for the web a favour and run - don't walk - to http://mozilla.com and download a real browser! If your employer, for some twisted reason, has decided that IE6 is corporate policy... quit. It's pretty simple.

Web designers almost universally revile IE6 and its ancestors. A google search on "I hate IE6" returns 98,000 pages - for evidence, see for instance here,  here, here, here, here, here, here, here, and, of course, the Facebook group (you must be logged in to see it).

An essential companion for anyone forced to implement support IE6 (and other Microsoft browsers) is this site: PositionIsEverything. Bookmark it now.

XCF is the default (open standard) data format used by The Gimp. PSD is the default file format (a proprietary, closed format) used by Adoby Photoshop. Luckily, The Gimp's clever developers have reverse engineered the PSD format, allowing Gimp users to read (but not write - that's even more complicated) PSD files - but only if they don't use vector objects or grouped layers.