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
Hello hello, echoecho !
Published January 27, 2010 by Richard
When cool people do cool stuff with our stuff, well, then, that makes us cool by association right ? :-)
Nick and the Purpose Wireless team are such guys. They’ve developed the first free, permission‐based, location sharing solution available worldwide on iPhone, Android, Nokia Symbian, BlackBerry, and Windows Mobile. Its called echoecho.
With echoecho smartphone owners can ask and answer the question “where are you” in one simple click.
Whether you are travelling, meeting friends around town or trying to determine whether your date will be on time for dinner – echoecho helps you find your friends and family – without repeatedly texting or calling.
We’re been using it on the office here, its excellent. Install is a snap, we’re running it on iPhones and various Nokia devices and it works a treat.
Posted In Mobile Apps | 1 Comment
New Look & New Release, Sneak Preview
Published January 19, 2010 by Richard
Happy New Year ! Hope you had a great News Years Eve.
2009 was an awesome year for Handset Detection. Thank you everyone that joined during 2009, and an extra special thank you to the people that came on board as subscribers. :-)
It was a year of milestones for us.
Launching the paid service was big. Bill joined me as the second full time staff member, and Peter came on board for a coding sprint to help us get this release to fruition. David is back, helping out with promotion. Dhvani is interning with us doing a great job with testing and all manner of random tasks. Thanks to Munish who put the website look together and to Helen/Malcolm from Creative DV who did some great work on the new logo. I’ve always been partial to the smiley myself. :)
2010 is shaping up as a great year.
We have a new release primed and ready to ship. You can catch a sneak preview over here. Its a whole new … well, everything really. Login with your existing details or use the demo account (username demo@handsetdetection.com password demo). The data isn’t live, it was imported last Wednesday.
We hope to have the new release out later this week. Let me know what you think in the comments below.
UPDATE : The new look website is live. (You’ve probably noticed already).
Related posts:
Posted In Release | 0 Comments
