WordPress Responsive Design Alternatives

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.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

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.

Tags: