Bet

ter
,Fast
er,Cheaper
:
ThemeOpt i
onsfor
DrupalDevel
opers

AWhi
tePaperbyTopNot
chThemes J
une2009
 T h e m in g : T h e D r u pa l
D e v e lo pe r ' s C h a lle n g e
Creating a client-pleasing Drupal theme requires both
programming and design talents — a mix rarely found in one
person. This paper examines theming options available to
developers, discusses the benefits and drawbacks of each, and
helps you determine which theming solution is best for a given
project.

Drupal's remarkable growth 1 presents developers with both challenges and

opportunities. On one hand, its open code base allows them to leverage their
existing knowledge of SQL and PHP; on the other, many clients strongly judge a
site on its visual appeal, calling for skills that few developers possess.

The stakes are high, and are reflected by market demand. The 2007 Web Design
Survey by A List Apart Magazine 2 found that four of the top seven job titles for
Web professionals were design-oriented, comprising 40.1% of respondents. (The
other three titles were “Developer”, “Webmaster”, and “Other”.) The message is
clear: Developers need partners with visual arts strengths to make their work
shine.

At [a major Drupal agency], people spent a LOT of time on themes. At

least, it seemed like a lot! It was probably on par with how much code
customization we might do in general, because clients want a particular
look and feel.

— Robin Barre, programmer and database developer, rufdesigns.com

As a result, many developers run into difficulties when the time comes to
recommend (or develop) a client's theme. This paper gives you the tools to
determine which theme option will help you complete a given project
well, quickly, and on budget.

Developers Speak Out About Theming Difficulties

Good UI is a lot of work.

— Earl Miles, developer of Views, Panels, et al.

1
One measure of Drupal's growth is found in Dries Buytaert's July 14, 2008 blog post, “Drupal download
statistics”, http://buytaert.net/drupal-download-statistics-2008
2
http://www.alistapart.com/articles/2007surveyresults

Theme Options for Drupal Developers Page 1 6/17/2009

 For guidance, we solicited opinions from Drupal developers via a survey 3: 274
people responded, of which 187 identified themselves as developers. We also
requested further comments from a few developers via phone interviews, from
which most quotes in this report come.

Demographically, survey respondents are:

 Skilled. 88% of developers defined their Drupal skill level as

“Advanced” (51%) or “Intermediate” (37%).

 Busy Drupal pros. 86% reported working on several projects per year,
with 29% working on 10 or more (see Figure 1).

Figure 1: Number of Drupal projects per respondent

 Managing diverse projects. Drupal design budgets vary widely,

with 30% of projects allocating over $2,500 for graphics and theming (see
Figure 2).

Figure 2: Graphic & theme budgets for Drupal projects

3
http://www.topnotchthemes.com/blog/080928/got-a-few-minutes-share-your-thoughts-drupal

Theme Options for Drupal Developers Page 2 6/17/2009

 About theming subjects, developers were quick to express their pain. They said:

 Theming is difficult. In a list of ten typical Drupal site creation tasks,

two theme-related tasks were among those most frequently rated by
developers as “Somewhat Difficult” or “Very Difficult” — 74% for
“Finding suitable Drupal themes”, and 56% for “Creating a design or
theming for a Drupal site”.

 Many Drupal themes fail. Fully a third of all developers felt that the
quality of themes available for Drupal was “Poor” or “Below Average”
when compared to those of other content management systems.

 Developers need more from themes. The top four areas for Drupal
theme improvement cited were for a larger variety of designs (53%),
higher-quality graphic design (48%), flexibility for different types of
content (46%), and better documentation (43%).

There seems to be lot of mediocre stuff out there, and it takes as much
time to fix as rolling my own solution. There are few reasonably
priced/free themes that are NOT terrible in quality.

— Michael Prasuhn, developer, neutralSpace.com

Developer frustration around theme challenges is visible from a tour of their own
sites: eight of 20 randomly selected independent Drupal consultants on Planet
Drupal 4 use the default Garland theme, and almost all the others use a free theme
that’s only been slightly modified. While most of them are capable of creating a
passable theme, the truth is that good theming is hard, and experienced Drupal
developers know that their time is better spent in areas of their expertise.

When I worked independently, I had to do everything. But it’s better to

have options where I’m not implementing the theme.

— Robin Barre, programmer and database developer, rufdesigns.com

While developers can get by with generic themes on their own sites, they realize
that clients often make vendor choices based on a project’s look. A 2006 Carleton
University study 5 found that Internet users rate a Web site’s visual appeal within
the first 1/20th of a second — far too short a time to consider any functional
elegance that the developer created. That goes for clients as well as the public: As
Web designer Adam Hayes said, “The visual appeal of your site is key to keeping
the user long enough to even see if your business can solve their problems 6.”

4
http://drupal.org/planet
5
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2006). Attention web designers: You have 50
milliseconds to make a good first impression!, Behaviour & Information Technology. 25, 115-126.
6
http://www.ahfx.net/weblog.php?article=57

Theme Options for Drupal Developers Page 3 6/17/2009

 Examining the Four Theme Options
So where can developers turn for themes? In short, there are four options:

 Adapt a free, existing theme such as those found on ThemeGarden 7

or drupal.org 8. At the time of this writing, drupal.org hosts several
hundred themes for different versions of Drupal.

 Create a new theme from scratch, typically based on a high-quality

“blank slate” theme such as Zen 9. Theme creation is a multifaceted
process that involves the coordination of several pieces that are
described below in the section, “What’s in a Theme?”. This process can
be done by an individual, but is often a collaborative process among
programmers, designers, and the client — for better or worse.

Making a half-way decent theme still involves too much work: PHP
snippets here, modules there, CSS everywhere, and then getting it all to
look the same in each browser — it's all doable, it's just still a pain.
Christopher Pelham, Director, crsny.org

 Hire a theme specialist to create the theme, whether wholly from

scratch or from a client's existing graphic assets. The success of this
option depends mainly on two factors: The original design’s suitability
for theming, and the themer’s familiarity with Drupal.

Slicing up existing graphics is a pain... If you're working with a designer

who's only experienced static HTML they'll only give you a design that's
nightmarish to redo.

— Tao Starbow, Drupal developer, starbowconsulting.com

 Purchase a commercially supported “premium” theme, which

includes pre-packaged templates, graphics, and CSS files,
documentation for customization, and support. To qualify as a member
of this emerging category, a theme must be:

 Clearly organized and well documented;

 Non-custom, yet adaptable to a variety of uses and layouts;

 Ready to use without substantial customization or programming,

using Drupal best practices;

 Commercially supported, its vendor available to help adapt the

theme to the client’s specific use; and

 Generally of higher quality than most themes available for free.

7
http://www.themegarden.org
8
http://www.drupal.org/project/Themes
9
http://drupal.org/project/zen

Theme Options for Drupal Developers Page 4 6/17/2009

 The thing that gets complicated — and why I would consider starting with
a premium theme over a free one — is that there's always a stage in a
project where you have to roll up your sleeves and get serious. Drupal
allows so much, you never have this point where you say, "No, that's not
possible". Instead, you kick it up a notch.

— Tao Starbow, Drupal developer, starbowconsulting.com

What's in a Theme?
Drupal theming is a hybrid of design and development, requiring in-depth
knowledge of CSS, design practices, Web standards, and image editing, as well as
a strong understanding of Drupal's structure and theming layer.

Regardless of how a theme is produced, it comprises several parts:

 The theme's template files. These are written in PHP, and as such are
within the purview and expertise of a knowledgeable Drupal developer.

The fact that a theme has a lot of template files doesn’t necessarily
mean that it’s of high quality: If they’re poorly implemented, those extra
files could add complexity without benefit. But templates can be used in
clever and helpful ways, for example to manage multimedia efficiently,
control the appearance of the maintenance page, or format search
results.

 The theme's settings. These settings are easy to adjust through

Drupal's administration, which can make a big difference as a developer
trying to ramp up a client project quickly. The number and quality of the
settings vary from theme to theme 10.

Most free themes include few or no settings beyond those that come
built into Drupal; custom or self-created themes typically include only
those that would be of use to the specific client, and must be added at
the developer’s hourly rate. Premium themes tend to include a higher
number of settings.

 The theme's graphics files. On pre-made themes, large graphics

often must be replaced or modified for the client, although some themes
also include a set of graphical icons to replace elements such as bullets.
Producing these icons is labor-intensive, and making custom icons is
beyond most budgets. Such icons are included with many premium
themes and some free themes.

 Cascading Style Sheets (CSS), included with both the theme and
contributed modules. While it's possible to create Drupal sites with
minimal CSS usage, most modern sites rely on it heavily for both layout
and typography.

CSS files comprise perhaps the most visible sign of theme quality, for
poor CSS is apparent both to the developer (who has to fix or work
around the designer’s errors) and the site visitor (to whom the page just

10
See “Advanced theme settings”, http://drupal.org/node/177868

Theme Options for Drupal Developers Page 5 6/17/2009

 looks wrong). CSS is also an area where experience counts, and casual
designers often get it very wrong.

With CSS, you can have very nonlinear moments where changes to one
CSS area make other places blow up. That's where I can see paying
money to [a theme provider] with a good reputation — to avoid those
nonlinear traps. I want to know that someone’s already thought them
through, or at least documented them.

— Tao Starbow, Drupal developer, starbowconsulting.com

Theme Options for Drupal Developers Page 6 6/17/2009

 Criteria for Judging Theme Options
It’s one thing to enumerate the pieces of a theme: It’s quite another to put them
together well. So how, exactly, does one judge a theme’s overall quality?

The first criterion is, of course, the theme’s appearance. However, appearances
can be deceiving. A theme might look terrific on the vendor’s site, but fall apart
when you try to adapt it to your own purposes.

To successfully complete a project, therefore, a theme’s adaptability is at least

as important to developers as appearance. That, unfortunately, can be difficult for
the untrained eye to discern at first glance. But here are a few things that define a
good theme.

 The theme should play well with Drupal and your custom code.
That takes an understanding of Drupal programming standards —
something most often found in designers who work with Drupal day in
and day out. Does the designer implement Drupal’s API 11 correctly?
Does the theme take advantage of markup from commonly installed
modules? Drupal knowledge that’s weak or out of date could prevent
you from exploiting all that Drupal has to offer.

Sometimes clients will hand us something that's slightly themed, but we

find that they didn't know enough about Drupal. The variable names and
code did not follow typical Drupal theming style. I think I once saw an SQL
query in a template file. I was horrified!
— Robin Barre, programmer and database developer, rufdesigns.com

 The theme should be easy to modify through plentiful, useful

theme settings. Themes can include such options as the ability to
change site-wide colors or dimensions without directly modifying the
CSS; whether to display certain information, such as breadcrumbs; how
search results appear; custom text for titles and prompts; and insertion
of custom meta tags.

Themes from [one vendor of premium themes] are pretty well laid out:
They give you a lot of theme-specific settings to control things like node
settings and SEO, all through /admin/build/themes.

— Josh Huckabee, Web developer, joshhuckabee.com

 The theme should be as clear, clean, and easy to work with as

your own. Some designers reported difficulties working with certain
themes because, even though the code worked in its default
configuration, it did so in a messy or “kludgey” way.

11
http://api.drupal.org

Theme Options for Drupal Developers Page 7 6/17/2009

 In one [commercial] theme, the designer achieved rounded corners by
using about 20 nested divs. And the div names didn't mean anything! The
right way to do it would have been something like what Panels does, with
only a few, well-named divs. ... I bought another theme that had terrible
code. I ended up just taking the Photoshop file that came with it and
rewriting the entire thing.

— Josh Huckabee, Web developer, joshhuckabee.com

 The theme should be organized and documented well. Custom

functions and styles should have descriptive, obvious names, and should
be grouped in functionally coherent units. For example, important CSS
styles should be near the top of the style.css file; list styles should be
grouped together; and comments should preface each section.

 The theme should produce pages that look good to a wide

audience of browsers, devices, and people. Logs from a popular
Web site show 12 that nearly half of its traffic comes from Internet
Explorer’s problematic, difficult-to-design-for versions 6 and 7,
suggesting that failure to account for those browsers could drastically
affect a site’s reach. Likewise, sites that don’t follow Web Content
Accessibility Guidelines (WCAG) could cut off other visitors (such as the
blind), while sites with invalid XHTML and CSS could limit access on
certain devices.

 The theme should have search-engine optimization (SEO) in

mind. The most popular way for Drupal consultants to improve a site’s
ranking in Google and other popular search engines is to implement the
pathauto module 13. But effective SEO goes well beyond that, starting
with a well-constructed theme.

 The theme should include graphics that are elegant and

professionally packaged. Have graphics been optimized? Are they
well-labeled? Are your rights to re-use graphics spelled out? Does the
theme include a custom “favicon”, or does it fall back on the default,
cliché, Drupal “drop”? Do you get the original Photoshop files from which
the theme was created to help you make consistent modifications?

The Bottom Line

So with all this in mind, which theme option is best for you? The answer is, as
with most things in life, “it depends”. Here are recommendations based on four
of the most common project variables.

 Need for custom or unusual features. If your site has unusual

features (such as interaction with custom modules or an unorthodox
layout), seek out a theme option that’s adaptable to them. Look through
free and premium themes for those that do something similar to your
custom application: If the code is clear, it might be more easily
adaptable than creating your own theme from scratch.

12
http://www.w3schools.com/browsers/browsers_stats.asp
13
http://drupal.org/project/pathauto

Theme Options for Drupal Developers Page 8 6/17/2009

  Available time. For a project with a short deadline, start with a high-
quality “base” theme. That could be either a free or premium theme,
with the caveat that free themes lack support options that could speed
the project along. If the project has a large budget, another option
would be to use an experienced, custom theme developer with enough
human resources to meet the deadline. Currently, however, demand for
custom Drupal themes makes such teams thin on the ground.

 Available budget. Obviously, a project with a $100 design budget is

pretty much forced to go with a free theme. For the 74% of better-
funded projects, however, mid-priced premium themes are an especially
good option.

 Available skill set. If you have access to design, PHP, and CSS skills,
together with knowledge of Drupal, you can probably produce custom
themes most economically yourself. If not, consider the cost of time
your team would need to acquire the skills it lacks.

A more-detailed comparison is found in this paper’s Appendix, “Comparison of

Theme Options’ Features”.

Whatever your choice, keep in mind that the theme should support your code.
You worked hard to create that code: A little extra work in selecting an appropriate
theme option will let it shine through.



About This White Paper

This white paper was created by Tom Geller (tomgeller.com) and TopNotchThemes
(topnotchthemes.com), a California-based company that provides a wide selection
of beautiful and flexible premium Drupal themes for instant purchase and
download. In addition, TopNotchThemes created and maintains the second most
popular theme 14 on drupal.org, Acquia Marina. Their second free theme, Acquia
Slate, was released in March 2009, and Acquia Prosper, designed for the Ubercart
e-commerce package, is coming this summer.

The company is led by founders Christopher Fassnacht and Stephanie Pakrul,

prominent long-time contributors to the Drupal community. Their goal is to make
beautiful Drupal sites within reach for more web development projects by creating
the best Drupal themes on the planet.

14
After Zen, the popular “starter theme”, as of February 2009

Theme Options for Drupal Developers Page 9 6/17/2009

 A ppe n dix : C om pa r is on of
T h e m e O ption s ’ F e a tu r e s

Free Self-created Commissioned Premium

(example)

Initial cost $0 $0 Varies, typically Varies, typically

starts around $75-$500
$1000

Support Limited to “the Developer's Designer's Some support

kindness of responsibility responsibility, included, more
strangers” typically for an available for an
hourly fee hourly fee

Total cost to client $0 + Entirely Unknown; $75-$500 +

developer's time dependent on typically several optional
to modify to developer time thousand dollars customization
client's need required, fees
commonly up to
thousands of
dollars

Theme settings Varies; typically Must be Must be Varies, but are

limited to color individually individually usually plentiful
and image programmed, at programmed, at compared to
changes a cost a cost free themes

Adaptability Varies widely. Built to fit a Built to fit a Designed to be

Typically single client's single client's adaptable to a
designed for a specific use specific use wide range of
generic site region layouts,
content, and
modules

Accountability Developer Developer Developer has Developer has

entirely liable entirely liable primary liability; primary liability;
designer has vendor has
secondary secondary
liability liability

Code quality Varies widely, Consistent with Consistent with Sample theme
depending on developer’s designer's or demo
the designer's standard, but standard, which available before
skill and limited by can be judged implementation;
resources; knowledge of by past Drupal reputation
theme available theming projects typically vetted
for inspection techniques, and by customer
before Drupal testimonials and
implementation standards and references
practices

Theme Options for Drupal Developers Page 10 6/17/2009

 Free Self-created Commissioned Premium
(example)

Time to launch Short for simple Generally very Variable, Comparatively

sites that long, as depending on fast, due to high
require little everything has the designer's quality and
modification of to be created available flexibility of
the base theme; from nothing, by resources and base theme, and
possibly very a non-specialist facility with the availability
long for highly Drupal of support
customized sites

Inclusion of graphic No Usually Usually Yes

source files

Uniqueness Very low; High, depending High, depending Medium; even a

quality free somewhat on somewhat on low theme cost
themes can client client acts as a barrier
appear in agreement and agreement and to entry against
recognizable code reuse code reuse lookalike sites,
form on policy policy and some
hundreds of premium
sites themes offer a
“buyout” option
to prevent use
by new sites

Refund policy Not applicable None None Varies

Documentation Generally poor Varies, at client Varies, at client Generally good

to good expense expense to excellent

Theme Options for Drupal Developers Page 11 6/17/2009