Short answer: No. You don’t need a separate mobile website.
Long answer involving cash: Not with a responsive theme and mobile website plugin upgrade. (Update: since writing this post, I discovered the Dynamik for Genesis website builder – it now eliminates the need for a mobile plugin.)
Numerous devices have flooded the market in different screen sizes from Phones to 7″ tablets to iPads to Laptops to Desktops to TV monitors. How in the world can your website expand and/or shrink down to accommodate them all?
Well, it usually can’t.
Websites were traditionally built using a standard width for desktop monitors, not mobile devices. Now that there are multiple screens, or ‘viewports’, designers are scrambling to find fixes for client sites: plugins, adjustments to the style sheet or sometimes a separate mobile website altogether.
Here’s what happens to websites on a phone-sized screen:
. .
.
As you can see, the mobile view of the site is breaking up and piling every element of the site on top of one another vertically.
What’s your site look like on a mobile device?
Short view: If you literally ‘grab’ the left side of your browser window (yeah, the one you’re looking at right now) and drag it to the right to make it smaller, (shrink the ‘viewport’) you can see what your site looks like on a mobile device or small tablet.
If your site theme is ‘responsive’, you’ll see what happens on a mobile-responsive site. If your site is not responsive, then your ‘full site’ will not shrink/pile down. Only a portion of it will be viewable until the user starts scrolling around. And because most mobile website users are looking for quick information – like your location, services, contact methods – scrolling is not their preferred method of viewing.
Fun tool: http://responsinator.com
The Fix: Responsive Theme, Header, Slider and a Pro Mobile Plugin to Control Menus
There are no perfect solutions for multiple devices yet. All browsers recognize and render style selectors differently. And WordPress doesn’t even have a set of standards that themes must meet to be included in the repository. But there are workarounds.
A responsive theme adjusts the sizing of your content, images, menus no matter what size screen your viewer is using. It literally responds to the viewers screen size. And while it does this pretty well, there are limitations:
- The header does not shrink well (fix: responsive header plugin)
- The top menu is squished and ends up in several rows (fix: Pro mobile plugin. UPDATE: Use Dynamik with Genesis).
- Anything contained in a table with specific widths will not shrink down (sorry).
- Images with specific widths assigned will not shrink. (fix: CSS)
- Rollovers do not function on touch-enabled devices. (Sorry, no fix for this.)
- Videos may or may not shrink down, depending on their source (fix: Pro mobile)
- A slider will generally not shrink down (fix: mobile responsive slider).
- Ajax functions or plugins may not be touch-enabled (some can be fixed with Pro mobile).
While responsive design isn’t critical yet, (about 10% of viewers are regularly using small mobile devices) these numbers will just increase over the next couple of years once the old folks realize they have the internet in their pocket.
Why not use a separate mobile website?
According to a recent post on Copyblogger
- Mobile responsive design is better for SEO: Google recommends this over a separate mobile site. Now that they are beginning to index .mobi and m.subdomain sites, the SEO penalties for content duplication become all too real.
- Mobile responsive design is easier to maintain: No need to make changes to 2 different websites.
- Mobile responsive design delivers a better reading experience: Because all you see is large black text on a white background.
- I would add: Some mobile browsers do not like page redirects. If your mobile website ‘redirects’ your regular homepage to the .mobi or m.subdomain, Opera & Safari may not honor the redirection.
Get more control over your mobile view
These are the resources I use to manage the many mobile website versions:
- Genesis framework
- Prose child theme or Dynamik
- Responsive Header plugin (Beta)
- WPTouch Pro (not necessary if using Dynamik)
- Royal Slider, Soliloquy, or Nivo slider
Bear in mind that in a year all these theme plugins and fixes will probably be hammered out – included in themes themselves. The premise is that everyone wants their website viewable on all devices.
