Optimizing for Mobile Websites : The 3 Template Trick
Published January 29, 2010 by Richard
We’ve had a few queries over the last month from folks looking to optimize their mobile websites. There’s a truck load of ways to go about this however here’s the way I recommend. Its simple and easy. I call this the 3 template trick.
Step 1 – Build 3 mobile templates (or pages) – Optimized for screen size.
The idea is that you’ll customize a layout for each screen width. Note, we’re not so concerned about screen height as people are mostly used to scrolling up and down the page.
The 3 screen widths this script is setup to handle is 241 pixels and greater (large), 181 to 240 pixels (medium) and 180 pixels and smaller (small). The large template is going to get more modern mobile browsers which offer a better mobile web experience, guys like iPhone, Palm Pre, Motorola Droids live here. The medium group contains mid range phones such as the Nokia N95, T-Mobile Atlas or Samsung S8300. The small group is largely made up of older model phones whose numbers are still significant but are declining.
Step 2 – Add this script.
This script works with the PHP Api kit, You’ll have to download that and install it first. Then make a file called index.php and with the script below.
You’re done ! Thats it. You can now detect 3 screen sizes and display the most appropriate page.
/*
**
** Handset Detection - devices.detect.php script
**
*/
require_once('hdbase.php');
$hd = new HandsetDetection();
$hd->detectInit();
$ret = $hd->detect('display');
if ($ret) {
$data=$hd->getDeviceResolution();
if($data['width']>241){ //for large screen size devices
require_once("large.php");
}elseif($data['width']>181){ //for medium screen size devices
require_once("medium.php");
}else{ //for small screen size devices
require_once("small.php");
}
exit;
}
//go to the pc version
require_once("pc.php");
Related posts:
Posted In How To | 0 Comments
