Make Your Wordpress Blog Mobile Compliant in One Step
August 18th, 2009
You may have noticed that this blog now has a mobile version for the iPhone and iPod Touch. You may also have noticed that there is a second mobile format for all other smart phones, too. Thanks to the ease-of-use of Wordpress, you can make your blog mobile compliant in about five minutes and without writing one line of code. Nice!!
Background
First, let’s start with a little background. Mobile phones (especially those with web browsing capabilities) are becoming very pervasive. The percentage of visitors reading your blog from a mobile phone is probably growing exponentially. The best part about the technique I’m going to show you is that it is not going to cost you anything to display a mobile version of your blog. If there’s no cost–either in your time, or otherwise–why not take a minute to satisfy a growing percentage of your readership? That said, let’s get to it.
The Plugin
The plugin that I recommend using to make your website mobile compliant is called Wordpress PDA and iPhone. Embarrassingly, I’ll be the first to admit that the “PDA” name confused me. The PDA in this context really means any non-iPhone browser including BlackBerry and Android.
The Designs
As you can see in the screen shots above, this plugin is bundled with two unique designs: one for the Apple crowd and one for the PC crowd everyone else. I’m sure we could go ’round and ’round about the pros and cons of managing three separate designs: your regular design, your Mac-centric mobile design, and your “everything else” mobile design. Basically, I’ll summarize my thoughts as follows: iPhone users are comfortable with a certain look-and-feel on their device. Similarly, BlackBerry/Android/Pre users are also accustomed to a certain look and feel. In this specific context, since the architecture (a.k.a the back end) of the websites are identical (it’s Wordpress, after all), why not just plug and play and manage three separate designs and satisfy as many of your readers as possible? After all, it’s not about you. It’s about your readers, right?
Installation
To install the plugin, unzip the compressed download and drop the entire “wp-pda” folder into the /wp-content/plugins directory on your server. Log into Wordpress, activate the plugin, and you will have a mobile compliant website in one step!! As Jim Cramer would say: “Boo-yah.”
How it Works
Depending on which browser you use to visit your site, the plugin will automatically detect whether it should display the full version of your site or the mobile version. If it detects a mobile browser, it will decide whether it should show the iUI version for the Apple crowd or the non-Apple version for everyone else. The plugin comes preloaded and ready to detect the following devices:
Elaine/3.0, iPhone, iPod, Palm, EudoraWeb, Blazer, AvantGo, Windows CE, Cellphone, Small, MMEF20, Danger, hiptop, Proxinet, ProxiNet, Newt, PalmOS, NetFront, SHARP-TQ-GX10, SonyEricsson, SymbianOS, UP.Browser, UP.Link, TS21i-10, MOT-V, portalmmm, DoCoMo, Opera Mini, Palm, Handspring, Nokia, Kyocera, Samsung, Motorola, Mot, Smartphone, Blackberry, WAP, SonyEricsson, PlayStation Portable, LG, MMP,OPWV, Symbian, EPOC, Android
Two Tweaks
I know I said you could make your website mobile compliant in one step, but there are two tweaks I strongly recommend you make.
1. To the best of my knowledge, I believe this plugin was written before Android was born. Therefore, you are going to want to add the word “Android” to the list of Browser Agents on the plugins page. You can just copy and paste the blockquote above if you’d like. As you may have noticed, I slipped Android onto the end of the list. It may be missing when you install the plugin.
2. The iUI design targetted specifically for the iPhone is still considered beta. When you first install the plugin, you will see a “Home” button in the header. I was having a helluva time getting this function to work properly, so I did what any good developer would do–I deleted it. : ) To remove this button, all you need to do is delete the second to last line in the /wp-pda/iphone-theme/header.php file and re-upload this file to your server.
3. I know I said there would be only two tweaks, so consider this one optional. If you’d like to customize the look of either design, all you will need to do is edit the style.css files located in the /iphone-theme folder or the /pda-theme folder.
Thanks for your time and happy mobile-blogging!!
Hi!
Have you checked out the Wapple Architect Mobile Plugin for WordPress? It builds a mobile version of your blog that works perfectly on any device, not just those in that list. It automatically detects new devices and knew about the Android before it had even left the lab.
It has tons of features and functionality, retains the brand identity of your site from web to mobile and gives users a consistent experience.
If you fancy taking a look at it, the home page of the plugin can be found here: http://wordpress.org/extend/plugins/wapple-architect/ - it’d be great to hear your thoughts!
Your site is a refreshing change from the majority of sites I have visited. When I first started visiting web sites I was excited by the potential of the internet as a resource and was very disappointed initially. You have restored my enthusiasm and I thank you for your efforts to share your insights and help the world become a better place.
Wow, that almost seems too easy. Thanks!
Awesome - thanks for this post. Updating a few blogs now with this plug in.
I’m also a huge fan of WP-Touch which is great for iPhone / iPod Touch rendering.
www.bravenewcode.com/wptouch/
When you go to a site that uses this plugin, is it optional to choose mobile or non-mobile?
Great device
@Rich Gubby Thanks for the suggestion. I hadn’t looked into that plugin. I’m assuming it reuses your CSS files to rebuild the site as closely to the original as possible. If there’s one thing I would change about this plugin, I would have it reuse the existing CSS as much as possible.
I was thinking a little bit about the inconsistent designs. Although I would like to have all three look identical, I think there is a simple opposing argument: since very few readers actually use multiple mobile devices (iPhone and Android as an example) you should match the designs as closely to a native feel for the device as possible and not have all three match each other. I suppose each argument can hold water.
Thanks for reading and commenting!! : )
@Joe Unfortunately, there is no option in this plugin to go back to the original (non-mobile) site.
In fact, the experimental iUI interface for the iPhone/iPod Touch does not even have comments enabled–meaning you can’t even read them!
Over the next few weeks I might have to do a little more hacking on this plugin and release an update. Stay tuned. Thanks for reading and commenting!!
**Side note: Are you in the band Last Nights Vice? They’re awesome!! Thanks for including the link.
@login That’s a very meaningful compliment. Thank you and thanks for reading!!
@Trevor Like your blog design. : ) Have you seen my previous write up?
http://www.kpott.com/the-core-of-the-gpl-and-a-cleaner-home
How long have you been using the Clean Home design? How do you like it?
No knock on Rich for his solution, but I’m unwilling to register every single blog to get a new dev key. That site is ridiculous.
I went with the post’s recommended plugin and love what it does for my blog. In fact, I loved it enough that I already threw a few bucks the developer’s way…and I’m not often that sold on a product so quickly. Thanks for the post… high value!
Hi Kyle, thanks for the kind words about Last Nights Vice. In my spare time I make a lame attempts at designing websites. Check out mine and let me know what you think. I could use all the help I could get. I’ll quit spamming your comments now. Send me an e-mail sometime and we can talk tech. I’ll keep checking back for more great posts.
Kyle - it does use the CSS from the existing theme as much as possible in order to create the same look but also gives you another CSS file that you can edit. Not all themes are equal and you do sometimes need to tinker around with it!
With regards to the inconsistent design - if you visit the BBC site on an iPhone or an Android or a Nokia N73, you know it’s the BBC. They retain their brand identity by providing a consistent look and feel. My plugin tries to do the same and hopefully does a pretty good job. If you take a look at the screenshots (http://wordpress.org/extend/plugins/wapple-architect/screenshots/), you’ll see what I mean - and it’ll render perfectly on any device!
Chuck - well it’s free to sign up and once you’ve created one, you can create another 4 (you get 5 free) with a couple of clicks - no need to go through the registration process again!
What happens with this plugin when you visit with a WML browser? Or a CHTML browser? It’s all well and good creating a plugin that caters for iPhones, but you’re alienating 90-odd % of the handset market!
@Rich Gubby Good point about the branding. Something I hadn’t given much consideration to. I suppose I avoid that whole issue by not really having a brand.
I don’t think, “Hey! How’s it going?” counts, does it? : )
I think your “hey, how’s it going” logo would look pretty cool on mobile and it’d make a refreshing change than the standard theme you get with other plugins.
Give mine a try out and see what you can do - I think you’ll be surprised by how amazing you can make your blog look on mobile!
If you need any help at all give me a shout, I’d be more than willing to lend a hand!
This is certainly the best that I read today in the Internet
I recently Installed Wp touch plugin and checked my blog on iPhone and it is working great. Though it was little weird that i had to play with
Super cache but I got it right and now my blog is iPhone optimized.The only thing which is not working is adsense :(, have u tried runnign adsense on it?
@Harsh Sorry, I haven’t tried running Adsense on the plugin because I don’t have any ads running on this site. If you do get it to work, please share your lessons learned. Thanks for reading and commenting!
Why (w/v1.007 on hd2) can’t you copy/paste in the “Update Status” box? The only available options (besides Post) are Clear & Cancel.
I love this site! Thank you sooo much for all your posts!