Wordpress - mobile optimization

Saturday, November 22nd, 2008

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…

new toys for web-developers…

Tuesday, July 31st, 2007
  • XRAY is a point-and-click tool that exposes CSS-attributes, inheritance-hierarchy and screen-dimensions of any DOM-element. since XRAY is a bookmarklet, it works not only with Firefox but Safari/Webkit as well.

XRAY

  • Yahoo’s YSlow is a plugin for popular Firefox-extension Firebug. YSlow analyzes a webpage’s performance and assigns grades (A-F) regarding number of HTTP-requests, use of expire-headers, use of gzip-compression,  DNS lookups, javascript/css-bloat etc. linked sections from Y!’s developer network explain how to improve the various benchmarks. highly recommend!

YSlow

dev: create on-the-fly graphics on websites

Tuesday, October 3rd, 2006

Mahemoff’s Software-As-She’s-Developed-blog gives a brief overview on eight methods for creating dynamic graphics within the browser. besides more obvious choices like SVG/VML (Vector Markup Language, Microsoft’s equivalet of SVG) or Flash, the post also introduces lesser known options like the Canvas-element (think of a fully scriptable -element - currently supported by Firefox, Safari & Opera) or CSS-based graphics libraries. don’t get too excited though, as most methods are not supported by all browser-platforms yet.

dev: XHTMLized

Tuesday, July 4th, 2006

XHTMLized is a service claiming to convert your design-comp (think photoshop) to XHTML/CSS in max. 5 days - for an astounding average rate of 150 US$. potential customers can request a particular quote by uploading the compostion. XHTMLized promises valid, accessible and search-engine-friendly code. they even promise a money-back-guarantee in case you’re not satisifed with the results. this is in fact a very inclining offer.

XHTMLized is a collective of 12 developers currently looking for reinforcement (probably a good idea, since TechCrunch reported on about them today).