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 nevillehobson.com 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:
- WordPress Mobile Edition by Alex King
- iWPhone WordPress Plugin and Theme by Content Robot
Your mobile visitors will thank you.
17 responses to “Making your blog look good on a mobile device”
Great post, Neville! As a heavy user of a mobile and owning “just a simple” SE Z710, I encounter this daily.
And judging by comments on Twitter when a new version of WP is out, several of the blogs I read seem to use WP.
I’ll be sure to spread this around.
(This reply was written on aforementioned mobile, using Opera Mini :) )
Thanks for the tip, Neville! I’ll try those plugins.
Extending outside blogs, the other thing is to consider why people will be visiting your site when using a mobile. Someone visiting a train company site most likely wants to know the times of the next trains, not competitions or offers, so take them off your main page for browsing, but give people an option for a “other options”.
These plugins are readily available so it’s a no brainer to set up a WordPress blog to be mobile friendly.
There must be plugins for other platforms too.
most of my work is custom builds, Neville, so I would have to do a lot of the work myself ;)
Looking at it from the other end, I manage a few blogs that have these plugins installed. They are fantastic to use from the admin end as well. Very easy to set up, and once you have set them up, you can forget them.
As a matter of fact, a few weeks ago I saw mention of iWPhone, downloaded it and prepared everything for an install only to find that I had installed it a year earlier when the original iPhone came out. That’s my kind of plugin.
Neville when I updated my blog adding a plug in for mobile was one of the things I looked to do.
Mobile marketing is definitely here to stay.
I recently did an interview with Kim Dushinski of the Mobile Markting Handbook – the book is published later this year.
You can access it from my post on the 26 July 2008 if it’s of interest.
hi I was reffered to your discussion via a colleague posting link on friend feed. I am using an I touch and it looks good on that. I use blogger but have used wordpress before. Personally I found blogger a quicker tool to set up my navigation
Shared: Making your blog look good on a mobile device : NevilleHobson.com: Another reason fo.. http://tinyurl.com/67gvak
@jangles The link is http:// http://tinyurl.com/6zs2qa . Delet the [space] between http:// and http://www..
@jangles >>> http://bit.ly/1YTqU2
Good tips, Neville. I think we’ll have to put this one in the del.icio.us files!
[…] a great post for you bloggers – and your readers – on NevilleHobson.com. Find out how to format blog content for an iPhone or other mobile device. After reading this post, and heeding Neville’s advice, your blog will load with improved […]
Really good article. I have been following your blog for last 3 months. You have good knowledge
on Mobile(cell phone) Industry and happenings. Please continue the good work. Thank you.
Thanks, Satya, appreciate your comments.
Thanks for sharing this article. Your knowledge in blogging is very useful.
Twitter Comment
@DoctorJones thanks Dave. I have two WordPress plugins for mobile devices incl iPhone: [link to post]
– Posted using Chat Catcher
I have an Android and it views iPhone themed sites perfectly. If the iWPhone WordPress Plugin and Theme plugin does not detect Android, I suggest it should since it looks so much better than the WordPress Mobile Edition plugin.
I use the WordPress Mobile Edition on my own blog at the moment, works great!