When talking about the difference in themes and plugins, it’s common for those involved in building projects for WordPress to know that functionality is usually left to plugins and that presentation is left to themes.

This doesn’t mean there isn’t some cross-pollination (or perhaps cross-contamination? :) where plugins introduce visual effects and themes offer more functionality than they probably should, but as a rule of thumb, I think it serves us well.

Sometimes, though, I wonder if we don’t think hard enough about what the presentation of content actually means when it comes to designing themes.

WordPress Theme Design

First and foremost, I am not a designer. I’ve never claimed to be, nor do I pretend to be. Instead, I try to stay updated with current design trends, good practices, and so on through reading blogs, articles, and by following designers wherever they may be sharing some of their stuff.

I say that so that I at least qualify where I’m coming from as it relates to talking about theme design.

So a moment ago, I questioned whether or not we do a good job of thinking through the presentation of content as much as we should whenever it comes to designing themes. And here’s what I mean by that:

In the most generic case, presenting content stored in the WordPress database is relatively easy. Use The Loop, iterate through the content, drop it in some HTML elements, and have the browser render it.

Using any of the major front-end frameworks makes  that relatively easy to do.

Twentyfifteen

Twentyfifteen

We can take it a step further, though. For example, if you look at Twentyfifteen, the sidebar is stuck to the side of the browser such that it’s persistent throughout the site as you browse through pages and posts.

To me, this says that – at some point in design and/or development – the authors decided that the content in the sidebar carried enough weight such that it should be persistent while users are browsing the site.

Of course, I’m only using this theme as an example because it’s one of the most popular themes at the moment – not because I have any real problem with it (I happen to really dig it) – with the launch of WordPress 4.1.  But it does raise a few question that I think we all should be asking ourselves about nearly every element that we opt to display on the front-end of a theme:

  • Is this is the most logical place to put this element given its relationship to other elements on the page?
  • Does this display in the priority in which it should for the given content?
  • Is everything properly emphasized as the reader progresses through the featured image, title, meta data, content, and comments?

Obviously, there are more questions that are worth asking, but the above are some of the few that I’ve come up with when I see newer themes and start thinking through the design-decisions behind them.

And no – I don’t think that users or customers necessarily think in these terms, but we – as people – implicitly feel and notice these things when we’re reading through the content. It’s kind of like potholes in the road:

It doesn’t stop us from getting where we need to go and it doesn’t really negatively affect anything, but it’s annoying to hit one and we notice when we do.

So these are some of the thoughts that we’re asking as we’re [finally] getting back into building themes. I’m also curious as to what questions or what process you follow when working on a design, as well (regardless of if you’re more of a designer or more of a developer).

Category:
Articles
Tags:

Join the conversation! 4 Comments

  1. I thought about this when I first saw Twenty Fifteen (2015). Let me start by saying I like the theme a lot. Even more, I like the differences in each year’s default theme. The last four years have seen some pretty major [visual] changes. That’s great.

    So with 2015, within seconds of seeing a live demo I was inspecting the markup. I wanted to know what was going on over there (the sidebar). Specifically, I was looking for some trickery in the HTML flow. As a theme developer myself, I wasn’t at all interested in seeing typical sidebar junk above content in the HTML flow. I wasn’t too happy with the flow because I know how most users will use the sidebar.

    To keep this short, I’ll skip right to saying that if this were a theme I created and planned to market to people, I’d push it in a manner that promotes very limited content in the sidebar. I’d encourage people to treat it more like a header (which happens to be its sibling anyway) – site branding , simple navigation, maybe a few social profile links. That’s all.

    All other “flare” would need to be integrated into the theme in a more logical manner. For example, opt-in forms… pleeeaaase no sidebar placement in 2015 (just my opinion). I’d like to see these extra elements added with some sort of conditional approach. Maybe key spots like the homepage above posts, single post footers, etc. To me, this design calls for more intentional [extra] content placement.

    But yes, the content layout and behavior, in my opinion, are not just something you design and throw out there. Much more thought is required and if you can communicate those thoughts to potential users, you should definitely do so. Content begets design. So if you’re designing a theme and you don’t have content in mind, especially considering it’s not hard to guess what most WP users will have as content, I’d argue that you can be a little more intentional.

    This ended up long anyway. Oops. :)

    •  I thought about this when I first saw Twenty Fifteen (2015). Let me start by saying I like the theme a lot. Even more, I like the differences in each year’s default theme. The last four years have seen some pretty major [visual] changes. That’s great.

      Agreed.

       So with 2015, within seconds of seeing a live demo I was inspecting the markup. I wanted to know what was going on over there (the sidebar).

      Smart, especially because there are proper ways to do it and there are cheap ways to do it (not that I’d expect the theme team at Automattic to do the latter, I’m just speaking in a general sense).

        I’d encourage people to treat it more like a header (which happens to be its sibling anyway) – site branding , simple navigation, maybe a few social profile links. That’s all.

      I like this approach, though I tend to lean more towards minimalism myself. I don’t consider myself a minimalist and you won’t see me pushing that approach to things, but I tend to prefer less rather than more. Even now, my current sidebar has more going on than I want (as does my menu) and I’m looking to change that up with a new theme at some point.

      But I digress.

      Bottom line is that I do think having fewer things to detract from the content is better.

       This ended up long anyway. Oops. :)

      All well said, though – and appreciated :). 

  2. The elements on a page should be placed, rendered, and react in a way that the developer/designers feels the user would enjoy it. People may like using a Sidebar because it reminds them of using an Index in a book. To know what is available and get to it quickly. Some people may prefer drop down menus instead, because they don’t get in the way of the content they are viewing. To me it all comes down to the user. You could try to target every user by giving the user the ability to select how they want to view a Web Page. But that’s more to maintain. So I guess you could always try to find what the majority of users that navigate a particular Web Site Genre like. Then go from there in determining how elements should be placed, what there priority is, and how much emphasis they should carry in relation to the Web Site Genre that your Web Site fits in.

    • People may like using a Sidebar because it reminds them of using an Index in a book.

      I agree. Generally speaking, I think the way the theme is designed needs to cater to the audience to which it’s marketing itself.

      Like you said:

      So I guess you could always try to find what the majority of users that navigate a particular Web Site Genre like.

      I also think there are standard patterns that should be used for certain things (like breadcrumbs, pagination, etc.). That is, there are just standard places things should go rather than trying to mix it up or re-invent the wheel.

      Sometimes, things belong in a certain place because it is the best place for them; other times, we’re experimenting or we’re targeting a specific audience.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.