Mobile Sites

Creating Mobile Versions of Pages and Elements

This is a short tutorial on how to create special versions of pages and elements that are shown when a user is using a mobile device, such as a phone or tablet.

There is a session variable $_SESSION['mobile'] available that holds the current state of the site. This variable has 3 possible values:

true - mobile device detected and currently in mobile mode
false - no mobile device detected and not in mobile mode
0 - mobile device detected and not in mobile mode

The reason there are both "0" and "false" is to make it easy to provide "view full site" and "view mobile version" links.

Now that we can tell what version of the site we are in, let's see how to make mobile versions of entire pages.

Mobile Pages

The basic naming convention for a mobile version of a page is as follows:

original_page_name
original_page_name_mobile

header
header_mobile

When a mobile version of a page exists, it will be loaded instead when the site is in mobile mode.

Mobile Elements

The naming convention for mobile elements is a little more complicated since there can also be language specific elements.

original_element
original_element.mobile

original_element.en-us
original_element.mobile.en-us

main_text
main_text.mobile

title.fr
title.mobile.fr

As with pages, when a mobile version of an element exists, it will be loaded instead when the site is in mobile mode.

Switching Between Mobile and Full Mode

When a user first visits the site, their browser's user agent is run through a mobile detection function. This determines the initial state of the site.

To manually change between mobile and full modes, append the following to a url in your site.

//switch into mobile mode
"http://domain.com/?mobile=1"

//switch into full mode
"http://domain.com/?mobile=0"

Using the session variable, we can provide a toggle link as follows:

<?php
//if in mobile mode, link to full site
if($_SESSION['mobile']) { 
?>
    <a href='<?php echo $site_root.$current_path; ?>?mobile=0'>view full site</a>
<?php
}
//if mobile device detected and in full mode, link back to mobile mode
elseif($_SESSION['mobile'] === 0) {
?>
    <a href='<?php echo $site_root.$current_path; ?>?mobile=1'>view mobile site</a>
<?php
}
?>

A Note About iPads and Tablets

Apple iPads and Android tablets that are starting to be released pose somewhat of a problem. On the one hand, they are running a mobile operating system, have a touchscreen interface, and are most likely using a mobile internet connection. On the other hand, they are fully capable of displaying full websites and their high resolution causes many mobile templates to look stretched out and distorted.

DornCMS handles this by considering tablets as mobile devices, but defaulting to full site mode. This means, when a user first visits your site from a tablet, the session variable $_SESSION['mobile'] will be set to "0" and the user will see the full site. It is as though they viewed the mobile version and hit the 'view full site' link.

Loading Order of Elements

If more than one version of an element exists, DornCMS has to choose which one to display. This can become complicated when there are mobile and full versions of pages, different localizations, etc..

Below is the exact order that DornCMS loads elements. If an element doesn't exist, it moves on to the next one. If none of the elements exist, an empty string is used. For this example, assume the element is "home - main_text", the site is in mobile mode, and the current language is "en-us".

1. home_mobile/main_text.mobile.en-us
2. home_mobile/main_text.mobile
3. home_mobile/main_text.en-us
4. home_mobile/main_text
5. home/main_text.mobile.en-us
6. home/main_text.mobile
7. home/main_text.en-us
8. home/main_text