Creating device-aware sites

15/10/2009 09:28 by Runar Myklebust

Accessing a site could be done with a lot of different devices with different capabilities and needs. A site that looks great on your desktop might look like a hard-to-navigate disaster when accessed from a mobile phone. The new "Device Classification"-feature can help you cope with these challenges.

The "Device Classification" - feature will enable you to easily create device-aware sites that   will match the capabilities and needs of the recipient device.

As an example, we will show how to detect requests originating from mobile devices and then apply separate styles and behaviour. We will also show how the mobile users can be given the option to see the desktop version of the site.

  Three steps are necessarry to achieve this:

1.    Create and deploy a device-class resolver script
2.    Use the resolved device-class information in your templates to create different styling and behaviour
3.    Enable the user to override the resolved device class

 

1) The device classification script.

The device classification script should be an xsl-template which returns a string representing the device class. The script will be provided with an  XML containing fields from the HTTP-Request and the current user.

Create

In this example, will aim to differentiate between requests from mobiles and desktop-browsers.
The HTTP-Requests contains a field "user-agent" that contains information about the originating browser. A request originating from an iphone would typically have this user-agent:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Overviews of different user-agents could be found e.g. at http://www.user-agents.org/. The number of different agents could be overwhelming, but its quite easy to create patterns that will cover the majority of the cases.

We create a small template that matches the user-agent field for patterns covering the most common user-agents:

<?xml version="1.0" encoding="utf-8"?>
  <xsl:stylesheet exclude-result-prefixes="xs portal" version="2.0"
                  xmlns:portal="http://www.enonic.com/cms/xslt/portal" xmlns:xs="http://www.w3.org/2001/XMLSchema"
                  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output indent="no" media-type="text" method="text" omit-xml-declaration="yes"/>
    <xsl:template match="/">
      <xsl:variable name="userAgent" select="lower-case(/context/request/user-agent)"/>
      <xsl:choose>
        <xsl:when test="matches($userAgent, 'windows ce; ppc;|windows ce; smartphone;|
               windows ce; iemobile|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|
               elaine|iphone|android|opera mini|blackberry|up.browser|up.link|
               mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|
               pda|psp|treo')">
          <xsl:text>mobile</xsl:text>
        </xsl:when>
        <xsl:otherwise>
          <xsl:text>desktop</xsl:text>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:template>
  </xsl:stylesheet>

The HTTP-Requests user-agent field is fetched from the script input XML (see the Enonic CMS 4.4.0 documentation for detailed information about the script input). If the user-agent matches any of the patterns it will return the string "mobile", or else it will return "desktop". The result will be added to the default context and could be used in your templates.

Deploy

The script should be stored on your site as you would do with any resource. On a site's property-page, there is a section named "Device Classification" with a  "Classification script" file picker. Select your script to enable device classification.

Testing

To test different user-agents, its useful to be able to simulate different user-agents from your browser. The firefox "User Agent Switcher" - plugin is an example.

Its also worth noticing that the resolved device-class is cached throughout the HTTP-Session. When testing, the cache could be cleared by calling the HTTP-Service "portal - resetDeviceClass" or by re-saving the script.

2. Using the resolved device class

Its now possible to user the device-class field present in the default-context to apply different styles and behaviour in your templates. There are of course an unlimited ways to do this, but some obvious examples:

Loading different stylesheets depending on the device-class

Applying separate stylesheets depending on the device-class is easily achieved:

<xsl:variable name="deviceClass" select="/result/context/device-class"/>
<xsl:variable name="cssPath" select="concat('/_public/site/include/styles/', $deviceClass, '.css')"/> 
<link rel="stylesheet" href="{portal:createResourceUrl($cssPath)}" type="text/css"/>

Using conditional datasources

The device-class can be used in a conditional statement in a datasource. For instance, we can omit the execution of the "getRelatedContent" datasource if the device-class is "mobile":

 <datasource condition="${portal.deviceClass != 'mobile'}" result-element="full-info">
  <methodname>getRelatedContent</methodname>
   ..
   ..
 </datasource>

3. Overriding the resolved device class

Finally, the user should be able to override the resolved device-class and see the desktop-version of the site even if browsing from a mobile.

There are two HTTP-Services at your disposal to manipulate the device-class: "forceDeviceClass" and "resetDeviceClass". In our example, we will use the "forceDeviceClass"-function to create two links; "See full site" and "See mobile site":

 <a href="{portal:createServicesUrl('portal','forceDeviceClass', ('deviceclass', 'desktop', 'lifetime', 'session'))}">
  See full site
 </a>

 <a href="{portal:createServicesUrl('portal','forceDeviceClass', ('deviceclass', 'mobile', 'lifetime', 'session'))}">
  See mobile site
 </a>