farfromfearless

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.

10 people have left comments

Michael - Gravatar

Michael said:

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!

Posted on: January 2, 2008 at 11:28 pmQuote this Comment
Doug Stewart - Gravatar

Doug Stewart said:

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

Posted on: January 3, 2008 at 6:54 amQuote this Comment
Chris - Gravatar

Chris said:

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

Posted on: January 3, 2008 at 9:02 amQuote this Comment
Chris - Gravatar

Chris said:

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

Posted on: January 3, 2008 at 9:17 amQuote this Comment
Michael - Gravatar

Michael said:

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

Posted on: January 3, 2008 at 11:01 amQuote this Comment
CharliWag - Gravatar

CharliWag said:

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
http://www.ipodtouchfans.com
Great Community!

BTW Deep Rock Drive got featured on tech crunch
here’s the link:
http://www.techcrunch.com/2008/01/04/concert-socialcaster-deeprockdrive-to-publicly-launch-at-ces/
Cheers,
Keep updating your Blog :D
Charli~

Posted on: January 4, 2008 at 8:11 pmQuote this Comment
Chris Murphy - Gravatar

Chris Murphy said:

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!

Posted on: January 7, 2008 at 10:58 pmQuote this Comment
Christina Warren - Gravatar

Christina Warren said:

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!

Posted on: January 8, 2008 at 1:48 amQuote this Comment
Dale D - Gravatar

Dale D said:

Very nice work on this blog
Interface is very attractive.

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

Posted on: January 11, 2008 at 8:40 amQuote this Comment
Tregg - Gravatar

Tregg said:

on an iPod right now ;)

Nice layout!

Posted on: June 8, 2008 at 1:27 amQuote this Comment

Leave a Comment-

Comment Guidelines: Basic XHTML is allowed (a href, strong, em, code). All line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published. Keep it PG-13 people!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

All fields marked with "*" are required.