Design4Drupal

Steve Fisher and I have talked about “designing in the open” on our Using Blue video podcast. The current design on that website is a work in progress; as we figure out how users are interacting with the content, we’ll tweak and refine the design. The concept is particularly useful in combating “the perfect is the enemy of the good.”

With my personal website, I’d like to extend the designing in the open concept right down to the roots. This site needs to be upgraded to Drupal 7, so I’ve decided to document and illustrate the entire process of rebooting my website.

This will not be a simple upgrade. I’ll be re-thinking the purpose and goals of my site and rebuilding it from the ground up. And I’ll be attempting to incorporate a myriad of design principles and best practices as I go.

A quick Google search shows the “Death to Lorem Ipsum” meme is a reoccurring one that is once again hitting the twittersphere this week while An Event Apart is in Boston. Their points about understanding the content during the design phase are completely essential when creating websites, but their rallying cry is completely off base.

Crying “death to lorem ipsum” because real content keeps breaking our design is like crying “death to hammers” because we keep hitting our thumb.

Lorem ipsum is just a model of real content. If the designer uses the wrong model, its not the model’s fault.

The Drupalcon Chicago 2011 track chairs met for the first time last week. Our first task is to come up with track descriptions. For the first time, Theming is going to be separate track from Design and UX. While this shows a nice focus on these interrelated but distinct topics, I'm still trying to come up with a good description that helps define the dividing line between design and theming for sessions proposals like “Designing with CSS3”.

Anyway, here’s my first draft for my track’s description:

Theming Track

As Drupal’s mighty hands build markup, styling and dynamic behaviours, the lowly Newbs have forever strived to comprehend this Magic. With gnashing of teeth, wailing and despair often being their pitiful state. But, lo! Behold the mighty Drupalcon Theming Track. Forthwith, We, the Gods of Drupal, beseech the worthy to attend this track and despair no more.
[insert thunder crack here]

Hmm… I may have to tone it down. A bit.

Back in the day, all the CSS of the sites I built were in a single file: style.css. Things were easy. I built the site; I organized my styles; I knew where everything was.

Of course, then I discovered the power of leveraging an open-source community. And now there are innumerable developers writing the CSS for my websites. To keep things manageable, each module of functionality has its own stylesheet.

Unfortunately, once you get in the habit of having multiple stylesheets for your website, you will eventually run into a weird problem with Internet Explorer: some of your styles won’t apply. At all.

And if you have sufficient Google-fu, you’ll eventually discover this is a little known bug: Internet Explorer will only load the first 31 stylesheets and will ignore the rest. And this isn’t even limited to our usual suspect, IE6. All versions of IE have this limitation.

The Full Problem
and why I was insane enough to load 993 stylesheets on one page

The two biggest things that have bothered me as maintainer of the Zen theme is:

1. People complaining about Zen being bloated
2. People actually using the Zen Classic sub-theme

With the latest release of Zen of I've tried to address both points. Zen 6.x-1.1 is now out and with it Zen has slimmed down… by jettisoning the Zen Classic sub-theme. :-)

Ok, I mentioned this in twitter a few weeks ago, I created an issue about it in D7’s issue queue, and there are 2 small print notes in the D6 theme guide, but I don’t think my message was visible enough. So let me just say for the record (again)…

Never, never, ever, ever use phptemplate_ as the prefix for your theme’s preprocess functions. Don’t do it! phptemplate_ prefix should talk to the hand! Expunge it from your memory. It’s an ex-prefix. Seriously, cut it out! So, let me re-phrase:

Every time you use phptemplate_ prefix,
God adds a pointless issue to Drupal’s issue queue.
Please, think of the issue queue!

A few days ago, Jeff Burns wrote “Source Order: why I think Zen gets this wrong”.

His basic premise is that content-first HTML source ordering is an SEO-driven idea, is not backed by any accessibility studies, and goes against user expectations. While I respect his opinions, um… he’s wrong. :-)

I was just interviewed by Jeff Robbins for Lullabot podcast #55. I’ve listened to this Drupal-lovin’ podcast since its inception, so it was pretty cool to be asked to do an an interview.

We mostly talked about the Zen theme, which I’ve put a lot of work into and, if you don’t already know, is a fantastic foundation from which to build your own custom-designed Drupal theme.

After a month and a half beta period with only 5 bugs discovered (and squashed), the O-fficial Zen 5.x-1.0 version has been released. Yay!

Thanks to everyone who helped with new features, bug fixes and documentation suggestions! The help is greatly appreciated!

For those of you who haven't looked at Zen since its 5.x-0.6 days, take it for a spin. No longer do you need to un-theme the Deliciously Blue style out of Zen before adding your own styles. It’s a true base theme.

Steven Wittens was a co-creator of Drupal’s beautiful default theme, Garland. And he has a thought-provoking post about the current state of design in the Drupal community and his frustrations in trying to improve it.

Many of the arguments in the comments to Steven’s blog were that designers tend not to collaborate. And that they can be difficult for programmers to work with. And that the Drupal community lacks many good designers. Some even said designers are prima-donnas and they don’t know CSS.