With mobile internet browsing set to overtake traditional desktop internet usage as early as 2014, according to research reported by the Smart Insights marketing team, having a website that displays appropriately in a mobile environment is becoming less of a luxury for today’s businesses and more of a “must have.”
And when it comes to creating and releasing a mobile-optimized version of your site’s content, you have a number of different choices. You can:
- Create a separate mobile version of your site that resides on your “m.domain.com”
- Use a plugin to automatically create a mobile version of your site on-the-fly
- Develop and release a mobile app that contains the same information as your website
- Utilize a responsive web design template that resizes based on a number of different criteria.
Let’s look at each of these options in more depth…
Separate Mobile Site Versions
Launching separate versions of your website entails building two separate copies of your website – one that lives on your main URL and one that’s triggered to display on your “m.domain.com” subdomain whenever your site detects that it’s being displayed on a mobile browser. Unfortunately, there are two major issues with this approach:
- Separate site versions only allows you to create one mobile site version, which won’t do you a bit of good when it comes to accommodating the huge variety of different digital devices in use today. Say you design your mobile site version to look good on the iPhone 5. That’s great for some users, but doing so runs the real risk of alienating users on tablets or smartphones with different screen sizes.
- Developing site versions across multiple URLs isn’t ideal from an SEO standpoint. Bing has clearly come out in favor of single URL solutions and while Google’s been more circumspect on the issue, it’s easy to see how optimizing one site version is less hassle and represents fewer opportunities for errors than optimizing multiple site versions.
Mobile Site Plugins
Since mobile site versions don’t represent a great option, what about mobile site plugins? Tools like “WP Touch” are freely available and take much of the hassle out of mobile site creation, as they allow you to install a simple piece of software and automatically trigger mobile site versions that display correctly in a number of different environments.
From an SEO perspective, this is a much stronger alternative than creating separate sites to accommodate mobile devices. However, there’s one key weakness that you need to take into account with mobile site plugins – the loss of important branding elements.
Take a look at the following banner from the WP Touch Pro homepage:
Though the desktop is well-designed and well-branded with distinctive fonts and color schemes, the mobile interface loses all of this visual appeal. While WPTouch and similar tools do offer the ability to control some visual elements, they don’t come close to replicating your desktop site – causing your company to lose out on the power a well-branded web presence has to offer.
Mobile App Development
So, if displaying your desktop website’s content correctly in a mobile environment is so tricky, why not skip the process altogether and just release your site’s information through a mobile app?
Well, not so fast… An October 2012 study conducted by the Pew Research Center discovered that 60% of web users would rather read news on their mobile browsers, rather than through website apps:
Though the study addressed the consumption of news media only, it’s safe to say that – given this demonstrated preference for reading text through mobile browsers – mobile apps should never be considered a true replacement for mobile website versions.
Responsive Website Design
The final option – and the one that most web users and SEOs prefer – when it comes to mobile website creation is something known as “responsive website design.”
Essentially, a responsive website design is one site design that automatically changes its display parameters, based on the type of device displaying the site. If a website visitor lands on the site using a desktop computer, the site design displays at full width. But if the site detects that it’s being displayed on a mobile device, it automatically aligns itself to display correctly within the new browser.
This occurs because of the presence of two important pieces of technology: the fluid grid and CSS3 media queries.
While many sites are designed on a fixed-pixel basis – meaning that the design is a set width that won’t change no matter where it’s displayed – responsive site designs utilize a “fluid grid.” Fluid grids represent an advancement on past liquid layout designs, in that they’re designed to proportions, rather than arbitrary percentages. When fluid grids are used, your website’s design automatically resizes according to the proportionate change in screen resolutions.
Of course, proportions can only take you so far. If your website uses a 3-column layout, resizing your site design down to a 300-pixel mobile browser screen will result in a pretty cramped design!
That’s where CSS3 media queries come in. In particular, responsive website designs make use of the min-width media query, which allows websites to conditionally serve up different CSS sets based on the detected size of the browser. As an example, queries might be set to trigger different CSS rules when it detects browsers below 320px, 480px, 600px, 768px, 900px or 1,200px – accounting for most of the different screen sizes available on today’s desktop and mobile devices.
Following with our earlier 3-column layout example, combining the liquid grid with media queries enables designers to set a “break down” point, where the style of the website changes dramatically. Instead of resizing the 3-column layout to any different screen size, media queries enable designers to switch to a single column layout as soon as it’s determined that the design is no longer displaying correctly.
And – best of all – because all of this happens from within a single site design, there are none of the SEO concerns that would otherwise arise from displaying these different versions on separate website subdomains!
Responsive website design isn’t a perfect solution, but it’s the best we’ve got right now. According to Jeffrey Veen, author of “The Art and Science of Web Design”:
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
To create a responsive website version, you have two different options. You can:
- Change over to a pre-built responsive theme (which are widely available through services like ThemeForest), or
- Hire a web developer to create a responsive version of your current site.
Switching over to a responsive theme is the cheaper alternative, but it may mean losing some of the branding elements found in your current site design (as replacing your theme or template involves modifying an entirely new design from scratch). If you aren’t committed to your current site design, this could be a great approach to keep costs down while still accommodating mobile website users.
On the other hand, while hiring a web developer to custom-code your new responsive website version might be more expensive, the costs are often worth it in order to save on development headaches and preserve the website branding you’ve worked so hard to create.
Really, it doesn’t matter which of these two responsive site design options you choose – as long as you make a choice! Mobile website browsing and responsive website design are the way of the future. Don’t risk losing your site’s mobile visitors because you’re hesitant to pull the trigger on this powerful type of technology!
Image: MattsMacintosh
