Solid State UX » Wordpress

Choosing a Wordpress Theme: Part 2 – Blog, Magazine, or Portfolio Design Pattern?

Todd Toler — Tue, 30 Jun 2009 19:00:37 +0000

There are literally hundreds of Wordpress themes available, a number which seems to be growing faster than anyone can keep up with. Fortunately, most of them fall into a few basic interaction design patterns. An understanding of what these patterns are and how they differ will make it easier to identify the right theme to begin a project with. To distinguish this from other Wordpress theme categorization schemes out there, I’m grouping all themes into three major categories based on the way an information architect might think about it. It is important not to get too distracted by the visual design(e.g. colors and graphics) or content-type specialty (e.g. text, video, photo) of a pre-built theme – at least, at first. The look of things and the messaging and positioning of a theme is much easier to change than the basic flow between elements, how the navigation, pages and sidebars are laid out, which features are deployed and in what way.

Blog Pattern (Wordpress Native)

Default Wordpress Theme "Kubrick"

The first thing you see after a virgin Wordpress install is the blue and white of the default Kubrick theme. This is the theme that refuses to retire and has lived on as the default theme in Wordpress, even after quantum advances in the admin interface (not to mention it’s rival free themes) have made it feel like a holdover from a bygone era. The significance of Kubrick is not so much that people are using it out of the box, but rather that is has become the starting point for a whole universe of modified themes out there, it’s weaknesses living on in these derivitave works. Among the most cited weaknesses of Kubric are that it has non-optimal markup (bad for SEO), is fixed-width versus “liquid” (where elements resize gracefully at various screen resolutions and browser zoom settings), and that it doesn’t take advantage of all the new features Wordpress has to offer. But it also reinforces a high degree of blog-centricity in the design convention it uses. In a world where Wordpress has evolved to be one of the most powerful, flexible web publishing solutions available, this fact in itself is a limitation that should be given serious consideration these days. Even if one sets out to do something that is culturally defined as blogging, one must ask themselves whether there are true benefits of remaining compliant with the design conventions of the genre.

To get specific, what does blog-centricity imply in interaction design terms? First let’s look at the Wikipedia definition of blogging:

A blog (a contraction of the term “weblog”) is a type of website, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order.

Wine Blog Vinography's Chronologically-based Navigation

Regular entries displayed in reverse-chronological order is the foundation of the blogging design vernacular. But does the user care about chronological order and want to interact with your content in this manner? The concept of the “loop” – which is a technical foundation of Wordpress – is very front and center in the Kubrick-influenced blog pattern. So, what is the default user experience of the loop? New stuff shows up (in full) at the top and in the center of the page – old stuff gradually starts to slip off of the event horizon as time goes by. Typically there is a calendar in the sidebar that visualizes posts by day, and an “archives” section organized by month – as if anyone cared which month a previous post was created in! (Note: Kubrick doesn’t ship with one of these calendar doo-hickeys, it must be added with a plug in, widget, or custom php call in the theme’s files… but a large amount of derivative themes do have one, so let’s consider this part of the pattern.) Most themes in the pattern also have navigation that sequentially links posts based on their publication date – for instance, with next/previous links on the post detail page and at the bottom of the main category pages. The truth is that publication date is one of the least interesting relationships between your posts. Linking by related topic, tag or via a series of explicitly defined links is infinitely more useful to the user. Outside of blogs, few information sites are organized this way – not even newspaper sites. It’s one thing to let users know about your new content, and yet another thing to commit to a top to bottom chronologically based interaction design. Perhaps this makes sense for highly event-driven sites. And arguably it makes sense for those of us truly doing personal journaling on a blog – but I would argue this is a small minority. Most blogs – at least those worth reading- are really about a topic other than the blogger themselves, even if they are largely personality driven.

Should you therefore avoid themes in the blog pattern? Not necessarily. Remember, if your goal is to begin with a free theme then you should pick the one that is overall the closest to what you want to accomplish. With a few basic loop hacks, the weaknesses of the blog pattern can easily be overcome. Hacks include freezing the loop so that featured posts remain ’sticky’ on the home page, as well as introducing mulitple loops on the same page, such as a separate loop per category on a single page to create a “landing page” feel. Which brings us to our next pattern, which will accomplish exactly that.

Magazine Pattern

Ironically, Problogger uses a Magazine Style Theme to Look Less Bloggy

As we mentioned in Part 1 of this series, paid theme-makers were initially ahead of the curve in mitigating the blogginess of Kubrick-inspired themes. The goal was to make a Wordpress-powered content site look like a real website, not a blog. You know, one that was designed by professionals and was powered by a sophisticated enterprise-class content management system. Basically, a site like a real magazine would have…. with featured content tiled on the home page, lots of visuals, and nice graphic design. After all, real magazine sites have an up-to-date feel, but unlike a blog, are not a slave to their own publication chronology. Real magazine websites assume that users browse content by what looks interesting. Real magazine websites also tend to accomplish another important user experience goal that blogs don’t – letting users know, in a compelling way, what the site has to offer and giving them a reason to come back. The blog pattern is optimized for reading the latest post(s), devoting most of it’s “above the fold” real estate to it, as if the reader is fully up to date on all the other posts on the site and isn’t really looking for anything but the new one. It relies on the names of the categories, and maybe a few sidebar widgets like “top posts” or “recent posts”, to convey it’s affordances. Conveying affordances (that is to say, can somebody tell everything important a website does by quickly glancing at it, no matter where they enter the site) is a key Solid State UX principle. Magazine layouts communicate affordances both in their page-level information architecture (IA) and in their extensive use of visuals.

List>Detail Page Progression at BestBuy.com" width="300" height="87" />

IA Primer: A Typical Landing>List>Detail Page Progression at BestBuy.com

A key IA difference in magazine layouts versus blog layouts is the use of the “landing page” concept at both the home page level and the main category page level. Landing pages are a primary way to bubble up content from deeper within the site to a main page. Thus you will see a lot of magazine style layouts that feature one or more articles in multiple categories on the home or main category pages. This reminds users of the other categories’ existence each and every time they pass through, and also has the added benefit – by offering more types of links on key pages – of having a better chance of catching someone’s attention with content that might be relevant to them. Contrast this with the blog pattern, where if a user comes to the home page and isn’t so interested in the latest post, they really have to poke around to find something that appeals to them. In this day and age, most people don’t arrive at the home or category page. Instead, they use search to enter the site much deeper, typically at the detail page level – so it’s important not to overstress the role of these pages. But there is always some degree of direct traffic (if you’re lucky) and it’s those users you really have to worry about if you want to drive growth.

Another trademark of the magazine layout is a much larger number of placement zones for images. In real life, magazines are slick, glossy, and stimulatingly visual – and a lot of pre-built magazine themes emulate this look. This is a bit of a red herring, however, when deciding on using a magazine theme – certainly when compared to the information architecture concerns mentioned in the last two paragraphs. There are downsides to large, slick visuals. First of all, will you be able to support such a commitment to high impact art on your site? Stock photography has gotten an order of magnitude cheaper in recent years with the arrival of sites like istockphoto.com, but cost is only part of the battle. Highly visual layouts require a higher degree of art direction skills… are you good at sourcing images whose composition, colors, and content support what you are trying to communicate in your written content? And can you do this without your site looking as generic and “stocky” as a brochure from your car insurance company? Also, gratuitous use of decorative imagery has negative impacts on your user experience as well and may turn people away. One of the powerful things about blog culture is the promise of straightforward, no-bull, substance. Notice that power blogs like Drudge Report and Huffington Post have succeeded well into real magazine territory while studiously avoiding the magazine look online, although they both have magazine design patterns from the IA perspective.

Portfolio/Gallery Pattern

WPThemeReview.com Uses a Gallery Theme to Support Visual List Browsing

The third main category of theme design pattern is a useful catch-all bucket for those of you whom do not consider publishing content to be the heart and soul of your project. Are you planning a site for your Pilates studio or other small business? Are you in the market for a career site that showcases you or your agency’s recent work? Are you planning a simple online store with product descriptions and ecommerce capabilities? Or how about a marketing site for your latest project, product, or company? Well, curiously, these disparate purposes can all be handled best – at least in Wordpress – with portfolio style themes. Portfolio themes, in their purest sense, are a format that is optimized for artists to showcase their works. This is typically accomplished, in interaction design terms, with a page and navigation structure that’s optimized for browsing images, not reading words. This commitment to the visual makes this pattern excellent for adapting for other purposes – such as marketing or even ecommerce sites for products. After all, when people browse for products online, they want to see merchandise prior to reading about it. So browsing a catalogue of product imagery is not that different than browsing an artist or graphic designer’s porfolio of work.

Konigi.com Also Makes Use of a Portfolio Style Theme

The list page design is at the heart of what makes a portfolio pattern different from that of a blog or magazine pattern – because it’s a special type of list page design. A portfolio theme’s list page design is typically made up (almost exclusively) of image thumbnails – perhaps with a small amount of text such as a item name and brief description. A typical visual browsing convention, which you will see in portfolio themes, are home page or category pages given over to the purpose of browsing the site’s content by paging through thumbnail images. There is a huge variety of navigation modes for accomplishing this, which is what makes portfolio themes interesting. For instance, horizontal scrolling may make more sense in this pattern than vertical, so you will see a lot of that. Portfolio theme-makers are fond of solid-state transitions to browse these visual lists as well. It’s quite common to see JavaScript or Ajax pagination schemes in these themes, where the list of images per screen is refreshed without a traditional page refresh, or the transition between thumbnail image in list to full detailed view of image is handled within page via an overlay (such as a lightbox transition.) This is partly because it makes more sense to browse visually this way, and because marketing-oriented sites (especially those for creative services) are a far more natural place to seek out fancy transitions than content-oriented blogs. Interestingly, some portfolio themes use the loop-centric approach of the blog pattern (e.g. with newer “products” shown first in reverse chronological order) and some use techniques and loop-hacks of the magazine theme designers and combine the two ideas (e.g. multiple category loops on a home page to create more of landing page feel)

Now that you understand the essential differences between themes, choose the one that is closest to what you want to accomplish and read the rest of this series to refine your choice even further.

Tim Ferriss Gives Solid State Blogging Tips

Todd Toler — Sat, 27 Jun 2009 17:33:30 +0000

Author of The 4 Hour Work Week – and therefore a deserving hero to us all – Tim Ferriss gives a very useful presentation full of practical tips for successful blogging. I was most impressed by the advice on establishing an efficient writing and editing process, which let’s face it – is the most time consuming aspect of blogging and where most of us fall over. Tim also demonstrates committment to a very Solid State UX principle – which is to always test your assumptions, then make small tweaks until you optimize your user’s experience. He shares some fascinating click stream data and insights collected from his own blog. From San Francisco WordCamp 2009: Approx. 50 min

Choosing a Wordpress Theme: Part 1 – Premium, Custom, or Free?

Todd Toler — Fri, 26 Jun 2009 19:32:32 +0000

Photo Credit: Eric Flexyourhead

Wordpress can be used to pull off just about any type of website these days, and clearly the magic of this platform lies in the vast proliferation of pre-designed themes, plug-ins, & widgets. Choosing a theme – which is the single largest determinant of a site’s look, feel, and organization – can be a confusing process. If you’re hacking together a site yourself, don’t overemphasis the way the theme looks – at least on the surface. After all, you can always tweak the basic feel of things, swapping out your own graphics, colors, and images with just a little hunting and pecking around the theme’s file structure and a few basic style-sheet tweaks. Far more important are the basic information architecture and functionality choices the theme designer made – because let’s face it – you’ll be locked into these unless you really know your way around the code. Most Wordpress theme choosing advice is focused on practical tips – e.g. Is it Widget Ready? But let’s step back and focus on the overall quality of the design, assuming we can tweak the little things we don’t like about it later. To help make sense of it all, I’m proposing a simple taxonomy of types of Wordpress themes to help with the decision-making process.

Premium, Custom, or Free?

First of all, there are many, many themes out there so we must give a nod to general quality level. Premium themes and are those that are for sale (vs. free) and tend to stretch the boundries of the wordpress form beyond the blog genre. These themes make it so that it’s basically harder for someone to figure out that the site was built on wordpress, but still benefits from using wordpress as a content management system. Typical signs:

Freezing the loop into static home and landing pages
Avoiding typical signposts of the genre – like an “archives” or “blogroll” feature
Fancy Javascript – such as sliding menus
Fancy graphics with gradients
Targeted at business, small business, or “pros”

Premium themes have other advantages. Many themes come with custom page and post templates – something you almost never get with a free theme. They often have customization options that do not require monkeying around with the CSS & HTML files behind the scenes – so this can be an advantage depending on what you are trying to customize. However, I would encourage you not to be afraid to get into the theme’s files yourself and do basic customizations. It’s really not that difficult and it will make you a more powerful blogger (or ecommerce store operator,etc.) to have some basic familiarity here. Also, many plug-ins have easy-to-change settings and that is yet another way to customize your site without paying for a Premium theme. If you are truly hands off, you should consider a paid theme – but only after really evaluating what’s out there in terms of free options. StudioPress has beautifully designed themes for about $60. Of course, that’s much cheaper than hiring a graphic designer to do anything for you – but remember, that for this price you do not have exclusive rights to the theme. So if your goal is to look like your business paid for a custom site, this isn’t really the way to accomplish that.

Other arguments for paid themes is that they a) have better support, and b) have sounder code. The former may be true but that would vary highly depending on who is selling you the theme. Both Elegant Themes and Woo Themes offer annual subscriptions to an entire collection of themes. Given the frequency with which most WP based sites change themes, only developers who are building blogs and sites for others are likely to really benefit from access to a variety of themes under one roof – and while the ongoing support and ability to receive updates makes sense, does it justify an annual subscription? WooThemes service starts at $70 a year… that’s almost what you can get away paying for hosting these days. But you do get real value in terms of support here, including a knowledge base, tutorials and accurate, comprehensive documentation (Have you seen the typical ‘read me’ file that comes with your average free WP theme?)

As for soundness of code, I find it hard to believe such generalizations when there are literally 1000’s of free themes available from a wide variety of developers with different artistic talents, programming and skinning skills, and diverse motives for giving away themes in the first place. A quick glance through the Smashing Magazine’s 100 Amazing Free Wordpress Themes for 2009 will quickly disprove the notion that free themes are of inferior quality when it comes to design and even coding skill of the theme developer. This is not the only comprehensive post on excellent themes at Smashing btw – this is the place to shop for themes in my opinion- and I prefer it to the more generalized catalogue at wordpress.org. Several online sites rate themes based on their effectiveness at getting results in search engines (SEO), which they accomplish by evaluating the code – but after typing a number of the Smashing top 100 into www.wpthemereview.com and getting no results we wonder if this is a true review site or if they are plugging their own themes. We’ll dismiss the notion of “Free Premium” here, which a lot of themes are marketed under. This is basically a bait and switch to get you to upgrade to one of the paid themes at the same outfit. And, of course, you can decide whether to use a custom theme – which is a theme that someone else builds specifically for you. This sort of violates the DIY spirit of Wordpress, don’t you think?

Listen. You’re either paying for a theme or you’re not. And if you ask me, the answer should usually be not. While paid themes were initially ahead on the innovation curve, particularly with non-bloggy layouts where WP is used for its content management capabilities and not as a blogging interface, the gap has closed significantly with what is now available for free. If you’re not afraid of a little hacking, it’s relatively easy to get a unique look, although be prepared for that crushing moment when you see another blog in your category with the same theme – as recently happened to me when I visited uxcamplondon.org. Another trend emerging are Wordpress frameworks – which are essentially pro themes that have special interfaces for modification and don’t require playing with the code. Read the RobbSutton post linked at the end of this one for more on frameworks.

And a recent clarification by the Software Freedom Law Center has confirmed that all Wordpress themes must be licensed under a General Public License (GPL) – except for the CSS and image files within the theme. It will be interesting to see how this affects the nascent pro theme industry. My recommendation – just find a free theme that is more or less close to what you want to do, and make a few changes yourself to optimize it to your needs. Because a little hacking skills will ultimately serve you in your blogging career. Alternatively, get your site designed custom using techniques that will shortly be available on this blog in the $5,000 Website category.