Making your blog look good on a mobile device

When visiting websites on your mobile device, there’s nothing more frustrating than waiting for a site to load when that site contains huge numbers of images and other graphical paraphernalia.

It gets downright annoying when you’re on a cellular connection and especially if you’re roaming: all you see are currency symbols flashing in front of your eyes as you think about what it’s costing you to wait for all the content to appear on your device’s screen.

And when a site does eventually come up on screen, it will likely be formatted for viewing on a computer screen, not the small screen of a mobile device.

Other than grin and bear it or move on somewhere else, there’s little you can do if a website publisher doesn’t offer a mobile-friendly version of the website, either a special URL you go to or – best of all – a means by which the site detects the type of browser you’re using and serves up a mobile-friendly version of the site if it’s a browser on a mobile device.

So what does a ‘mobile-friendly’ website look like?

Something like this perhaps – how this blog looks when viewed in, from left to right, Opera Mini and the native phone browser on my Nokia N95 8GB that runs the Symbian operating system:


No graphics, nothing but the text and links, all formatted neatly for the small screen of a mobile device so no horizontal scrolling around to find the content you want to see.

If you visit my blog on a mobile device running the Windows Mobile operating system, this is how it will look when you visit with Internet Explorer Mobile, in this case on an XDA Orbit 2.

It must be difficult to create mobile-friendly versions of traditional websites – otherwise you’d encounter more of them, right? – but for blogs, it’s a piece of cake.

At least, for WordPress blogs which is my experience.

My blog has a nifty plugin installed called WordPress Mobile Edition, created by Alex King.

The blog has no separate URL: when you visit here at from a mobile device, the plugin automatically detects the type of browser and serves a nicely-presented version of the site that is designed for those small screens and focuses on text and links not graphics.

So the blog loads rapidly on your mobile device, which is what you want when you’re out and about, whether on wifi or a cellular connection.

What about an iPhone or an iPod Touch? How would a blog like mine appear on one of those devices?

Ah, Apple fans, you’re in for a treat!

My blog has another WordPress plugin installed called iWPhone WordPress Plugin and Theme created by Content Robot.

This automatically serves an optimized version of the blog when you arrive here on an iPhone or iPod Touch.

And doesn’t it look good!


As I don’t own an iPhone or an iPod Touch, I asked on Twitter if a kind soul would visit from one and grab a screenshot.

The one you see here is from Bryan Person in Boston who emailed me the image from his iPhone. Jacob Bøtter in Copenhagen also visited from his iPhone and posted his screenshot on TwitPic. And Gaurav Patel in London came along from his iPod Touch.

[Later: And Bernie Goldbach in Cashel, Ireland, added some photos of how this blog looks on his Nokia E90.]

Thanks, everyone, your response was terrific.

From the design and functionality points of view, you have to hand it to Apple and Content Robot.

Not only does the blog look good on an iPhone or an iPod Touch – the bigger screen is a big help – it includes the main elements that let you interact with the content rather than only scroll and click from link to link as is the case with Symbian- and Windows Mobile-based devices.

You also get some of the content of a post as well as the means to interact, eg, leave a comment, or post to Digg or delicious.

So if you run a WordPress blog, I urge you to install both of these plugins:

Your mobile visitors will thank you.