Amongst the leaders of eCommerce, it is widely known that mobile devices are increasingly comprising a very large segment of web traffic, one which cannot be ignored. The eCommerce Quarterly by Monetate reports that tablets and smartphones accounted for > 21% of all eCommerce traffic in the US during the first half of 2013, compared to only 2% two years ago. These users need an experience designed for them. Something which allows them to get what they want when they want it, and without having to deal with the hassles (and emotional trauma) of wading through a cluttered desktop-centric design on a screen the size of one’s palm. Enter mobile friendly web design!
There are two widely accepted means of appealing to mobile device users: responsive design and targeted design (i.e. the practice of having an independent desktop and mobile site). There are many advantages to using responsive design. It also has its cons…targeted designs do as well, like generally being more difficult to maintain feature parity.
Ok, so you need a mobile site, and quick. You don’t want to rebrand, rebuild, or risk upsetting your existing desktop-centric design. Or maybe it’s something you need to plan for in next year’s budgets — and you decide to go for building a mobile site which will serve your mobile customers better without changing anything on the existing desktop-focused design you have already.
Implementing a mobile site on Magento doesn’t have to be hard, and Magento includes one out-of-the-box, which is also available on Connect.
Turning this on for mobile devices is pretty simple. Just don’t forget that you do still need to change the stock orange to something fitting for your brand…unless you just love orange, then you can keep it! You can set this up in the Magento admin by navigating to System -> Configuration -> Design and setting a “Design Exception” — I.e. you tell Magento what theme you want to apply for browsers with a User Agent string matching a given RegEx pattern. One commonly used pattern is this one:
iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini
Another common use would be to use the above, but with “Mobile” excluded from the list of matching User Agent strings so iPads will (as Apple suggests) still serve up the desktop theme.
Given this approach, and seeing how it’s so easy to have disparate features between the Mobile and Desktop versions of your site, it’s not uncommon to hear something like, “It’s simple and beautiful, but I can’t switch to the desktop view when I want to.”
The ability to switch to the desktop theme from a mobile device is unfortunately not supported by the native iPhone theme out-of-the-box. However, this is definitely possible and not really that hard to accomplish!
Since the site is actually running on the same URL and serving up a different theme based on the User Agent, the technique here is to utilize a cookie to override the design exception and prevent it from being applied. Having implemented a number of mobile sites, we put together a small module to allow adding this sort of behavior to the mobile theme, complete with support for the Enterprise Edition’s FPC.
The critical piece of functionality is as simple as this: rewrite the core/design_package model and override a method to check for a cookie before allowing the design exception to be applied:
class CLS_DesignSwitcher_Model_Core_Design_Package extends Mage_Core_Model_Design_Package
{
/**
* Get regex rules from config and check user-agent against them. We override to
* determine if the design exception should be ignored based on presence of a cookie.
*
* @param string $regexpsConfigPath
* @return mixed
* @see Mage_Core_Model_Design_Package
*/
protected function _checkUserAgentAgainstRegexps($regexpsConfigPath)
{
$ignoreException = null;
if (isset($_COOKIE[CLS_DesignSwitcher_Helper_Data::FULL_SITE_COOKIE])) {
$ignoreException = $_COOKIE[CLS_DesignSwitcher_Helper_Data::FULL_SITE_COOKIE];
}
return $ignoreException ? false : parent::_checkUserAgentAgainstRegexps($regexpsConfigPath);
}
}
I’ll not post the entire source here on the blog, but you can grab a copy from GitHub. There are complete instructions on how to use it in the included README file. Essentially though, all it takes is the installation of the small module, and inserting the following snippet into the footer of your site:
<a href="<?php echo Mage::helper('cls_designswitcher')->getMobileToDesktopUrl() ?>">View Desktop Site</a>
We are increasingly seeing a demand for responsive designs, but still get a lot of requests to simply build a separate mobile site as well, so I hope this will prove useful to some of you. Feedback, questions/comments are welcomed! Or if you have a mobile site (or responsive design) you need built, drop us a line via our contact page.