Over the past couple of weeks I’ve had the absolute pleasure (no not really!) of adapting a WordPress site and making it accessible on as many mobile phones as possible. Now I must admit I’ve not had much experience building mobile sites so this is all new ground for me; and by mobile website I don’t mean for the iPhone only (for more information on this plus lots of swear words see ‘The iPhone Obsession‘ by PPK).
Luckily there are already many plug-ins available for WordPress that can get you started on your way, one that really grabbed my attention was ‘WordPress Mobile Pack‘ by MobiForge. The plug-in contains a mobile optimised theme that you can adapt for your needs and the ‘mobile switcher’ functionality. Mobile switcher detects if a user is browsing from a desktop or a mobile phone and switched the theme accordingly. Great, we’re already half way there!
One of the specifications for the site was that it must work on a set of 4 different screen widths (480px, 320px, 240px and 176px) and this is where the DeviceAtlas API comes in very useful. Device Atlas keep a huge database of mobile phone user agent strings plus specifications associated with a particular mobile phone that you can tap into and use in your web application.
Now one thing I must mention is that according to the mobiForge page listed above, WordPress Mobile Pack includes DeviceAtlas integration. This turns out not to be the case. I couldn’t find any settings regarding DeviceAtlas in the plug-in admin area and very little mentioned on the forums. I assume the page hasn’t been updated for a while and the functionality has been removed. This isn’t a problem though as it’s fairly simple to integrate the DeviceAtlas API into your PHP application i.e. WordPress. Here’s how you do it.
First you must register with DeviceAtlas and order a developer licence (there’s a free option available here). Once registered grab a copy of the PHP API and the latest Device JSON file (under ‘My account’). Unpack the API into the root of your web application (or wherever you like, just make sure the includes are set correctly) and copy the JSON file into the json directory along side it. You are now ready to include the API into the base WordPress Mobile Pack theme. Copy and paste the following into your header.php above the doctype:
1 2 3 4 5 6 7 8 | <?php //Include the DA API require_once 'Mobi/Mtld/DA/Api.php'; //Include the JSON file with the device data $tree = Mobi_Mtld_DA_Api::getTreeFromFile('json/DeviceAtlas.json'); //Grab the User Agent string $ua = $_SERVER['HTTP_USER_AGENT']; ?> |
Great now we know the user agent that the user is using to view the website (well it may not be 100% accurate but better than nothing). So now you want to query the JSON file and pick out the relevant phone specifications you need. I’m just looking for the width of the device, so I included this in the head tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php try { //Query the JSON file ($tree) with the User Agent string and look for the display width $displayWidth = Mobi_Mtld_DA_Api::getPropertyAsInteger($tree, $ua, "displayWidth"); } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) { $displayWidth = 240; //Default to 240 if unknown } //Add stylesheet tweaks depending display width if($displayWidth == 480): ?> <link href="<?php bloginfo('stylesheet_directory'); ?>/480.css" rel="stylesheet" type="text/css"> <?php elseif($displayWidth == 320): ?> <link href="<?php bloginfo('stylesheet_directory'); ?>/320.css" rel="stylesheet" type="text/css"> <?php elseif($displayWidth == 240): ?> <link href="<?php bloginfo('stylesheet_directory'); ?>/240.css" rel="stylesheet" type="text/css"> <?php elseif($displayWidth == 176): ?> <link href="<?php bloginfo('stylesheet_directory'); ?>/176.css" rel="stylesheet" type="text/css"> <?php endif; ?> |
All this code does is find the display width of the phone viewing the website and add a CSS file with relevant site tweaks, allowing you to optimise for that screen size. If the device isn’t found I’ve defaulted to a screen size in the middle of the screen sizes.
Looking through the API docs there are plenty of ways to distinguish between your users, using the following code will allow you to target specific phone brands:
1 2 3 4 | <?php //Output example $make = 'Nokia' $make = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'vendor'); ?> |
So now you can target only Nokia users. Or instead of loading a different CSS file you could include a different sized image for different screen widths; there are tonnes of options available.
I must admit I really dislike having to ‘sniff’ for the user agent string and having a different CSS file / image per device width, it reminds me of the Netscape / IE browser war days, oh how much fun that was! I guess it’s a necessary evil.
A word or warning when it comes to DeviceAtlas, there seems to be distinct lack of support available. I wrote a couple of emails asking questions and got no reply, and lots of questions on the forum are left unanswered. So if you get stuck you may need to figure it out for yourself I’m afraid.
All in all I’m pleased with the results of my first adventure into the world of mobile web development. I still have lots to learn so if you have any tips and tricks please let me know!
John Millington on June 30 10 / 180 Permalink
Really handy! I kept looking around and finding outdated information and things that didn’t make sense.
Thanks for posting
Matt on June 30 10 / 180 Permalink
Totally agree John. I seemed to be going round in circles for half a day before things started making sense. Think they need to update their docs.
Shane on July 1 10 / 181 Permalink
Hi There. Thanks for the info. When you say that we must copy the json into the directory alongside it. What do you mean. Must we create a directory ? as there is no existing directory. Thanks
shane on July 1 10 / 181 Permalink
Hi I sorted it out… doh.
I then had to increase my memory in php.ini
now i have another error in the header, but I will work around it. Thanks again.
Matt on July 1 10 / 181 Permalink
Hi Shane,
Yes i had to increase the server memory for the script by adding this to the Api.php file as it was running out.
For the directory you can place it anywhere you like as long as the includes point to it correctly. So mine is in a folder called json in the root directory and my include looks like this:
2
3
require_once 'Mobi/Mtld/DA/Api.php';
$tree = Mobi_Mtld_DA_Api::getTreeFromFile('json/DeviceAtlas.json');
I’m still convinced there’s an easier method to include DA with WordPress Mobile Pack as there are references to it all over the code. It’s a pity the plug-in support is so bad.
mixdev on October 18 11 / 290 Permalink
DA takes insane amount of RAM to parse the tree and often passes out in the process. I can’t really run this in production. Increasing memory limit to 64Mb is a solution but it will worsen the situation when you have a moderately popular website.
Have you people figured something to fix this issue?
Matt on October 24 11 / 296 Permalink
Hi Mixdev,
Yes we had the exact same issue on our server. Luckily it was an internal / small project so we were able to modify the settings and not worry to much about server resources. I agree I wouldn’t use it on a production site.
I have to admit I gave up on DA a while ago. It seemed a pain to setup and get working and any support requests both forums and emails were ignored. I’d look into other avenues (maybe PhoneGap for a mobile site – I have no idea what you need but I’ve heard it is very good). I don’t have any other suggestions off the top of my head, sorry!
Hope that helps a little.