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.
I’m amazed at just how well the plug-in works on a standard featurephone. I’m writing this comment on my Nokia 6021. Mark
Note that the ready.mobi test is made to make almost any site look bad. The do so want to sell their .mobi concept after all…
Fair point Peter – it didn’t take too many changes to get up to full marks though.
Mark
I think it’s a bit unfair to say we are trying to make sites look bad!
(Quite the opposite actually – we want to demystify the process of mobile web development and get really interesting content out there).
The ready.mobi tests are a superset of those in the W3C Mobile OK tests http://validator.w3.org/mobile/ – we add in a few more ingredients to the mix (like page size and our own domain compliance requirements).
And yes, it shouldn’t take too much to get scoring highly. We provide a selection of ‘fixit’ tips to help people get better. It’s worth doing – increasingly, mobile search engines will rank sites higher if they adhere to these sort of rules.
(They don’t want to send users of to pages that will melt their phones)
James
CTO, dotMobi
Hi James,
Thanks for stopping by – I really appreciate you taking the time to comment on this post.
It’s worth pointing out that the ready.mobi tests (and associated ‘fixit’ tips) were actually really helpful to me in understanding where my code needed to be improved (as I indicated with the link in my comment above). One key difference is that ready.mobi accesses my site as a mobile device would and so receives the mobile-optimised content; conversely, the W3C mobile web best practices checker is no use at all for a site that serves appropriate content according to how the browser identifies itself (only for sites which are dedicated to mobile content).
Mark
Hi – I’ve got another great option for you – and it’s better than the one you’ve already talked about!
It’s called the Wapple Architect Mobile Plugin for WordPress and it mobilizes your blog. It works for every single device, from a WML phone to a brand new swanky phone with XHTML. Images are dynamically resized and you get the option to really customize your blog any way you want.
In addition, you can upload mobile logos, style your site so the mobile version matches the website and you retain your brand identity. You also get loads of control over mobile SEO.
With regards to mobiready, I know this plugin will score poorly. However, what you should know is that the mobiready test is out of date and can’t handle the advanced nature on my plugin (being totally dynamic rather than totally static) – it’s the fault of the test, not my plugin!
If you fancy giving it a go, the URL is http://wordpress.org/extend/plugins/wapple-architect/ – it’d be great to hear your feedback!
If you need any help setting it up or would like any assistance enhancing your mobile blog, get in touch over at http://mobilewebjunkie.com and I’ll do my best to lend a hand!