Smashing Special: WordPress Theme Trends For 2012: Design

This special is the first in our series of Smashing Specials — extended articles and studies dedicated to a specific topic. The special features current WordPress theme trends for 2012, covering past trends, new developments in theme design and trends in the theme development.

Responsive Design

responsive design
From the post that started it all on A List Apart.

If you work on the Web and haven’t heard of responsive design, then you must have been working with your head in a bucket for the past year. Perhaps you haven’t even noticed the gorgeous new responsive Smashing Magazine redesign, which you’re looking at right now (unless you’re using an RSS feed reader, of course). To learn more about responsive design, check out a Smashing Magazine post from a whole year ago “Responsive Web Design: What It Is and How To Use It.”

In 2012, we’ll see responsive themes becoming the norm, rather than a novelty that some theme shops use to show that they’re up on fads. Mobile devices are becoming cheaper, with the Kindle Fire and Nook Tablet offering reasonably priced alternatives to the iPad for the average consumer. The proliferation of devices means that designers are having to rethink Web standards and best practices. Soon, people won’t ask if it’s possible for a theme to work on any device: they will expect it to.

In “15 Top Web Design and Development Trends for 2012” on .net Magazine, Erin Jo Richey says, “Just because a site can shrink in size, that doesn’t mean all the information is equally valuable on desktop and mobile. The type of information users interact with needs to adjust as fluidly as the size of the site itself.” Can we expect to see content going responsive, in addition to design? We’ve already seen mobile switchers serve up information according to the device, but will designers be able to make the content in their designs responsive?

HTML5 and CSS3

responsive design
Time to start learning some HTML5 skillz! (Image: Carlos Varela)

HTML5 has been around since 2004, picking up more steam with every year. 2010 saw HTML5 Boilerplate make HTML5 easier. And 2011 saw WordPress taking HTML5 seriously, with the Twenty Eleven default theme rolled out with every WordPress download.

HTML5 brings with it 30 new elements, which we will hopefully see filter down to WordPress themes over the next year. As with responsive themes, an HTML5 theme in 2011 was a novelty. Theme designers and shops made a big deal out of their HTML5 themes. By the end of 2012, we expect to see designers not needing to shout about it, as HTML5 goes from novelty to standard. We also expect to see designers having more fun with CSS3, as Josh Byers does on the StudioPress blog.

2011 saw growth in the number of HTML5 and CSS3 tools, and more and more theme designers will be picking them up in 2012. Modernizr is one tool that is becoming essential for designers. The JavaScript library detects whether browsers can natively implement next-generation technologies. SimpleMarket, for example, is a responsive e-commerce theme that was built using Modernizr.

Tammie Lister, designer at Logical Binary, told me why she uses Modernizr. “In simple terms, it’s because it’s a one-stop shop, and it lets me handroll per theme. It’s a shim, Respond.js and everything in one.” Tools like Modernizr make it much easier for WordPress theme designers to make use of HTML5 and CSS3, without sacrificing accessibility for people on older devices and browsers. And as with most things WordPress, there’s a plugin for it.

HTML5 Boilerplate has been around for more than a year now, but 2011 saw it spawn some of its own WordPress children. Bones and Roots are HTML5 starter themes that you can use as templates for your own HTML5 theme. The purpose of both is to make it as easy as possible for WordPress theme designers to get on board with HTML5 and CSS3.

Simplicity Is Beautiful: Goodbye Options-Fatigue

image
Life’s about to get much more Zen. (Image: Ricardo Panello)

Anyone in the habit of buying WordPress themes from one of the many theme shops has probably more than once experienced options-fatigue. This strikes a victim when, after installing a gorgeous WordPress theme, they encounter 16 tabs of options, giving them the power to change the color of the separator on widget #6, or choose a font for all h6 headings (all Google fonts, of course). At this point, the user has to switch off their monitor and go lie down in a dark room for a few days, fending off flashbacks of that moment when they accidentally paired Lobster with Terminal Dosis. You get the idea….

But seriously, theme designers and developers have been ramping up the options in their themes over the past few years, giving increasing choice until the user no longer has any idea what to do to make their theme look snazzy. Paul Andrew echoes this sentiment in the opening of “Free WordPress Themes: 2011 Edition, where he says:

Users expect all themes (including free ones) to have pages for admin options built in, where you can quickly set up your website and personalize it with a minimum of fuss. With the rise of these options pages, niche-specific theme designs (such as for portfolios, blogs or magazines) are no longer required and are, in fact, few and far between.

2012 will see theme options reach a critical point, as designers step back from providing every choice possible, focusing instead on offering the right choices. Here’s what Automattic’s theme wrangler, Ian Stewart, has to say:

The best WordPress themes should be like the best Apple software and hardware. Beautiful objects that “just work” when you turn them on. If you’ve ever gotten excited about an iPhone or an iPad, you know the feeling. The best WordPress theme design — and design in general — should be capturing that, and keeping things simple makes that goal so much easier to achieve.

This will be particularly important for commercial themes, as WooThemes recently acknowledged. When a user downloads a free theme, they expect to take some time setting it up. But with the huge choice of commercial themes out there, users who are prepared to pay for a theme will be far more discerning. The reason that users buy WordPress themes is because they can’t design for themselves. They need you, the WordPress designer, to make the important decisions for them, offering few options to help them make their websites look distinctive and to keep them from looking like their children designed them as part of a school project. 2012 will be a year of fewer options and increased usability in WordPress themes, and that can only be a good thing.

Simplicity Is Beautiful: Front-End Design

image
Life’s about to get much more Zen. (Image: Denis Hennessy)

As options get trimmed down, so will design elements on the front end, something of a change to previous years. To see how, look again at Smashing Magazine’s collections of 100 free WordPress themes. In 2011, for instance, many of the themes had a landing page that made use of a number of colors, with elements dispersed across the home page. A multitude of options allowed the user to decide how the theme would work. And minimalism, in every year, is almost universally white with black.

As options decline, decisions about how a theme looks shift from the user to the designer. Why, then, are theme designers now steering towards minimal? “I think the responsive design movement has a lot to do with the minimal trend,” says Mike McAllister, WordPress theme designer and founder of Okay Themes. “Minimal and responsive seem to just go hand in hand. The inevitable pairing down of a website to meet tablet and mobile platforms almost demands a sense of minimalism.”

Mike continues:

The paradigm is now shifting into themes that just look amazing out of the box. The emergence of some new talent in the WordPress field has a lot to do with it. Designer-developers are now cropping up, all with their own unique style. And it seems many of them are adopting the minimal approach, both for development and design.

This is no doubt a side-effect of WordPress’ popularity. Some great designers are producing gorgeous works-perfectly-out-of-the-box themes, like Briefed, which Cameron Moll produced for WooThemes in 2012. Designer and developer communities such as Dribbble and Forrst are full of inspirational WordPress theme designs; and since clean and minimal designs are still the rage these days, expect to see them a lot in WordPress themes.

If you’re still skeptical of simplicity and think that minimalism is for designers rather than users, just look at Orman Clark’s portfolio on ThemeForest and check out the sales figures of his minimalist themes.

The Rise of the Niche Theme

image
Allure Themes offers WordPress themes for women.

With the decline of theme options, we will see the rise of the niche, as people return to a desire for a theme to do just one thing well. When WordPress was small, it made sense for theme shops to produce themes to suit everyone. As WordPress grew, theme shops started to produce individualized themes, such as for restaurants or churches.

The correlation between the popularity of WordPress and the specificity of theme shops is not hard to spot. WordPress now powers around 16% of all websites, which is a pretty big market. This means that theme shops now need to do two things: differentiate themselves, and be content with just a piece of the rather large pie.

Unlike WordPress niches of the past, which concentrated on the “form” of websites (for example, portfolio, magazine, news), future niches will concentrate on the needs of specific groups of users. 2011 saw the launch of two notable theme shops that are showing the way for imitators. Theme Force specializes in websites for restaurants, while Allure Themes specializes in themes for women. Restaurant themes illustrate this well; everyone restaurant owner needs certain things: menu, Google Map, mobile version, maybe an events calendar. A dedicated theme shop gives users just what they need, done well, without all the fluff. Capturing a niche means being the best at that very specific thing.

2012 will see more niche themes from established theme shops, and no doubt more niche theme shops will spring up: churches, sports associations and teams, real estate, travel, retail, the arts, whatever. Find your niche and own it.

Smashing Special: A Three-Part Series

This series contains of three parts:

(al)

Siobhan McKeown is a big fan of words, and of WordPress, which works out pretty well since she runs Words for WP, the only copywriting service dedicated to WordPress service providers. You can find her on her personal blog, twitter and occasionally hanging out on G+.

  1. 1

    Simplified option pages and minimalist themes for sure. I think because of the increasing use of HTML5, CSS3 and jQuery designers and developers won’t have to rely so much on complicated, texture rich design elements.

    2
  2. 2

    Speaking of responsive design, can anyone explain why we have to load all 1.3+ megabytes worth of data on SmashingMagazine.com when viewing the site on a mobile browser?

    Change your User-Agent to a mobile one and check for this yourself in Firebug’s Network Tab.

    A mobile user is not going to see most of the Desktop elements anyway, so why make them load all the data? What is the solution for this?

    10
  3. 3

    “2012 will be a year of fewer options and increased usability in WordPress themes, and that can only be a good thing.” AMEN to that!

    QUOTE: But seriously, theme designers and developers have been ramping up the options in their themes over the past few years, giving increasing choice until the user no longer has any idea what to do to make their theme look snazzy. Paul Andrew echoes this sentiment in the opening of “Free WordPress Themes: 2011 Edition 21, where he says:

    Users expect all themes (including free ones) to have pages for admin options built in, where you can quickly set up your website and personalize it with a minimum of fuss. With the rise of these options pages, niche-specific theme designs (such as for portfolios, blogs or magazines) are no longer required and are, in fact, few and far between.

    END QUOTE

    Yes, leave the design to me, please! I love a good theme that offers options, but when they have their own admin panel for design, I feel they are stepping on my turf… :O) … I usually stare at the screen in a daze for a few seconds and wonder: “but why did they do this…” Handling the html and css myself is a great help down the road when the theme has been warped to bits and I need to modify something. There should be an option to include or exclude a theme admin panel, imho.

    Working on a site and customizing a theme for it “live” requires a lot of creative thinking and work, and mental fatigue sets in as I have to keep a relevant tension between immediate, secondary, tertiary, etc information – and move them around in my mind in a variety of configurations to gel things together. It’s like a highly fragmented hard-drive where information has to be gathered and reconstructed over greater distance because of dispersion of data and huge gaps between data belonging to the same files.

    It is my experience that one of the weakest feature has to be the image sliders, which require so many steps on various screens and options ticking, it’s not usually very intuitive. Lots of work needed there. Maybe WP theme designers have been catering to noobs while speaking developers jargon?

    One more thing that screams at me lately is that responsive design is another reality emerging from common sense, it informs our designs in order to cater to real needs. Building a website for desktop or laptop allows us to offer more content, extend the in-house interactive experience and keep visitors within our own building, so to speak.

    Designing for mobile seems to create a new dynamic as mobility browsing may be much more functionality-oriented. It is an invitation to decentralize, to streamline, and present a side of our business or organization that shows we understand interactivity, inter-dependency, networking, cross-pollination, and we accept to offer visitors tools that are obvious and simple to use. In a sense, our site becomes a device panel, rather than a comprehensive presentation of everything we stand for and offer.

    People use mobile for quick reference in time-sensitive situations, either triggered by a rational need for information or a response from passion which takes them on a treasure hunt for social connection or a product or service they have to get “now.” Info capsules, shopping, interaction, bridges to other connected products or services, communication – all these seem to frame the use of mobile, hence an effective design will create a virtual device to be used on those material devices.

    Thank you for content inspiring me to think this through a bit more thoroughly! Smashing!

    And sorry if it was a bit off-topic…

    Regards,

    Andre

    0
  4. 4

    Nice article it gave me something to think about in the year to come (2013).

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top