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

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 Themes

Magazine Themes

Portfolio Themes

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.

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.

Solid State UX