A few nights back, I was reading a .net magazine article about developing websites enabled for mobile content.
As my blog is written primarily for technical people, it seems logical to assume that a reasonable proportion of its readers could make use of access from a mobile device, especially as the magazine article’s author, Brian Fling, believes that:
“[the mobile web] will revolutionize the way we gather and interact with information in the next three years”
Web 2.0 Expo: From Desktop to Device: Designing the Ubiquitous Mobile Experience
Basically, the catalyst for this comes down to a combination of increasing network speeds and mobile services, combined with a falling cost in the provision of data services.
It seems that there are basically two schools of thought when it comes to designing mobile content for the web: some (most notably the W3C) believe that content should be device agnostic; whilst that approach is perfectly laudable (a mobile browser is, after all, just another form of browser) others believe that the whole point of the mobile web is that device-specific functionality can be used to provide services that wouldn’t otherwise be available (e.g. location-based services).
Brian’s .net magazine article explains that there are for major methods of mobile web publishing:
- Small screen rendering
- Programatically reformatting content
- Handheld style-sheets
- Mobile-specific site.
As we work down the list, each of these methods is (potentially) more complex, but is also faster. Luckily, for WordPress users like myself, Alex King has written a WordPress Mobile Edition plugin, which applies a different stylesheet for mobile browsers, publishing a mobile friendly site. Using the Opera Mini live demo to simulate a mobile browser, this is what it did for my site:
The first image shows the content as it would be rendered using the default, small screen rendering – not bad but not exactly ideal on a small screen – but the second image is using the WordPress Mobile Edition plugin to display something more suitable for the mobile web. Not only is the display much simpler and easy to navigate on a handset, but the page size has dropped from 28KB to 1KB. Consequently, I was a bit alarmed when I used the ready.mobi site to generate a report for this site, as the site only scored 3 out of 5 and was labelled as “will possibly display poorly on a mobile phone”. Even so, the user experience on my relatively basic (by modern standards) Nokia 6021 was actually quite good (especially when considering that the device is not a smartphone and it failed the handheld media type test) whereas viewing the normal (non-mobile) version generated a “memory full” error.
So, it seems that preparing a WordPress site for the mobile web is actually pretty simple. I have a couple of tweaks to make in order to improve the ready.mobi test results (quick fixes ought to include support for access keys and working out why the page heading is being tagged as <h3> when the standard site uses an <h1> tag) but there is certainly no need for me to develop a separate site for mobile devices, which is just as well as it’s taking me ages to finish the redevelopment of the site (and I can save myself a few quid by not registering the markwilson.mobi domain)!
Links
The following links may be useful to anyone who is looking at developing content for the mobile web:
- .mobi mobile web developer’s guide
- Mobile web design – the series
- W3C mobile web best practices
- WAP CSS/WCSS tutorial
- XHTML-MP tutorial
- Brian Fling’s slidedecks on designing for mobile and from desktop to device: designing the ubiquitous mobile experience.
- Alex King’s who am I? browser details detector.
It may also be worth stopping by at Keni Barwick’s blog on all things mobile.
Leave a Reply