Hello, I'm Chris Murphy — I specialize in creating engaging, user-centric interactive experiences.

Fun with Safari on the iPod Touch

My wife gave me an iPod Touch for Christmas, and have to say that it is one of the best Christmas gift's I've received in a long time. One of the big sellers [for me] was the browsing capabilities that came with Safari on the iPod Touch.

One of the first things I did after getting my iTunes library cleaned up and ported over to the iPod Touch, was to develop an Touch/iPhone compatible version of my WordPress theme. I thought it would be much harder than it actually was and to be quite honest, it was far easier designing and developing for the iPod Touch/iPhone than it was for a desktop browser experience.

Not surprisingly, the WordPress community was already developing methods to handle the browsing experience on the iPod/iPhone, resulting in a number of plug-ins such as: iWPhone and WPhone.

I chose to go with iWPhone as my plug-in of choice as it was pretty straight forward to implement and I took the liberty of making one small mod to it. iWPhone allows iPod/iPhone visitors to see an optimized version of your blog theme which is better suited for the kind of browsing experience it delivers. Here are some screenshots from my dev site (you will need to view my blog through your iPod/iPhone in order to see what it looks like live.

screen_01 screen_02 screen_03 screen_04 screen_05 screen_06

There are a few caveats when it comes to creating content for a iPod/iPhone WordPress theme, and two of the biggest gottachs are:

  • Length of your content;
  • Size of your images/media;

The first point isn’t an issue if you’re not the type to write copious content; however the second point is a stickler for all writers. When it comes to including media in your blog such as images and embedded video (that’s another issue), you have to have a method for dealing with the sizes intended for larger screens. Ideally, you have about 320px to work with, less if you like to use margins like I do. the iWPhone theme comes with a nifty little bit of JavaScript that goes through your markup and resizes all of your images. I have yet to extend it for other media (hopefully future-proofing it for when the flash plug-in becomes available). But other than those two points, there really isn’t all that much to hold you back from creating decent themes for the iPod/iPhone.

For some further reading on creating content for the iPod/iPhone, check out the Apple Developer Connection – iPhone Dev Center, and a little bi of “light” reading at the iPhone Human Interface Guidelines wiki.


Comments on This Post:

  1. Michael
    Date: January 2, 2008
    Time: 11:28 pm

    Hi Chris, this is beautiful. I too got an iPod Touch for XMas, and absolutely love it. Any chance you’ll release this as well for download? This is just gorgeous as far as the Safari screen on the Touch goes, much nicer than the plain old theme with the plugins. Anyway though, thanks for the theme for WP, I love it!

  2. Doug Stewart
    Date: January 3, 2008
    Time: 6:54 am

    Thanks for the mention, although I’m a bit confused by your “I chose to go with…” comment. We don’t play in the same space as iWPhone. Theirs is a full front-end blog theme engine, while ours is a retooling of the back-end for mobile devices. Regardless of platform (Symbian, Palm OS, WinCE, iPhone/Touch) you’ll see a nice interface. It’s just the Webkit/Apple devices that’ll get the nifty high end interface. *grin*

    Anyways, thanks again for the link.

    -Doug Stewart
    WPhone Plugin developer

  3. Chris
    Date: January 3, 2008
    Time: 9:02 am

    Hi Doug, thanks for your comments, and sorry for the confusion; I suppose I should clarify here :D

    I chose to go with the iWPhone plug-in as a singular solution for my readers rather than as a solution for myself as a author. I tend to write lengthy postings and even though I love my iPod Touch, I type fast and “pecking” at the keypad was too frustrating; however, I did like WPhone for the fact that it was a far better user experience in terms of managing the general features of my blog (moderating comments, checking stats, etc.). I would use it for that at the very least, but authoring is still something I would prefer to do on my laptop through a browser or Windows Live Writer. :D

  4. Chris
    Date: January 3, 2008
    Time: 9:17 am

    Hi Michael, I’ll be releasing the “Pistachio” theme at the same time I release v2.0 of my Lemon Twist theme. I’m incorporating some new features into the theme which should make it a lot more fun to play with :D

  5. Michael
    Date: January 3, 2008
    Time: 11:01 am

    Thanks Chris, I’m Looking Forward To It :)

  6. CharliWag
    Date: January 4, 2008
    Time: 8:11 pm

    Hi Chris :)
    Thanks for the new theme release :)
    Been waiting for many many months :)
    I to got a iPod Touch and I love it.
    If your looking to enhance it try this website
    Great Community!

    BTW Deep Rock Drive got featured on tech crunch
    here’s the link:
    Keep updating your Blog :D

  7. Chris Murphy
    Date: January 7, 2008
    Time: 10:58 pm

    Charli, thanks from sticking around and being patient while this theme was slated for public release. I’ve come to the decision that I’m not going to do a complete redesign of this site until fall at the earliest. What I will be doing is releasing incremental updates to “Lemon Twist” which will see minor tweaks such as refactored CSS and better case handling for plugins, not to mention enhancements to the overall funtionality. This iPod/iPhone theme will be in the next set of publicly available themes — as usual, the source files will be released for modders :D

    Thank you for tuning in!

  8. Christina Wa…
    Date: January 8, 2008
    Time: 1:48 am

    Oh this looks great! Modding your site specifically for the iPod Touch/iPhone is such a great idea. I look forward to playing around with it. Thanks Chris!

  9. Dale D
    Date: January 11, 2008
    Time: 8:40 am

    Very nice work on this blog
    Interface is very attractive.

    Would you have a screenshot of the interface on an iPhone?

  10. Tregg
    Date: June 8, 2008
    Time: 1:27 am

    on an iPod right now ;)

    Nice layout!

  11. Justin
    Date: August 2, 2008
    Time: 12:34 pm

    Hi, I too own an iPod touch and envy the safari browser very much, I also love your new iPod/iPhone compatible site too!
    Did you know that safari (windows and mac) can change the user agent? Meaning you can test your site on your computer to “emulate” you using an iPod or iPhone? Its under the develop toolbar, which you gain access to by selecting it in options. :)

  12. Tim
    Date: September 29, 2009
    Time: 4:56 pm

    Just tried to send an email via your contact form but on hitting submit, I got a “invalid token” error and my fairly long message had disappeared!

    Let’s try this:

    I notice on my iPhone that your site still displays nicely. But I tried iWPhone and the display was empty. I then tried out WPtouch and my site displays great on the iPhone. In fairness, the iWPhone folks claim compatibility only to WP 2.5, but I’m wondering what you’re using now to display your site on PDAs?



  13. Best Wordpre…
    Date: September 29, 2009
    Time: 5:42 pm

    [...] first site I found, FarFromFearless.com that talked about PDA-friendly blogs touted the plugin iWPhone WordPress Plugin and Theme. However, [...]

Add a Comment: