CMS Made Simple Mobile Detection

CMS Made Simple Beyond The Basics – Mobile Performance

It is predicted that Internet traffic originating from mobile devices will overcome traffic from desktop computers during 2014 (Microsoft Tag, 2012).  Is your CMS Made Simple powered site mobile ready?

Using a mobile device

Using CMS Made Simple’s powerful Smarty Template Engine, you can easily detect when a mobile device or desktop computer is loading your website.

This tutorial will show you how to set up mobile detection in your Layout Templates without having to write a User Defined Tag or install additional modules. This tutorial does require the plugin called, “Contains Modifier” and can be found here, http://dev.cmsmadesimple.org/projects/containsplugin. It should be uploaded into the /plugins/ directory of your CMS Made Simple installation.

CMS Made Simple File Manager

When you have the Contains Modifier uploaded to your server, we can start building our mobile device detection code.

The mobile detection code will look at a web browser’s “user-agent string” to determine if the visitor is using a mobile device. A user-agent string is identifying information passed to a web server from a web browser. It provides the browser’s name, version, the rendering engine, the operating system, and more.

Example:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
You can see your user-agent string by visiting, http://whatsmyua.com/.

First Step:
Go to Layout and then Templates in the CMS Made Simple Admin Console and edit an existing template or create a new one.

Second Step:
Enter the following at the very beginning of your template as the first character:

{assign var=UA value=$smarty.server.HTTP_USER_AGENT|lower scope=global}

This assigns a variable to hold the browser’s user-agent string detected by the web server. To simplify our code, it uses the |lower modifier to store the text as lower case.

Third Step:
The next small piece of code will test if the variable, $UA, contains any known mobile device keywords. For example, {if $UA|contains:’mobile’} will test TRUE if the user-agent string contains the word, “mobile.”

Place the following after the code provided in the Second Step:

{if $UA|contains:"mobi" or $UA|contains:"mini" or $UA|contains:"mobile" or $UA|contains:"tablet" or $UA|contains:"iemobile" or $UA|contains:"android" or $UA|contains:"fennec" or $UA|contains:"iphone" or $UA|contains:"ipad" or $UA|contains:"ipod" or $UA|contains:"acer" or $UA|contains:"asus" or $UA|contains:"blackberry" or $UA|contains:"htc" or $UA|contains:"motorola" or $UA|contains:"windows phone" or $UA|contains:"opera mini" or $UA|contains:"kindle" or $UA|contains:"smartphone" or $UA|contains:"400x240" or $UA|contains:"samsung"}

Fourth Step:
If a mobile device is detected, we want to assign a value to a variable that we can use in our template to present alternative content or layout. Therefore, we need to assign a variable if a mobile device is detected. This should follow the code from Step Three:

{assign var='mobi' value='TRUE' scope='global'}

Now, when a mobile device is detected, a variable called, $mobi will be assigned the value, “TRUE”.

Fifth Step:
If a mobile device is not detected we shouldn’t assume it is a desktop device unless we test for that. This is because the search engine bots that are used to index web pages also have user-agent strings and we don’t want to incorrectly identify a bot as a desktop browser. Therefore, if one of our mobile keywords were not found, we will set the variable as ‘FALSE’.

Use the following ‘else’ statement and close the ‘if’ statement:

{else}{assign var='mobi' value='FALSE' scope='global'} {/if}

The entire snippet of code should look like:

{assign var='UA' value=$smarty.server.HTTP_USER_AGENT|lower scope='global'}{if $UA|contains:"mobi" or $UA|contains:"mini" or $UA|contains:"mobile" or $UA|contains:"tablet" or $UA|contains:"iemobile" or $UA|contains:"android" or $UA|contains:"fennec" or $UA|contains:"iphone" or $UA|contains:"ipad" or $UA|contains:"ipod" or $UA|contains:"acer" or $UA|contains:"asus" or $UA|contains:"blackberry" or $UA|contains:"htc" or $UA|contains:"motorola" or $UA|contains:"windows phone" or $UA|contains:"opera mini" or $UA|contains:"kindle" or $UA|contains:"smartphone" or $UA|contains:"400x240" or $UA|contains:"samsung"}{assign var='mobi' value='TRUE' scope='global'}{else}{assign var='mobi' value='FALSE' scope='global'}{/if}

Now, you can use the $mobi variable anywhere in your template to present alternate content and resources. For example, inside of your template’s, you can set a mobile only stylesheet like this:

{if $mobi == 'TRUE'}
{cms_stylesheet name='My_Mobile_Styles'}
{/if}

An example of this mobile detection can be seen at, http://teamupcms.com/demos/device-detection-example/

TIP:
Do you have more than one Layout Template? The Snippets module can be helpful to include content that will be reused. The code from steps above can be included in a Snippet, and placed as the very first line of code in your template.

{Snippets name=”MobileDetection”}

Now, when you need to update your device detection with a new mobile user-agent, just update your Snippet instead of modifying every template.  An alternative to the Snippets module is using a Global Content Block with the WYSIWYG editor disabled.

To keep current with mobile user-agent strings, this site offers a list of user-agents, http://www.zytrax.com/tech/web/mobile_ids.html.

Looking for quality CMS Made Simple Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

JohnnyB

JohnnyB

I've been a full-time front-end web developer for nine years working with design and marketing agencies and businesses located all over the USA. CMS Made Simple has been my go-to Content Management System since mid 2006.

4 Comments on CMS Made Simple Mobile Detection

  1. Goran says:

    Nice post, but in my opinion this is rather a “bad practice” and not something i would recommend.
    First problem is, that Smarty Engine was created to separate programmatic logic from layout and doing a device detection is in my opinion something that should not be done in a template, but either create a User Defined Tag in CMSMS or create a plugin that does the job.

    What you are suggesting is a complete overhead and not only you are executing functionality that honestly shouldn’t be part of a page template but you are also wasting system resources.
    Think about it like this, Smarty renders PHP logic and functionality so someone who isn’t skilled with PHP has a easier time writing Templates and and can work with “clean” markup.
    Now what you are doing is, first creating/using “contains” plugin that is simply a wrapper around PHP built in functions, so this is already unnecessary overhead, then you are using “lower” modifier which is again simple wrapper around PHP built in function and besides all that if else if or else if logic isn’t needed. Simply put, all of this is wasting precious server resources, going from PHP to Smarty, from Smarty to PHP and back again and on and on.

    Now if you really WANT to do this kind of detection in Template it can be solved with 4 lines of code without a single plugin, best on very top of your page template.

    {$ua = strtolower($smarty.server.HTTP_USER_AGENT)} {* get user agent information *}
    {$mobile = false} {* set $mobile variable *}
    {if preg_match(‘/(android|ipod|ipad|palm|os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|windows ce; ppc;|windows ce; smartphone;|windows ce; iemobile|opera mini|blackberry|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|pda|psp|treo)/i’, $ua)}
    {$mobile = true} {* return true for $mobile variable if we have a match *}
    {/if}

    That’s all you need to run a basic device detection. Then you can do a simple logic for device based output.

    {if $mobile == true}
    I am mobile device
    {else}
    I am not mobile device or detection missed me
    {/if}

    But there are already other solutions available for CMSMS, so why reeinvent the wheel:
    Mobiledetect plugin: http://dev.cmsmadesimple.org/projects/mobiledetect (does exactly what is supposed to do and only that)
    ToolBox Module: http://dev.cmsmadesimple.org/projects/toolbox (a collection of different tools, if only mobile detection is needed, possibly a overhead)
    CGExtensions with {cge_is_smartphone} plugin: http://dev.cmsmadesimple.org/projects/cgextensions (usually you need it if for example you are using CGSimpleSmarty or CGSmartImage or almost any of Roberts module, so usually you have it installed already)

    • JohnnyB JohnnyB says:

      Goran, thanks for reading. I like your approach using preg_match and strtolower directly instead of using the Smarty modifiers. And, I agree that doing business with PHP via a plugin or UDT is best practice.

  2. Randy says:

    hi there
    i tried to install the plugin “mobiledetect” but this error message appeared:
    Die DTD-Version fehlt oder ist mit der XML-Datei nicht kompatibel.
    “the dtd version is missing or not comaptible with the xml file”
    what can i do now?

    • JohnnyB JohnnyB says:

      It sounds like the plugin may be out of date or there is a problem with the XML install file. What I would try is to download the XML to my computer, then use Extensions -> Modules to upload and install.
      If that doesn’t work and if the developer offers a .zip or .gz download of the plugin/module, then download that to your computer, extract the contents, and then upload to your /modules/ directory via FTP and then install via Extensions -> Modules. If all else fails, you may need to file a bug report at the module’s page at the dev.cmsmadesimple.org site.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 − 2 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>