Wordpress – mobile optimization
Posted on | November 22, 2008 | 20 Comments
since learning about ready.mobi earlier this week, I spent the better part of my evenings checking my own sites for mobile compliance – with, aehm, mixed results. for my wordpress-blogs I’ve been using a combination of iWPhone for iPhone-specific rendering, and Wordpress Mobile Edition for all other mobile devices. since the latter only comes with a very bare-bones-theme, I’ve adapted the iWPhone-theme for other handsets (see my company site, f.e.).
in real-world-experiments, this plugin-tag-team works quite nice. but boy was I disappointed when I ran ready.mobi against my blogs – all of them scored around 1-2 of 5 possible points – devastating. wrong DTD, invalid markup, exceeding of page-size-limits, missing cache-headers etc… certainly enough reason to try out a completely different solution – enter MobilePress.
while MobilePress basically does the same as both aforementioned plugins (=choosing a different theme depending on the browser’s user-agent), it avoids most of the pitfalls listed above, which results in a ready.mobi-score around 4… I started to smile again… 
even better, MobilePress supports different themes for different devices, so it combines the functionality of both iWPhone & WP Mobile Edition in a single plugin – removing plugin-clutter is always nice, right?
altough MobilePress works quite nice out-of-the-box, here are some further recommendations for optimization:
- remove (or out-comment) the wp_head & wp_footer-functions, as they tend to clutter your mobile theme with javascript-code not really necessary on the handset
- choose the right XHTML Mobile Profile / XHTML Basic-DTD for your requirements – this article at mobiForge might help
- use the W3C-validator to check if your theme really validates against the DTD chosen!
- use the ready.mobi-crawler (registered users only) to check not only your frontpage, but your whole site
- for manual switching to the mobile-version of your blog, just link to “./?mobile”. to link back to the full version, link to “./?nomobile”. easy!
- no matter how much fun it may seem to spend the night with Validators, compliance-checkers and your favorite editor – try not to get too anal about mobile compliance – as stated before, other solutions work quite well, in real life, modern handsets etc.
if you’re using a different Wordpress-setup for mobile rendering, I’ld be glad to hear from you in the comments! Update: Here’s a screenshot of my blog as rendered on the iPhone…
Comments
20 Responses to “Wordpress – mobile optimization”
Leave a Reply
November 25th, 2008 @ 8:35 pm
awesome article about optimizing WordPress for mobile using MobilePress – http://tinyurl.com/65olfk (pretty graphs too).
November 25th, 2008 @ 9:24 pm
Thanks so much for the article. I have been wanting to create a mobile friendly version of my blog for a while now and then had somebody complain the other day that on their blackberry my site was painful to read.
In a perfect world what I would love to have happen would be to redirect the visitors on mobile devices to a version of my site that would be a glorified RSS feed.
November 25th, 2008 @ 9:32 pm
Hi John, glad you liked it!
I really recommend trying out Mobilepress: in the end it’s exactly what you’re looking for: a glorified RSS-feed! (maybe I should post a screenshot)
November 28th, 2008 @ 9:23 pm
nice writeup. now that i got 50 megs a month included in my plan, i started surfing in the tram instead of playing pacman
i’m pleased to see that my stock wp hosted blog looks o.k. on my mobile (although there’s not much to mess up). but sooner or later i’ll have to host my on wordpress setup and mobile compliance is one of the main aspects.
November 29th, 2008 @ 2:52 pm
if you plan on switching to self-hosted wordpress, I’ld recommend to do it soon – no good idea to switch the domain/URL of your blog once you’ve got some readers… contact me if you need some webspace
December 11th, 2008 @ 8:59 pm
excellent article. Thanks. I had been using wp-pda and it did a decent job, although when testing on ready.mobi it assumed it was a normal page, not a mobile page. After implementing the mobilePress that boosted my score from 2 o 4 and load time dropped dramatically!
I can view anything on my Nokia N95 with skyfire, but still feel many things just need to load fast and be easy to read. No one wants to have to shrink and grow the content on a page just to see where they are on it or what the content is. no what I mean?
December 11th, 2008 @ 9:36 pm
[...] re-published from source: Wordpress – mobile optimization :: nonsmokingarea.com [...]
December 11th, 2008 @ 10:58 pm
glad you liked it!
I’m using an iPhone, so mobile-optimized sites might not seem to be an issue…but after a few days on iPhone, the novelty of pinching & zooming websites looses wears off, and you’re glad about every site which is optimized for mobile use.
thx for the backlink!
December 12th, 2008 @ 1:12 am
sorry, I can make it clearer if you like. I truncated the title to fit the beginning, “re-published from source:”
December 12th, 2008 @ 8:28 am
fine with me, I just didn’t notice the “re-published from source” at first…peace!
January 15th, 2009 @ 4:32 pm
I found some tips about Mobilepress for Wordpress here: http://is.gd/f0Tr
January 30th, 2009 @ 1:02 pm
The problem with all the wordpress plugins for mobile is that they default to showing the recent posts. I have a recipe website and would like to let people access content on their mobiles using cusine selections and search. Does any plugin allow me to customize this?
January 30th, 2009 @ 4:30 pm
Wordpress PDA & iPhone http://imthi.com/wp-pda/ really does a great job Kunal… it shows posts on my page based on how I set it up, ( believe I show 8 or something)… but it will show more than just one post, unless that is the post that was linked to.
January 30th, 2009 @ 4:33 pm
@kunal: with MobilePress it should be pretty easy to customize this… at least if you’re using Wordpress-categories for your cuisine selection…
January 30th, 2009 @ 6:59 pm
Thanks…yes I am using wordpress categories. Ill try both options.
January 31st, 2009 @ 12:09 pm
@Michael the mobilepress search box does not seem to search through tags. Do you know if there is any way to enable this?
January 31st, 2009 @ 3:07 pm
@kunal hm, it’s the standard wordpress-search that is used, so it also includes tags (just tried it out). are you using wordpress own tag-feature, or are you using any plugin (that might be a problem?)
February 21st, 2009 @ 12:49 pm
[...] – möglich wird das durch das tolle Plugin MobilePress, das für mich die ganze Arbeit abnimmt und nicht nur meiner Meinung nach überlegen gegenüber ähnlichen Plugins [...]
May 11th, 2009 @ 11:51 pm
I got to know about this plugin few days back and I installed it on my blog. The plugin works great. Though the downside is due to adsense or any advertisement code , it make your blog look ugly in mobile. If you are not using any adsense code around your blog posts. This plugin will be very handy to get an extra edge from mobile internet users.
August 27th, 2009 @ 11:33 am
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!