Copy link to clipboard
Copied
In this tutorial, you will learn how to use device classes to setup device specific CSS, provide device specific content or redirect users to another URL based on what device the customer is using to view the website. This allows you to produce different user experiences on different devices.
This tutorial requires a general understanding of CSS and JavaScript, for details on creating and customizing site wide templates for specific devices, see this article.
The system will detect server-side what device is used to access a page and maps it to one of these device classes:
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.
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}">
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>
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
Choosing what device class is used is done by the following criteria, in priority order:
Here are some articles outlining best practices when building multiscreen sites:
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Mario,
I think you're right.
Rocky
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Thanks, Liam!
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
User Agent
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
My colleague has a HTC Evo and it comes up as a Desktop device. How is BC determining whether a device is a phone?
Copy link to clipboard
Copied
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!
Regards, Dennis