{"id":776,"date":"2007-04-23T14:45:14","date_gmt":"2007-04-23T13:45:14","guid":{"rendered":"http:\/\/www.markwilson.co.uk\/blog\/2007\/04\/publishing-wordpress-content-on-the-mobile-web.htm"},"modified":"2007-04-24T22:18:03","modified_gmt":"2007-04-24T21:18:03","slug":"publishing-wordpress-content-on-the-mobile-web","status":"publish","type":"post","link":"https:\/\/www.markwilson.co.uk\/blog\/2007\/04\/publishing-wordpress-content-on-the-mobile-web.htm","title":{"rendered":"Publishing WordPress content on the mobile web"},"content":{"rendered":"

A few nights back, I was reading a .net magazine<\/a> article about developing websites enabled for mobile content.<\/p>\n

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<\/a>, believes that:<\/p>\n

“[the mobile web] will revolutionize the way we gather and interact with information in the next three years”<\/p>\n

Web 2.0 Expo: From Desktop to Device: Designing the Ubiquitous Mobile Experience<\/a><\/p>\n<\/blockquote>\n

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.<\/p>\n

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).<\/p>\n

Brian’s .net magazine article explains that there are for major methods of mobile web publishing:<\/p>\n

    \n
  1. Small screen rendering<\/li>\n
  2. Programatically reformatting content<\/li>\n
  3. Handheld style-sheets<\/li>\n
  4. Mobile-specific site.<\/li>\n<\/ol>\n

    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<\/a>, which applies a different stylesheet for mobile browsers, publishing a mobile friendly site. Using the Opera Mini live demo<\/a> to simulate a mobile browser, this is what it did for my site:<\/p>\n

    \"This\"The<\/p>\n

    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<\/a> site to generate a report for this site<\/a>, 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<\/a> was actually quite good (especially when considering that the device is not a smartphone and it failed the handheld media type test<\/a>) whereas viewing the normal (non-mobile) version generated a “memory full” error.<\/p>\n

    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><\/code> when the standard site uses an <h1><\/code> 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)!<\/p>\n

    Links<\/strong>
    \nThe following links may be useful to anyone who is looking at developing content for the mobile web:<\/p>\n