WordPress Responsive Design Alternatives

Mobile devices will become the most popular way to access the internet, which is why responsive WordPress themes are in high-demand.

Responsive designs share common elements:

  • Content is the same no matter the device’s screen size (WordPress posts and pages)
  • Style, coloring, branding, etc. are the same or substantially similar across devices (logos, images, color palettes)
  • Layout adapts to the screen’s size, with optionally specified minimum and/or maximum widths (usually using CSS3 media queries)
  • Throughout this article, these three words will be italicized for your convenience.

Some responsive WordPress themes have options for browser-targeted styling and other options, but that’s not really a new way to do things, and browser-specific targeting can be a pain to implement.

Responsive Design: desktop, tablet, and phone browser sizes

Alternatives to Responsive Design

Here are your choices when considering how to best serve your mobile visitors.

Static Width

Tried and true. Your site is 1200 pixels wide and that’s it. Mobile browsers like phones and tablets do a pretty good job fitting it all into the small screen width, and pinch-to-zoom works well for getting a bigger view. When pinching to zoom on responsive themes, the site’s layout changes as if it’s a new browser width to adapt to, just like resizing your desktop’s browser window. Static width sites just stay put and let you zoom in and out all around.

Static widths are the easiest to design for; they’re predictable. For users, though, sometimes they’re a pain (horizontal scroll bar anyone?). Photoshop themers have an easy time because the design ports over perfectly.

a ruler to measure with

Although it’s been “coming soon” for months already, Responsive Plugin says it’ll be able to convert a static theme into a responsive theme. If you have a static site and want to change to a responsive design without redoing your site’s code, that might be an option for you once it releases.

Separate Mobile Site

WPtouch example screenshot
WPtouch example screenshot

A separate mobile site is just that, separate. It’s content, style, and layout are all different from the desktop version. Technically, responsive design can have a completely different look and feel too, but I’m talking about user experiences, not the technicalities of how to best accomplish a certain design goal.

Separate mobile sites are great for user experience because they’re specifically designed for your phone or tablet. Mobile WordPress plugins like WPtouch and Onswipe are quick, easy, and free ways to have a dedicated mobile site for mobile phones (WPtouch) and tablets (Onswipe).

Other plugins exist to redirect mobile visitors to your URL of choice (like m.example.com or mobile-example.com) or even serve a mobile version of your site from Mobstac’s platform/bandwidth (yes, there’s a free version).

There are different ways to make a separate mobile site. The good news is that your site looks great and is pared down for mobile. The bad news is that your mobile site might not have much in common with your desktop site, which isn’t ideal for branding and user experiences. With a bit of customization and tweaking, a separate mobile site might be your preference, but you should really consider how the content and style relate to that of your desktop site.

Mobile App

In general, mobile apps deliver the best user experience for mobile and tablet users. Mobile apps can do things that websites cannot: provide information or functionality when offline, receive push notifications, provide additional statistics, and more. Mobile websites and even properly coded desktop sites (i.e. responsive) can provide a very similar level of user experience to mobile apps.

Apps cost more to create and modify, but if you already have an app or want one for a good reason, prompting mobile visitors to download it while visiting your website is an effective tactic. The simple mobile URL redirect plugin, linked to above, or a plugin that detects smart phone visitors separate from “dumb” phone visitors (phones without apps) could be used to serve up content specific to those users, inviting them to download your mobile app.

If you don’t have a specific need for an app, I’d recommend not getting one. But if you already have an app or are going to get one for a useful purpose, then encouraging mobile website visitors to download it is worthwhile. If someone follows a link to your site and you invite them to download your app and they choose not to, just make sure that it takes them to the link they followed, not your home page. That is a very poor user experience (and one of my pet peeves).

To choose or not to choose Responsive Design,
that is the question

Like anything, responsive design can be done well or poorly. Designing for mobile first helps keep page bloat down, increases site speed, and improves user experience. Anyone can create a website and pick a theme, but it takes more know-how and experience to design a website for mobile and create posts and pages with mobile first in mind, which is how you do responsive design well.

When done well, a responsive WordPress theme – or any of the alternatives – will have the desktop and mobile versions of the site very similar, if not the same, in styling. This helps extend branding to and reduces confusion of users who visit both versions. It will also display the most relevant content with the best possible layout, since mobile screens are smaller and content extends vertically quicker than on wider desktop monitors.

In addition to the user experience benefits, responsive WordPress themes are (usually) easier to maintain than separate mobile sites. Your site’s style is already implemented; you just have to make the layout “respond” to different screen sizes. Although it doesn’t compare responsive design, there’s a mobile website vs. mobile app infographic discussing this “development dilemma.” You’ll need to make your design decisions based on your expected audience, budget, and preferences.

At this time, all new websites I create are responsive unless the client has a good reason to choose a static width (typically with a dedicated mobile site or pushing an app to download). I like responsive websites because I hate horizontal scrolling, and I dislike zooming in and out on my small phone screen just to see what’s going on in different areas of a large static width site (kind of like reading graphic-heavy email on my phone, coded in HTML tables).

I would be equally pleased with a static width site that has a mobile theme without a different URL (like an “m.” subdomain). If you just have to have a separate mobile URL, I’d suggest adding some logic to detect non-mobile devices and redirecting them to the desktop version of that link.

Are you for or against responsive WordPress themes?

Credit: Ruler image from Scott Akerman via Flickr CC. Responsive image from Responsive theme on WordPress.org.

4 Responses

  • rbl
    Flash Drive

    > When pinching to zoom on responsive themes, the site’s layout changes

    This is incorrect. When you zoom in/out you’re just changing the scale of the viewport, not its size, and therefore this can’t happen (and has never happen to me working or testing dozens of responsive design themes).
    Can you provide an example of this behavior?

    As for the rest, I honestly don’t understand how developing a mobile app nor how a static width is an alternative to responsive design “to best serve your mobile visitors”, unless you are designing for 320 or 480px.
    Developing a mobile app is like buying a truck just to go to the supermarket and zooming in and out, swiping up, down and sideways all the time is hardly a comfortable way to browse a website and definitely not the way you want to read content. It is not in any way an alternative to responsive design.

    As for the Separate Site’s “content, style, and layout are all different from the desktop version”, again this is incorrect. Any of the ways you choose, either using a theme (which relies on a browser detection plugin) or a plugin like WP Touch Pro [which does both (theme and browser detection) on its own structure], you can define your content, style and layout to match exactly your desktop site. Layout is the only thing that might be different or not but I’ll address this bellow as you seem to have missed the point of responsive design and you’re confusing it with a fluid layout.

    Till responsive design we, web designers and developers, have created and developed multiple versions of the same website to serve to mobile users.
    Maintaining several concurrent themes plus the paraphernalia of tools used to serve them, updating all of them every time there was a change on the site, testing and tweaking each theme every time the phone software/os got an update is not only very expensive (not to mention boring, frustrating, hair pulling, etc) but it also never fully solved the situation, which was: “providing the best user experience possible” as there was a lot of compromising to accomodate for some phone models with different ratio displays, subpar browsers with html rendering issues, etc, but even more importantly, display orientation issues, as in many situations we were forcing the user to change the phone orientation to accomodate for how we have designed the site.

    Responsive web design changed all this. Responsive web design is just a series of tools and practices that, put together, allow you to provide the best user experience to your visitors, in whatever device they are using to browse your site.
    More importantly, it made possible to us, web designers and developers, to prepare our websites to (almost) all possible user scenarios, without all the burden of multiple themes, complex tools, etc.
    Whereas before when a user changed his ipad orientation from landscape to portrait the viewport scale would change rendering the text unreadable for example, now you can define anything from smaller margins to content reorganization (sidebar moves bellow content for example) to simply hiding the sidebar without changing the text size or affecting the user’s experience in any way.
    In fact, some clever designers/developers, use this to actually improve the user experience.

    I don’t understand why anyone should be for or against responsive design wordpress themes, as you can always disable the responsive features if you don’t want them, but as there seems to be some confusion from the author between responsive design (a practice) and fluid/liquid/elastic layouts (a product of design).

    The alternatives to having a responsive design theme are simply 1 – a combination of browser detection plugins and theme(s) and 2 – a full featured plugin that does all of this (like WPTouch for example).
    If you already have a website and you don’t want to change themes nor any of the above choices, then you can always mobilize it (read make it responsive) by adding the LESS framework to it for example.

    Developing an app only makes sense in a very small number of cases like forums for example.
    Would you download an app just to browse a website that just came up in as a search result?

    • New Recruit

      Ricardo, the article talks about alternatives. It states what responsive design is, and, at the end, I specify that I personally prefer designing responsive themes these days. By definition, if a responsive design is one option, then non-responsive design is an alternative. I didn’t say I think it’s better; I said it’s an alternative. Recently, Tom Ewer wrote that he prefers static width sites. I do not agree (I stated I don’t like horizontal scroll bars or pinch-to-zoom to navigate), but that’s his opinion. Obviously, you side with responsive design by stating, “…allow you to provide the best user experience.” To your statement of looking the same, yes, you can have substantially similar designs for separate mobile sites and sometimes even app designs, but if they were the exact same that’d be pointless, just serve up the regular site. As stated in the beginning of the article, responsive themes are becoming more popular. I expect this trend to continue, and I personally prefer to make responsive themes instead of static width or choosing another alternative. Sounds like you agree.
      Update: Addressing your question of pinch-to-zoom changing the layout on a responsive site, yes, my Android phone does this. However, my iPad does not.

  • Clifford,

    great article. I think, for now – and until wordpress core affords responsive code in its core, having a responsive child theme of a smart framework is a great way to go, especially considering the amount of smart phones out there and the percentage of users who use them to search the web – like me!

    This is easily done with frameworks like thesis and genesis and support for those is also readily available.

Comments are closed.