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:
- Use a mobile detection script or library to detect the User Agent String and forward to a mobile-styled theme.
- Allow users to get back to the full desktop version of your site on their mobile device.
- 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
- Download the Mobile Device Detection script
- Place the mobile_device_detect.php file in a folder of your choosing
- At the very top of your index, insert the following code
<?php
include('includes/mobile_device_detect.php');
//iphone, android, opera, blackberry, palm, windows, all mobiles, desktop browsers
mobile_device_detect('http://mobiledomain/i/','http://mobiledomain/d/','http://mobiledomain/d/',
'http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/',false);
?>
- Note that there are two different URLs: mobiledomain/i/ and mobiledomain/d/. The iPhone gets its own theme because it is capable of more advanced CSS/HTML. Every other device gets a basic, default theme. In the future, if you decide to target the Android platform 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/a/).
- 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
include('includes/mobile_device_detect.php');
if($_GET['mobi'] == 'non_mobile' || $_POST['mobi'] == 'non_mobile'){
setcookie('mobi', 1, time()+86400);
}
elseif($_COOKIE['mobi'] != 1){
//iphone, android, opera, blackberry, palm, windows, all mobiles, desktop browsers
mobile_device_detect('http://mobiledomain/i/','http://mobiledomain/d/','http://mobiledomain/d/',
'http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/','http://mobiledomain/d/',false);
}
?>
Mobile Web Templates
iPhone
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.
- To see demos of the different types of pages and effects, go to http://demo.iwebkit.net
Blackberry/Default
The other theme being used is a stripped-down version designed for devices less capable in CSS/HTML. Such devices include Blackberry, Windows Mobile, Palm OS, Android, and some cell phones. All files necessary to build your basic theme are included in the ZIP file below.
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.