Maintaining mobile web content
This post is no official guideline but rather a log of steps I’m taking after having decided to build my sites in a more mobile device friendly way and a compilation of sources generally available on the net (most links included).
Why serve mobile content?
Mobile web content. The big question for me was why bother at all? Optimizing websites for mobiles means extra costs and few of my clients even know it’s possible, so I’ve never faced a demand to consider any of my projects from the mobile point of view nor was I particularly worried about this issue myself.
This changed when I bought my first handheld device and discovered that with the exception of big players like BBC or Google, it was often frustrating to browse most of the regular websites out there. Naturally, I turned to my own websites to see how they were standing. Luckily for me, it’d always been my opinion that a website should be kept as simple as possible, using JS only as a supplementary feature and avoiding flash completely if possible, so I was glad to find out that I was able to view and navigate the bigger part of my websites. However, lots of things were pretty bad – above all the size of the page.
So although I’m not required by anybody to lift a finger, I’d like to put some effort into making my sites more mobile-friendly. It will help the general mobile browsing environment a tiny little bit, I will have a feeling of doing things properly and will learn something interesting in the process.
How to serve mobile content?
Now, at the first glance, the whole process seems to be pretty simple:
I. Test whether the website visitor is using a mobile device.
II. Present the visitor with a mobile-friendly version. As for how to adjust the content you serve, it’s easy to find elaborate best practice for mobile web 
guidelines. However, what occurred to me immediately is what way should I develop and update both the normal and mobile version and at the same time avoid maintaining two separate applications. The first simple models I thought of are these:
- a standalone counterpart of the web – when you detect a mobile browser, you route the visitor to a standalone application (e.g. http://www.example.com/ –> http://www.example.com/m/ )
- adjust the main application – when you detect a mobile browser, you use a different stylesheet and hide unnecessary graphics, large pictures and some content like ads.
- use a third party solution – when you detect a mobile device, redirect the visitor to a third party that does all the hard work for you (e.g. http://www.example.com/ –> http://mowser.com/web/ )
Each of the above mentioned has pros and cons and I think it will yet take some consideration with regards to each different website.
I. Detecting a mobile device
It’s necessary to distinguish the mobile visitors, that’s the first step before you decide what to do next. Looking around a bit I found a couple of scripts, some free, some commercial. Eventually I decided to use this one , which should be able to recognise most of the common devices and isn’t too much resources demanding, with a minor adjustment – I removed the part detecting crawlers as I prefer the search engines to index the normal website, not the mobile one. The function returns boolean and it’s up to you what to do with this information next.
function detect_mobile_device()
{
$isMobile = false;
$isBot = false;
$op = strtolower($_SERVER['HTTP_X_OPERAMINI_PHONE']);
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$ac = strtolower($_SERVER['HTTP_ACCEPT']);
$ip = $_SERVER['REMOTE_ADDR'];
$isMobile = strpos($ac, 'application/vnd.wap.xhtml+xml') !== false
|| $op != ''
|| strpos($ua, 'sony') !== false
|| strpos($ua, 'symbian') !== false
|| strpos($ua, 'nokia') !== false
|| strpos($ua, 'samsung') !== false
|| strpos($ua, 'mobile') !== false
|| strpos($ua, 'windows ce') !== false
|| strpos($ua, 'epoc') !== false
|| strpos($ua, 'opera mini') !== false
|| strpos($ua, 'nitro') !== false
|| strpos($ua, 'j2me') !== false
|| strpos($ua, 'midp-') !== false
|| strpos($ua, 'cldc-') !== false
|| strpos($ua, 'netfront') !== false
|| strpos($ua, 'mot') !== false
|| strpos($ua, 'up.browser') !== false
|| strpos($ua, 'up.link') !== false
|| strpos($ua, 'audiovox') !== false
|| strpos($ua, 'blackberry') !== false
|| strpos($ua, 'ericsson,') !== false
|| strpos($ua, 'panasonic') !== false
|| strpos($ua, 'philips') !== false
|| strpos($ua, 'sanyo') !== false
|| strpos($ua, 'sharp') !== false
|| strpos($ua, 'sie-') !== false
|| strpos($ua, 'portalmmm') !== false
|| strpos($ua, 'blazer') !== false
|| strpos($ua, 'avantgo') !== false
|| strpos($ua, 'danger') !== false
|| strpos($ua, 'palm') !== false
|| strpos($ua, 'series60') !== false
|| strpos($ua, 'palmsource') !== false
|| strpos($ua, 'pocketpc') !== false
|| strpos($ua, 'smartphone') !== false
|| strpos($ua, 'rover') !== false
|| strpos($ua, 'ipaq') !== false
|| strpos($ua, 'au-mic,') !== false
|| strpos($ua, 'alcatel') !== false
|| strpos($ua, 'ericy') !== false
|| strpos($ua, 'up.link') !== false
|| strpos($ua, 'vodafone/') !== false
|| strpos($ua, 'wap1.') !== false
|| strpos($ua, 'wap2.') !== false;
$isBot = $ip == '66.249.65.39'
|| strpos($ua, 'googlebot') !== false
|| strpos($ua, 'mediapartners') !== false
|| strpos($ua, 'yahooysmcm') !== false
|| strpos($ua, 'baiduspider') !== false
|| strpos($ua, 'msnbot') !== false
|| strpos($ua, 'slurp') !== false
|| strpos($ua, 'ask') !== false
|| strpos($ua, 'teoma') !== false
|| strpos($ua, 'spider') !== false
|| strpos($ua, 'heritrix') !== false
|| strpos($ua, 'attentio') !== false
|| strpos($ua, 'twiceler') !== false
|| strpos($ua, 'irlbot') !== false
|| strpos($ua, 'fast crawler') !== false
|| strpos($ua, 'fastmobilecrawl') !== false
|| strpos($ua, 'jumpbot') !== false
|| strpos($ua, 'googlebot-mobile') !== false
|| strpos($ua, 'yahooseeker') !== false
|| strpos($ua, 'motionbot') !== false
|| strpos($ua, 'mediobot') !== false
|| strpos($ua, 'chtml generic') !== false
|| strpos($ua, 'nokia6230i/. fast crawler') !== false;
return $isMobile;
}
if($isMobile) header('Location: http://www.m.com/m/');
II. Create a mobile friendly version – optimize
Having detected if the visitor is browsing on a mobile device or not, I can start worrying about what path to follow next.
1. Standalone counterpart of the website
Apart from a redirect of mobile browsers, this solution doesn’t bring any changes to the main application. Instead, you create a new location (e.g. http://m.example.com or http://www.example.com/m/) and put the mobile-tuned application there. The obvious drawback is that now you have two things to maintain instead of one. But it can still prove useful, I guess. I tried to apply this approach on two sites:
- hutsky.cz – my simple portfolio
- before: not too much of html code so the size was ok, but lots of PNGs that increased the amount of the downloaded data significantly. I was also using some JS features for purely aesthetic reasons.
- after: made a redirect to hutsky.cz/m where I created a copy of the original page. Removed two column layout, unnecessary code and scaled the portfolio images down. The result: html file less than 8KB, css file 2KB. I hesitated with the pictures but decided to leave them here after all. They have about 100KB altogether now, which is still quite reasonable.
- both versions share a php array containing the portfolio projects and use a loop to produce the list as well as a script that reads rss feed with latest tweets and blog posts, so all the maintenance needed now is when the surrounding text is changed, which doesn’t happen often, so it’s no problem.
- motobazar-brno.cz – a motorbike shop offering second-hand bikes
- before: 67KB of html (about 100 bikes, some text, filters), some graphics and 1 picture for each bike – although it was just a thumbnail, 100 of them already made the web too large to be displayed on a handheld
- after: 33 KB of html, removed most of the graphics and most importantly the bike pictures (the pictures are now available only after you’ve navigated to the bike detail). The overall data downloaded is 70KB, which if no problem with wi-fi connection, quite fine with EDGE connection or better and maybe a bit too much for GPRS, but 70KB is still better than something over 1MB.
- both versions share most of the methods used, with a few exceptions. The text containing contact information has to be updated separately at the moment but this can be easily amended next time an update is required.
This approach seems to be useful for simple sites that do not require constant attention. Also, it can’t hurt to create a simple mobile version of a complex application. Better have the gist in a mobile-friendly way than all inforamtion in a way that is impossible to read.
2. Adjusting the application
If you keep the mobile devices in your mind before you start building an application (not the case with the two above mentioned sites), the mobile version can be a matter of just a few adjustments. Having little time, I tried this approach on this blog only, which was pretty easy. WordPress seems to be able to detect a blackberry and use a different stylesheet that enables you to browse the blog in a more friendly way. All I did is change this blackberry detection for the method detect_mobile_device() mentioned above. So with minimum effort, I’ve got a mobile-friendly blog with no floats. This can be achieved with any application.
3. Third party solution
Probably the fastest solution. All you have to do is detect mobile device or handheld and redirect the visitor to a service that does all the work for you. One of such websites is mowser.com, but there many more. You simply tell the visitor to go to http://m.mowser.com/web/http://www.example.com:
if($isMobile) header('Location: http://m.mowser.com/web/' . urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
I’m not using this solution anywhere at the moment as I do not like relying on a third party and I also noticed issues with nation-specific characters. But I believe it is a very easy, quick and efficient way to offer your visitors a mobile-friendly experience of your web.
Leave a Reply
You must be logged in to post a comment.