WordPress for Mobile

I’m going to walk through the options from the simplest and lowest cost to most complex and expensive.

1.) Do Nothing

AKA: Mobile Experience is the same as the Browser Experience

Most modern smartphone browsers (e.g. Safari for the iPhone or Chrome for the Androids) render websites on their tiny screens just as your laptop or desktop screen would–but tinier. Things should, ideally, line up the same, work the same (except for e.g. no Flash on iPhones) and your user will have a familiar experience as they’ve seen the same on their browsers.

Pros: low cost (free!), consistent user experience from browser to mobile
Cons: might have tiny type and un-thumb-clickable buttons and links

2.) Plugins

Third-party plugins that are not related to your theme are an easy-to-install option with varying levels of options … and success. There are several plugin choices (Marty Wall of Likoma reviews a few) from free to premium. They can give the user a very friendly and easy-to-use interface to find, read, and even interact with content. What you give up, usually, is any sort of design or branding.

Even WordPress’s own Jetpack has a new Mobile Theme module. I’m a fan of “core” services as they tend to work best with the heart of the software. They’re “built by the manufacturer” (like air conditioning installed in the factory as compared to after-market). You know WordPress is going to keep updating, fixing, and improving the product. If you tweak your theme’s design and code too much, you can often break the core functions of a mobile theme–just as you can break core functions of the non-mobile site. Speaking of core, I’m not even certain if this is considered a separate plugin or if it works more as a responsive theme. Maybe that vagueness is a good thing: who cares really how it works as long as it works.

Another bonus of some of these plugins is that you can choose what you’d like the mobile visitor to see. If you think they really just view your site on their phones when they want to call you (say you’re a realtor or a contractor), your mobile version plugin could list the basics of contact information. Keep in mind that with this option, you can have a link at the bottom of the page that says View Full Site and then they’ll be taken to a browser experience.

Pros: low cost, easy to install, use, and manage; relatively good user experience as far as consuming content
Cons: lose branding, design, character; can get wonky if you’ve tweaked your theme too much; you’ll probably lose some “bells and whistles” of your fancy design

3.) Responsive Design (Themes)

Responsive design is a design technique such that the design adapts–or responds–to its environment. It recognizes that a visitor is viewing from a tiny screen, it will squeeze and move and adjust to (try to) provide the optimal viewing experience.

In my experience, if you don’t tweak your theme, these responsive themes can work well. You are, however, at the mercy of the theme designers as to how things work. For example, what happens to the menu (navigation) on a small screen? Does it turn into a little toggle switch that flies out as a menu? Does it turn into a little button? Does it just shrink? Can you choose what it does? What if you have a complex menu with an overload of options? How cumbersome might that be for your visitors?

Pros: usually cost built into the theme (free or premium); browser code same as mobile code: nothing to tweak;
Cons: if you change the code or design of your theme too much, you might “break” the responsiveness of the theme; not all elements of site are always responsive (e.g. columns, buttons, forms, etc.)

4.) Separate Mobile Site

You’ve certainly come across these sites. You often notice because your browser goes to a new domain, usually with an “m” in front of it (e.g. m.thedomain.com). These sites are usually a completely separate file structure that load when the browser detects a mobile device. They make for optimal user experience as, hey, that’s what it was built for.

In my opinion, this is only worth it if your audience “needs” it. If, for example, you have a restaurant, the bulk of your mobile traffic probably just wants to see a menu, order online, call you or find you. Your mobile site might address those needs. Remember, some of the plugins (e.g. WP Touch) can be configured with this goal in mind as well.

Pros: optimized for the user; full control of content and design
Cons: maybe two sets of files to update and maintain; cost of building out a completely new site and design

There you have it. I’m curious to see where this goes as we’re on the cusp of it all. Mobile it just dominating growth, so we have to make this work. My forecast is the responsive design will get smarter and better and it will just be baked in. We won’t notice or care it’s there, it will just work. Sort of like the answer to Which version of Chrome am I using? The answer, “I don’t care. It just works and it updates itself in the background.” Which is also what your website design will ideally do … someday.