Deploying your site across Mobile and Tablet devices

Report · Mar 26, 2012

The mapping is done based on user agent strings and some internal rules. If the device cannot be determined by its user agent or it does not fall in any of the existing device classes, the default desktop device class will be used. The module {system_visitorDeviceClass} renders the device class value (e.g. phone) corresponding to the device used to browse the site. This module won't be counted against the 75 modules limit per page.

Device-specific styling

You may want to provide specific styling for certain devices, there are two options:

1. Including device-specific stylesheets as below:

<link rel="stylesheet" type="text/css" href="/css/{system_visitorDeviceClass}.css" />

This will include desktop.css, tablet.css or phone.css.

2. Include the tag as a class on your body tag

<body class="{system_visitorDeviceClass}">

Redirect visitors to a mobile site version

Using javascript, you could test for specific device class values and performs custom actions. For example, a site homepage could redirect phone visitors to a focused mobile website:

<head>
<script type="text/javascript">           
if ('{system_visitorDeviceClass}' == 'phone') {
        window.location = 'http://mysite.com/m/';           }        
</script>
</head>

Device-specific content

If you'd like to serve device-specific content as part of a template or page, you could achieve this by using the device classs as part of a content holder name as below:

<!-- {system_visitorDeviceClass} -->
{module_contentholder, name="home_{system_visitorDeviceClass}"}

The above snippet will include one of these content holders: home_desktop, home_tablet, home_phone

Technical details

Choosing what device class is used is done by the following criteria, in priority order:

URL query string parameter, if set (e.g. ?visitorDeviceClass=phone). This will also set a cookie with the specified value. ?visitorDeviceClass=auto will clear the cookie and enable again auto-detection.
device class cookie, if set
user agent string auto-detection and defined device classes capabilities
default content

Best practices

Here are some articles outlining best practices when building multiscreen sites:

Report · Jun 03, 2012

Mario,

Really learn a lot from your input. Thank you again for the help on htmlonlymenus. Got it working fine now.

Was curious after reading this tutorial about your mgtrain site that you showed me

http://mgtrain.businesscatalyst.com/Home.htm

Was curious if it displayed fine on an iPad in landscape and protrait mode, and it did perfect adjustments. But in inspecting the site with FireBug and Web Inspector I did not see any code that performed any of the above examples. How did you get it to display properly on an iPad without any system_visitorDeviceClass detetion, or can I just not see it with these tools?

rocky

Report · Jun 04, 2012

HI Rocky,

That site is one of those Online Business Builder templates and I guess it's just the way in which it's been coded. I guess you need to use fluid design to make the site look good on desktops as well as tablets.

Cheers,

-mario

Report · Jun 05, 2012

Mario,

I think you're right.

Rocky

Report · Jul 16, 2012

How does this work with ecommerce and catalogs, etc - ? 🙂

My boss setup Mobify but the BC platform keeps altering the code, even though its in a cdata tag - so we are trying to figure out the best alternative for a mobile site where our customers and distributors can place an order. Right now we are using responsive css but it doesnt render the "cart" part correctly...

Thanks,

Tom

Report · Jul 20, 2012

Mario - here is a question for you- If you redirect to a mobile site version from a site's home page, then want a link on the mobile version giving users the option to view the full site, how do you recommend linking back without the mobile detection kicking in again?

Report · Jul 20, 2012

Well your mobile redirection you should do based on a set cookie. So set the cookie first time around.

Replace the cookie with an overide value that you always check for when the site loads. IF that cookie exists then go to the full version.

Report · Jul 23, 2012

Thanks, Liam!

Report · Nov 27, 2012

Where can I find information on what Adobe uses to categorise the different devices? Is it done via pixel size and if so what are the breakpoints?

Report · Nov 27, 2012

Hi Shane,

Adobe says nothing about your device.

How BC handles device detection is shown above with the tag and Mario shows you how to use it.

But to do things with CSS you use Media queries.

Report · Nov 27, 2012

Hi Liam, Yes I did mean BC when I talking about Adobe.

I am trying to find out how they define the different 'devices' for which you then use the tags.

Report · Nov 27, 2012

User Agent

Report · Jan 31, 2014

Hi Liam,

Android tablets are not recognized properly. They appear as being a phone. Is there no difference between the user agent of Android phone and tablet? iOS is detected properly.

Regards, Dennis

Report · Dec 10, 2012

My colleague has a HTC Evo and it comes up as a Desktop device. How is BC determining whether a device is a phone?

Report · Jan 31, 2014

Hi,

i just tested all available Android tablet devices at Browser Stack, and each one shows the mobile (phone) version of my website, which is wrong. So your device detection fails when it comes to Android Tablets. iPad works fine (in any version).

Although I might have made a mistake, I believe that you definitely should check and fix your detection criteria when it comes to Android devices!