Raised Eyebrow Blog

I recently redesigned a website for a personal friend and although it wasn’t done under the official umbrella of Raised Eyebrow, I found that the project offered some interesting challenges I’d like to reflect upon briefly.

The friend in question is David Eaves, who has more trouble answering the question, “What do you do?” than just about anyone I know. He’s a prolific writer, public speaker and consultant who works in three areas of interest: public policy, open source, and negotiation. I never imagined those three things could overlap in such interesting ways until I met David & heard him wax poetic on subjects like open-source community management (bringing negotiation skills to online communities) and Government 2.0.

So there you go: You already know what David’s biggest communication challenge on his website is. It’s demonstrating what he does in a way that makes intuitive sense to people reading his popular blog. The previous iteration of his site was a pretty typical personal blog, with a long sidebar filled with links to this & that, and hardly a self-promotional word to be seen. It was a great demonstration of his brilliant mind at work, but a poor sales tool. (It didn’t even have a Contact page. I’m serious.)

Now, David isn’t really a sales-y kind of guy (in case the lack of a Contact page wasn’t your first clue), and he didn’t want his blog to transform overnight into the website equivalent of a flashing “Buy! Buy! Buy!” sign. He simply wanted to pare down the visual clutter, and make it easier for people who might want to hire him to know how to do that.

I took a simple approach: I interviewed David about the kind of work he does & organized it into three categories: public speaking, writing & consulting. The first two merited their own pages, and the third got folded into the About page (since his consulting services are a bit more amorphous & his consulting clients generally come to him via word of mouth). And the rest of the menu bar was filled out with a page of media appearances (since David appears frequently on television & radio as a commentator on current events) and a “What I’m Reading” page that lists some of the writing that’s inspiring his free-flowing pen (or rather, keyboard). (We hooked up the latter with his LibraryThing and Delicious accounts so that they can be kept up to date automatically, saving him the hassle of updating the page by hand.)

The design process posed an interesting challenge: David really liked his old minimalist, low-key blog design and didn’t want too radical a change. He also didn’t want the site to look too “designed,” because he feels that part of his brand is a kind of approachable, do-it-yourself style that doesn’t jive with anything too flashy or trendy. So I had to really rein myself in and keep it quiet, monochromatic, and simple. (I love simple design, but I didn’t allow myself any indulgences on this one.)

The header is very similar to what he had before, but the menu bar was a new addition, making his “sales” pages more prominent. The sidebar got hugely simplified, to focus the visitor’s attention on what’s relevant & important rather than cluttering up the space with superfluous content.

But where I pushed David to be bold was in two areas:

1. The home page now features a single, complete post. This is rather unusual (though not unheard-of) for a blog, but it really allows the visitor to fully absorb one piece of content before moving on to the next. The previous post is highlighted in a box directly below the most recent post, to encourage further exploration of the site.
2. The pre-footer area is large & prominent, and directs traffic to recent posts, popular posts, the “sales” pages and to David’s various social media accounts (Twitter, Facebook, etc. etc.).

These two design decisions go hand in hand. If the home page housed five or ten posts, the pre-footer area would be virtually invisible, so it wouldn’t merit special attention. But in this case, once a reader has absorbed the content on the page they are reminded of the various options they have to read further. A lot of websites ignore the footer area, but when your site attracts voracious readers (as David’s does), it pays to reward them by allowing them to navigate the site from the bottom of the page as well as the top.

A lot of bloggers wear multiple hats and have little time to build stand-alone websites for each of their endeavours, and I think David’s site is a good example of a middle ground: he shares information about how to hire him without presuming that’s the goal (or desire) of every visitor, while maintaining a familiar blog interface to those who simply want to read his latest post. If a highly promotional website is outside your comfort zone, this site may hold some lessons for you. In particular, I think I managed to convince David to:

• Stop withholding information about your services from people who want to hire you.
• Always, always, always have a Contact page.
• Consider that bringing in a designer can be helpful even if you don’t want anything “designed.”

I spoke today at WordCamp Vancouver – a one-day conference for people who work with WordPress (including developers, designers and users). It was a great event, thanks to the hard work of the organizers. The presenters shared lots of very useful information on design and coding as well as about social media and web culture.

I chose to focus my 25-minute talk on what I think lies below the surface of the work we do as web designers and developers, and that’s a more consultative and strategic role that we can play if we choose to (and if our clients let us).

The session was recorded on video, and I’ll post that video when I get the link that video is posted below, but for now I thought I would at least share my slide deck – particularly for those in attendance who requested it.

Video from the event:

(Many thanks to Justin Carlson for recording & sharing the video.)

Here at Raised Eyebrow, while we have experimented with dozens of Content Management Systems (CMS’s), these days we mostly build websites using either Drupal or WordPress.

Why these two CMS’s, of the thousands of content management systems available? Both CMS’s share several key qualities:

• They’re open-source projects. Over the past few years, Raised Eyebrow has increasingly turned to open-source software options because of the flexibility and security they offer.
• Both WordPress and Drupal boast huge communities of developers and widespread adoption; those are important things to look at when working with open-source software, because we like to see a critical mass of people who are invested in making the software better, both on the coding side and from the end-user perspective.
• They offer a rich and robust feature set, both within the core CMS and in terms of the plugins (or in Drupal parlance, modules) that are available — plugins and modules help us extend the base functionality of your site with features such as photo galleries, event calendars, interactive forms, shopping carts, and so on.
• Perhaps the most compelling reason we’ve chosen these two, though, is that our clients like using them. The interfaces are user-friendly; the software is reliable; and the basic functions that our clients need (from uploading a file attachment to creating new pages and blog posts) are available, easy to use, and intuitive. (I won’t claim that there aren’t things I wouldn’t change if I could wave a magic wand — but of the CMS’s we’ve tested, these two are far and away at the top of the heap.)

So how do you choose which one is appropriate for your project? Drupal & WordPress are very different systems, with different strengths and weaknesses. Here’s a quick overview of some of the distinguishing features of each CMS.

Drupal

Drupal welcome screen

Community focus: Drupal has extensive functionality for allowing people to interact with one another via your website. Creating accounts; logging in to access special content — or create their own; connecting with one another — all of these are possible with a Drupal site, so if your short- or long-range plans include turning your website into a social hub for your visitors, Drupal is a better choice.

Editing a page in Drupal

Editing is seamless: In Drupal, if you have administrative privileges, and you are logged in, you can edit your content simply by navigating to the page you want to update, and clicking an unobtrusive “Edit” tab. Many people find this a particularly intuitive approach to site editing. (Not only that, but Drupal is so profoundly customizable that if you want to, you can create custom themes for different areas of your site — so your back-end could look totally different from your front-end, should you feel so inspired.)

Specialized content types in Drupal

Built for dynamic content: Drupal has some very clever ways of cross-categorizing content, so if you have the kind of website where you want content to appear in multiple places based on various categories you assign to it, Drupal may be just right for you. And it’s often the better choice for managing complex kinds of content, where a simple 2-field “Title” and “Body” editing screen won’t suffice.

Highly modular & extensible: The underlying architecture of Drupal is quite flexible, and the CMS can be adapted for a wide variety of purposes. Drupal is like a Swiss Army knife or a food processor: it is many tools in one, and you can choose to use it for one task or several. WordPress is much more specific in its function: it does a handful of things and does them very well, but it isn’t the right tool for every job. (On the other hand, if you need a simple site, Drupal may be overkill, and you could spend a lot of time turning off the features you don’t want.)

Greater investment required up front: Drupal’s out-of-the-box configuration is somewhat limiting, and most people prefer to customize it pretty heavily. This requires not only a solid understanding of HTML and CSS, but also of PHP and of Drupal’s underlying architecture, which has a fairly steep learning curve. As a result, Drupal sites tend to cost more to set up, though the initial investment is well worth it if you plan to extend your site’s functionality to take advantage of Drupal’s flexibility.

WordPress

WordPress's editing screen looks quite different from your site's front-end. This is the screen I see while editing the blog post you're reading.

Built for blogging: I personally find Drupal’s blogging capabilities somewhat limited — for example, creating blog category lists, tag clouds and date-based archives is rather onerous in Drupal, whereas in WordPress they take a matter of minutes to set up. WordPress was first developed as blogging software, and it shows: its blogging features are well thought-through and have been polished by years of improvements.

WordPress's Media Library gives you easy access to all the files you've uploaded to your site: images, PDFs, media files, etc.

Easy-to-use file management: WordPress’s “Media Library” feature allows you to browse through all the files you’ve uploaded to your site — images, PDFs, multimedia files, whatever they might be — in a clean, attractive & easy-to-use interface. It makes managing your files and inserting them into your blog posts and site pages a much easier task.

Smart spam filtering: Because of WordPress’s blogging focus, the developers had to pay close attention to managing spam. (Blogs attract a lot of spam via comments and pingbacks.) WordPress comes bundled with spam-filtering software that does a remarkably good job — and moreover, its comment-management features are well thought-out and simple to use.

The WordPress Dashboard gives you an overview of activity on your blog or website.

Quick to install and configure: WordPress is famous for its 5-minute install, and it really does live up to its name. Although that doesn’t mean you’ll have a fully-functioning website in 5 minutes, it works well “out of the box” for most simple sites & blogs. As a result it is often less costly then Drupal to set up.

Easy to theme: Both Drupal and WordPress have a great deal of flexibility with regard to visual design — you can make a site built in either CMS look beautiful via either free templates or by applying your own custom design. However, theming a Drupal site is a much bigger task than theming a WordPress site, unless you are simply going to download a free theme and slap it on your site. If you want to be able to tweak design details, in our experience, that’s a much faster job in WordPress.

If you aren’t planning to use WordPress’s blogging features, navigating through the CMS can be a little confusing, because blog posts are the primary focus in the menus, and page editing is less prominent. In this sense, its focus on blogging can be a weakness as well as a strength.

WordPress keeps your site’s back-end (that’s the area where you create & edit content) totally separate from the front-end (the part your visitors see). Some people (like yours truly) prefer this approach, where content is more or less divorced from presentation, whereas others prefer Drupal’s integrated editing options. In my experience, this is a highly subjective preference, and it’s worth trying both to see which feels better to you.

In Summary

As with most decisions about your website, you are well advised to consider the long-range goals of your site before selecting the CMS you’re going to use. If you foresee a highly dynamic website with complex content types, and/or community features such as member login areas, multiple blogs, or user-created content, Drupal may be better suited to the job. On the other hand, if your content management needs are relatively straightforward, or if you intend to have a blog-centered website, WordPress could be just right for you.

Still have questions? Please feel free to leave them in the comments & we’ll do our best to answer them.