Adopting A Responsive WordPress Theme Is More Than Install-And-Go

Advertisement

As iOS, Android, and Windows 8 take the Web to smaller screens, designers are adopting techniques to make their websites usable on handheld devices.

Responsive Web designs present different formatting and layout to suit the device on which their pages are displayed. Browsers choose the appropriate styles on page load, freeing website owners from having to maintain different sets of pages for different display scenarios.

Adopting A Responsive WordPress Theme Is More Than Install-And-Go1

The most common responsive method is to use CSS media queries to serve different style sheets (or parts of style sheets) based on the number of pixels available. Most often, this is applied to handheld devices such as smartphones, but it could be applied to 13-inch laptops, 30-inch TVs or Kindle-sized readers. Responsive designs respond to their environment.

No Shortage Of Quick Fixes

The term “responsive design” is only two years old, but website owners can choose today from many mobile and widescreen themes for popular content management systems. Third-party developers have created paid and free themes that adapt based on browser width for WordPress, Drupal, Joomla and ExpressionEngine. At the time of this writing there are:

Designers handy with CSS can also find a few6 do7-it8-yourself9 frameworks10. But responsive themes are as varied as the problems they are meant to solve. Not all are created with the same technique, features or attention to detail. Aesthetics aside, how should someone choose a theme?

How Do Responsive Themes Perform?

Large themes cause delays for both the Web server and the end user. Servers require more time to fetch each additional file, and the milliseconds add up. For users, though, sluggishness comes from the number of kilobytes total, not just the number of files.

Aside from using media queries, many themes use variations of techniques to respond to browsers. I’ve tested 40 responsive themes on WordPress.com11, comparing them to the stock Twenty Eleven12 and Twenty Ten13 themes.

Chart comparing kilobytes to files used for responsive themes.
The weight of each theme and supporting files in kilobytes.

The chart above shows that:

  • The number of files that a theme loads and the theme’s weight in kilobytes have no direct relationship;
  • With few exceptions, most themes make 25 requests or fewer;
  • WordPress’ stock themes perform very well, but a few other themes provide responsive capability and better performance.

Bear in mind that these are empty themes, measured before any content or modifications have increased their load. Because data costs money for people who are accessing the Web through cellular networks, themes that require fewer downloads per page load are more likely to earn repeat visits. Of the themes sampled:

  • Only one theme did not use CSS media queries. This theme’s unusual method was to detect page width with jQuery and then change the body class, which in turn would change the layout with animated transitions. The extra time taken to load and implement JavaScript compromised the goal of responsiveness.
  • More than half had three break points: mobile (480 pixels or less), medium (481 to 1024 pixels) and wide (1025 pixels or more). The medium-sized layouts were most often measured with percentages, ems or min- and max-width, rather than strictly by number of pixels.
  • Left-to-right layouts on wide screens always became top-to-bottom layouts on mobile. That is, the left-most column in a widescreen layout would always appear at the top of the page in a mobile layout, regardless of its width or the type of content. Likewise, right-hand columns would become footers in mobile layouts. This means that the content in your left-most column should not discourage users from scrolling down when it’s formatted for mobile devices.
  • All mobile designs had 10 to 20 pixels of horizontal margin. None deliberately allowed horizontal scrolling or used app-simulating frameworks such as jQuery Mobile.
  • None provided in-page navigation.
  • Two themes used select lists for navigation in their mobile layouts. None used multi-level navigation.
  • Loading a page with three paragraphs of placeholder text, the themes averaged 306.57 KB per page load and 25.4 resources retrieved (including images, CSS files, JavaScript files and the like).
  • The lightest theme weighed only 57.11 KB before the content itself (text and images) loaded. The largest weighed 1382.4 KB before the content loaded.

Remember that screen width does not necessarily equal browser width. Most themes are not built on the assumption that users will have their browser windows open as big as possible; rather, their layouts are designed for screen widths well under common sizes.

Chart comparing common screen sizes to frequently-used web layouts.
Most themes are well under the most common screen widths. The wider the screen, the less likely a user will expand their browser to fill it.

As seen in the graph above, most themes will use max-width media queries to resize layouts when browsers reach 1280, 800, 767 and 480 pixels wide. But most screens surveyed by Lifehacker14, StatCounter15 and W3 Counter16 start at 1280 pixels wide.

Picking A Theme That Reflects Your Priorities

Making a website responsive is more than about varying the number of columns on a page. The same critical questions emerge for all mobile-friendly websites, regardless of CMS.

  • Does the project merit a mobile layout?
    Increasingly, the answer is yes. But the march towards mobile doesn’t mean that every website should follow suit. Pages that contain complicated tables, multi-month calendars, detailed images, complex navigation and other content unsuitable for small screens could negate any benefit offered by responsive designs. “Can I?” and “should I?” are two different questions.
  • Would the website benefit from mobile-first thinking?
    Designing a website to be mobile forces the content editors to answer hard questions. A screen measuring 320 pixels wide has no room for excess. This brings the design into focus, forcing you to eliminate distractions from whatever the website is meant to convey.
  • How many steps do we need?
    Responsively designed websites often rely on the width of the device on which they’re being viewed. But there’s more to it than asking “Mobile or not?” Responsive designs must address not only how a website handles on narrow screens, but also when wide becomes too wide. But a better option would be to consider using a device-agnostic approach to Web design17 focusing on content rather than device properties.
  • How do the layout and formatting change?
    Deciding which elements on a given page users should see first, second and third will affect how the widescreen layout functions. For example, the font in headings in the widescreen layouts could be three, four or five times larger than the body copy, whereas giant headings are cumbersome on tiny screens.
  • What should a mobile page not show?
    Multiple columns encourage a hierarchy of information: primary content that is unique to each page, and secondary content (often relegated to sidebars) that appears on more than one page. But mobile design makes multiple columns difficult to pull off. If the secondary content is unnecessary, how should it disappear? If it’s important, how does one design it without letting pages run longer than users are willing to scroll? (A good rule of thumb is that if an element does not support the page’s title, then it is not primary content.)

Think Beyond The Theme

Having a responsive theme does not guarantee a good mobile user experience.

Designing for mobile is not just about cutting material, but also about planning for limited attention. By nature of the medium, mobile users absorb information in limited chunks. Long pages can work if they’re divided into phone screen-sized sections. Unlike widescreen users, mobile users are more inclined to scroll down “below the fold” (i.e. below what they first see when the page loads).

Consider higher-contrast colors for mobile — particularly, the contrast between the body text and the background — for improved legibility outdoors.

Extensive navigation bars with sublevels and sub-sublevels are impractical on mobile devices. Offering search functionality, creating pages dedicated to navigation, and flattening the website’s structure are common solutions; anything that reduces the number of taps between pages helps.

When To Consider A Separate Mobile Website

Responsive designs do more than make a website work well on a variety of screen sizes; they also force the owner to make their website easier, more focused and faster. But they’re a tool, not a requirement. Adaptive layouts and media queries aren’t always the best answer for mobile design problems. When big content simply doesn’t fit on small screens, maintaining a supplemental website would outweigh the benefit of having one website that serves many audiences. The key is to create a companion website that carries essential information organized for mobile use — and then find out what mobile users are missing.

Your website could warrant a separate mobile version if:

  • You find yourself creating duplicate pages for mobile users on the same website;
  • Short pages that look great on mobile phones don’t take advantage of large screens;
  • You plan to phase out the widescreen layout in favor of a more streamlined user experience.

Other Resources

You may be interested in the following articles and related resources:

  • Mobile First18, Luke Wroblewski
    This book by the former Yahoo designer discusses the reasons why thinking small from the start makes more sense than cramming later.
  • Supporting Multiple Screens19,” Android Developers
    Google’s overview of screen sizes, pixel density, and how (and why) to achieve density dependence.
  • Platform Characteristics20,” iOS Developer Library
    Apple’s guidelines on graphics and presentation for apps and Web content for iOS.
  • Responsive Web Design21,” Ethan Marcotte
    This article examines the benefits of, and the mental shift required for, Web designs that respond to the user’s browser.
  • Chrome Developer Tools: Network Panel22,” Google Developers
    Shows how to activate and use the inspector in Chrome. It also works for most Webkit-based browsers.
  • Screen Resolution ≠ Browser Window23,” Chris Coyier
    An explanation of how screen width is a deceptive metric, and what you can do about it.
  • jQuery Mobile24
    A framework that simulates app behaviors with JavaScript, CSS and HTML5.
  • Less Framework25
    A straightforward desktop-to-mobile CSS grid, with four specific steps.
  • Whiteboard Framework for WordPress26
    A barebones theme that serves as a starting point for design, rather than a finished product to be tweaked.
  • Omega27, Drupal theme
    “The Omega Drupal 7 base theme is a highly configurable HTML5/960 grid base theme that is 100% configurable.”

(al) (jc)

↑ Back to topShare on Twitter

Ben Gremillion is a Web designer who solves communication problems with better design.

  1. 1

    Responsive themes are highly recommended in the current scenario. When designing a theme for a client, one big problem is the clients expectation to have the same appearance across all browsers. If you skip one element in a smaller screen, they often complain about the “bug”. Let us hope people will become more aware about the purpose and behaviour of responsive websites.

    12
    • 2

      An important part of our job as developers and designers is to educate our clients about the decisions we make during our process.

      5
    • 3

      Agree with Pritam. And, when designing a the-client-is-paying-for-a-CMS website, one often has to design and code in such a way as to make allowances for unknown content… …There’s not content strategy – they just want a website that works on all devices. This often means taking the “adaptive” rather than 100% “responsive” approach – using set, common breakpoints and fixed-width dimensions (set in pixels). Until such time as paying clients understand the concept in full, we do what we can for as much as the budget allows…

      1
    • 5

      There’s definitely a fair amount of education to be done in terms of helping clients understand where things are going with responsive themes – but as long as you know that going in (and make your plans on how to present a responsive site accordingly), they’re generally receptive.

      Great post!

      1
  2. 6

    Great article Ben! Good research!
    Altough ‘responsive’ is the way to go in most scenarios, it’s important to consider if we really should go with it or if we should consider a separate mobile website, as you pointed out. I see a lot of premium themes ‘selling’ the responsive feature out loud, like it would solve all cross platform design issues, but there are still a lot of websites that should go with a different version.

    6
  3. 7

    Am I missing something? Where is the link to your test results? I only see links back to the theme repositories. I’d like to see the data behind your charts, as I’m currently investigating themes for a WordPress update. Which of the 40 themes had the best performance? Which would you recommend for performance, customization, and responsiveness? That may be beyond your article’s scope, but it would be helpful.

    6
    • 8

      Not really beyond the scope. They tested and it would be handy to have.

      It would probably be too “dangerous” however; airing authors dirty laundry that purchasers may not be aware of! Way too unsafe for smashing.

      2
  4. 10

    Thanks for this useful survey. I appreciate that separate mobile sites are still part of the discussion. One point you missed there (and one that I think is still relevant) is the opportunity to optimize image file sizes to improve download times on mobile devices still running on a cellular network. Of course, as LTE rolls out this is less of an issue.

    -3
  5. 11

    Is it possible to see the raw data for the comparison made for the responsive themes?

    6
  6. 12

    You can download the raw stats at http://benthinkin.net/downloads/responsive-wp-resolutions.txt and http://benthinkin.net/downloads/responsive-wp-theme-stats.pdf. I collected the data by loading themes into a local copy of WordPress 3.3.2, clearing my cache between loads, and checking each theme’s default home page in Safari’s Webkit inspector. I verified the first half-dozen in Chrome, but the results always came out the same.

    1
  7. 13

    The really challenge in developing a responsive theme is on the matter of UX. Where to get in the middle of what people need. The simpler way AFAIC is to develop a clean, minimal, one column theme. That ought to work …

    -2
  8. 14

    How about DPI (or PPI as some fruit company stated to call :) )?

    The question is if different devices uses different displays with not equal pixel density, and media queries expressly uses pixels for breaking point, doesn’t this break the point of having truly responsive designs?

    If a few years later smart phones would start to use full HD for 4″ displays, won’t this end up serving mobile users design intended for 30″ flat screen?

    Why aren’t we using em’s as a breaking pionts?

    If DPI increases, screens the only thing that stays the same (and is adjustable by the user) should be that 1 em is always equal to the best readable font size (in real word a.k.a centimeters/inches) by the user…

    7
    • 15

      Good questions. I use pixel widths in layout and ems in my typography because… that’s the method to which I’ve grown accustomed. Weak sauce, but it keeps me cooking.

      Pixels are how we measure digital layout. How many ems wide is an iPhone, a 21″ Dell, or those new retina MacBooks? That argument become less valid if we design for content first, devices second. (What’s the ideal number of characters per line? The ideal size between headings? Optimal leading for consistent baselines?) But the thinking I see behind most themes is screen-first.

      Still, you make a good point. When one “pixel” contains four, we as designers should see change is coming. Ems for layout? Go for it. I’ll try percentages, and we’ll compare notes.

      Has anyone researched em spaces based on fonts loaded from FontSquirrel or Typekit?

      3
  9. 16

    Anyone else bothered by the first image of the horizontal phone in this article?

    5
  10. 17

    Nice research, Ben. I’m currently researching responsive themes for my WordPress site. Until I select one I’m using the free WPtouch plug-in to handle the small screens, while the regular theme works pretty well on 10-inch tablets. This obviously won’t work in situations where you have a client that expects a branded experience on all devices, but is an acceptable interim solution for sites like mine, which is essentially a blog, resume, and work portfolio.

    0
  11. 18

    Good info, thanks

    0
  12. 19

    Hello guys,

    We have this awesome project and brilliant idea, so why not give it a look? http://igg.me/p/275764?a=991934

    It’s an app to create themes for WordPress and we just need to promote this link to raise the money we need to get this started. If you feel like sharing the link above, please do so!

    Best Regards,
    Dorian

    0
  13. 20

    Akhtar @ responsivewpthemes.org

    June 13, 2013 4:31 am

    This post isvinteresting. As per my knowledge in responsive web design content selection is very important because your main content should show in all devices clearly.

    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