• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

The Obvious Argument in Favor of Responsive Design

October 5, 2011 by Sallie Goetsch Leave a Comment

Compared to designing a whole new mobile site, installing a mobile WordPress plugin is simple, and it did a good enough job for most sites and most phones…in 2008. Actually, for basic blogs, the standard mobile themes that come with plugins like WP Mobile Detector or Wapple Architect still do a perfectly good job, though they tend to lack branding elements. The popular WPTouch gives you something that looks like an iPhone app if you have the patience to configure it, and OnSwipe (formerly PadPressed) generates a tablet-oriented interface, though in fact an iPad displays most websites just fine as they are.

Using a plugin was (and is) appealing mainly because it’s easy and most of the mobile plugins are free. The experience you give your mobile visitors may not be ideal, but at least your site is accessible to the increasing numbers of people using their phones—or rather, those handheld computers that happen to also make cellular calls—to surf the Web. Naturally, however, anyone who could get a mobile site that looked like the desktop site without having to pay extra for it would want to do so.

That’s where responsive design comes in. With a little CSS magic, you (or your theme designer) can create a website that rearranges its columns and resizes its images to suit any screen its being viewed on. (The design “responds” to the device viewing  it.) The first theme I remember seeing that could do this was the Yoko theme. Then WordPress 3.2 came out and with it the new responsive default theme, Twenty Eleven. Shortly thereafter I attended Sara Cannon’s session on responsive design at WordCamp SF 2011.

In principle, responsive design seemed pretty straightforward, but I didn’t figure I’d be ready to go from listening to one lecture to creating a theme from scratch. There was no need for that, though, thanks to the magic of child themes: I could just create a child theme of Twenty Eleven and have the responsiveness taken care of, and that’s what I did, very shortly thereafter. Since I was simultaneously working on a project for a client where I was using a mobile plugin, I had an immediate opportunity to take some comparison screenshots.

CBI Screenshot 11-3-2011

Blog-iPhone CBI Page iPhone

The examples above come from a Genesis site using the Lifestyle (blue) child theme, rendered with the WP Mobile Detector plugin. The mobile theme color happens to be close to the blue of the desktop theme, but the display doesn’t look much like the site, and instead of showing the home page content, the mobile site defaults to the blog page.

Tellus WP Site 10-3-11

Tellus menu-iPhone Tellus screen 2

These are screenshots of a site created as a child theme of Twenty Eleven. I should probably have spent some time tinkering with the way the menu behaved in the iPhone layout, but otherwise, you can see that the header image and site colors are preserved, the text is a good readable size, and the search box is usable. (The sidebar appears below the main content column in the iPhone layout, and also in the iPad layout, which otherwise looks more like the desktop version.)

We’ll have more on the function problems with the mobile plugin and the Genesis site in the next post, but for now it’s enough to say that the visual difference between the two sites is obvious. Also, of course, you get to run one less plugin.

There are trade-offs with responsive design that might make you consider creating a completely separate stylesheet for smaller screens. For one thing, the on-the-fly resizing of images means that the site eats up just as much bandwidth (those expensive data plans!) as the desktop site would. For another, designing elements to stretch and stack means that you can’t engage in pixel-perfect positioning of your elements. That’s going to make certain really dramatic designs impossible.

In many cases, however, the trade-offs will be worth it, and new responsive themes for WordPress (both free and premium) appear every day.

Related Items

  • photo: man and woman holding smartphones
    WPtouch, WordPress MobilePack, and WordPress Mobile Edition
  • How to Configure Your WordPress Site for Mobile Devices (in One Minute)
  • It’s WordPress Plugin Developer Donation Day!

Share this post:

Share on Twitter Share on Facebook Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Mobile-Friendly Websites

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact