UA Mobile Web Templates

UA Mobile Web was built using a combination of custom PHP coding, CSS/HTML design, and open source code/scripts. The following documentation will detail the process followed to create UA Mobile Web, and that you may follow to create your own mobile web site.

Note: All open source code and scripts used in this process are subject to the terms of use provided by their original creator.

Steps to create a Mobile web site:

  1. Use a mobile detection script or library to detect the User Agent String and forward to a mobile-styled theme.
  2. Allow users to get back to the full desktop version of your site on their mobile device.
  3. Create themes for each device type you want to target (this documentation currently covers two types of themes).

Mobile Detection

In order to create the best experience for each user and their particular device, some kind of mobile detection is required. While there are several different methods for how to handle this, the method used on UA Mobile Web is via the Mobile Device Detection PHP script. This script allows you to target different devices and forward them each to a URL you specify. By doing this, you can create alternate themes that cater to the strengths and weaknesses of each device.

How to Use

  1. Download the Mobile Device Detection script
  2. Place the mobile_device_detect.php file in a folder of your choosing
  3. At the very top of your index, insert the following code

    <?php
    require_once('includes/mobile_device_detect.php');

    //iphone, ipad, android, opera, blackberry, palm, windows, all mobiles, desktop browsers
    mobile_device_detect('http://mobiledomain/i/',false,'http://mobiledomain/a/','http://mobiledomain/d/',
    'http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/',false);
    ?>

  4. Note that there are three different URLs: mobiledomain/i/, mobiledomain/a/ and mobiledomain/d/. The iPhone and Android devices are targeted with their own themes capable of more advanced CSS/HTML. Every other device gets a basic, default theme. In the future, if you decide to target another platform/mobile browser, such as Opera Mini, to take advantage of its feature-set, you would simply change the variable for that device and point it to a new folder on your mobile domain (i.e. mobiledomain/o/).
  5. In some cases, there are times where we do not want to send a user to the mobile site, such as those browsing on the iPad or a desktop computer. Instead of a mobile domain URL in the detection script, simply use the word false.
  6. For more information on how to use and configure the Mobile Device Detection script, please refer to the Usage Guide.

Set a Cookie

The main issue encountered with doing detection and forwarding to a mobile domain is that you may create a loop where the user cannot get back to the original web site. You can get around this by setting a PHP cookie.

On the index of each mobile theme, create a link called “Full Site” that leads back to your main domain AND sets a URL parameter. Ex: http://mobiledomain/?mobi=non_mobile

On the index of your main domain, replace your mobile detection code with this:

<?php
require_once('includes/mobile_device_detect.php');

if($_GET['mobi'] == 'non_mobile' || $_POST['mobi'] == 'non_mobile'){
setcookie('mobi', 1, time()+86400);
}
elseif($_COOKIE['mobi'] != 1){
//iphone, ipad, android, opera, blackberry, palm, windows, all mobiles, desktop browsers

mobile_device_detect('http://mobiledomain/i/',false,'http://mobiledomain/d/','http://mobiledomain/d/',
'http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/',false);
}
?>

Mobile Web Templates

Advanced

In order to speed up the development process for UA Mobile Web, an open source design package known as iWebkit was used. Several modifications and improvements were made, so if you wish to design your mobile site using this kit, please use the files in the ZIP file below.

Compatible Devices: iPhone, Android

iWebkit

Zip file Download iWebkit

Basic

The other theme being used is a stripped-down version designed for devices less capable in CSS/HTML. All files necessary to build your basic theme are included in the ZIP file below.

Compatible Devices: Blackberry, Windows Mobile, Palm OS, and some cell phones

Mobile Default

Zip file Download Default Mobile Template

Helpful Resources

Placement on UA Mobile Web

If you have created a mobile web site that represents an official UA organization, college or department, and you would like it to be considered for placement on UA Mobile Web, please let the Office of Web Communications know about it by contacting us at webmaster@ur.ua.edu. We will review your finished product and consider it for the most appropriate placement within the main UA Mobile Web site.

NEXT: UA Web Images