This blog now has a new, custom iPhone theme, replacing the previous plugin-based theme. It’s based on the principles laid out in A List Apart’s Put Your Content in My Pocket, using CSS and a layout optimized for iPhone and other small screen devices. It also restores the benefits of caching and the search feature. None of the iPhone emulators respond to the layout cues, but you can see a preview to the right.
The project was a great challenge: optimizing a single, cached copy of each page for both large and small screen devices. In addition to using CSS to hide secondary features and resize the important parts to be readable and functional, I employed some Javascript manipulation to hide the remainder of posts and provide the “…” more links. Safari doesn’t have a native XPath implementation for Javascript manipulation of the DOM, but there’s a very compact XPath and XSLT library for Safari available. The CSS and Javascript is all open, so feel free to have a look.
Next up: an iPhone theme for my photo gallery.
del.icio.us/mbotos
