Deploying your site across Mobile and Tablet devices

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

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.


Device Classes

The system will  detect server-side what device is used to access a page and maps it to one of these device classes:

  • desktop
  • tablet
  • phone

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 300 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:

<ol start="1">
  <li><link rel="stylesheet" type="text/css" href="/css/&#123;system_visitorDeviceClass&#125;.css" />  </li>

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

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

  <ol start="1">
    <li><body class="&#123;system_visitorDeviceClass&#125;">  </li>

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:

<script type="text/javascript"> 
if ('&#123;system_visitorDeviceClass&#125;' == 'phone') {
			window.location = '<a target="_blank" rel="nofollow" href=";" onclick="s_objectID=';_1';return this.s_oc?this.s_oc(e):true">';</a>            }          

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:

<!-- &#123;system_visitorDeviceClass&#125; -->  
&#123;module_contentholder, name="home_&#123;system_visitorDeviceClass&#125;"} 

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:

  1. 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.
  2. Device class cookie, if set
  3. User agent string auto-detection and defined device classes capabilities
  4. Default content

Best practices

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