Deploying your site across Mobile and Tablet devices

created by mario_gudelj on Mar 26, 2012 11:15 PM, last modified by mario_gudelj on Nov 23, 2012 1:29 PM
Version 3

    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.

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

    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: