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

POSTED:
January 2, 2008
Comments: 13
Next Entry
Previous Entry

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.

farfromfearless

Posted: January 2, 2008
Comments: (13)
Permalink
Follow This Post: RSS 2.0

farfromfearless on Twitter

[+]

Readership is built through quality content that provides value... anything less is just traffic. (via @nickf) 2010-05-10
Well put: RT @pmonks: Finally posted a new blog entry: The Case for Killing 'ECM': http://bit.ly/c08TUj #cms #ecm (via @IanTruscott) 2010-05-05
Good thing were down wind--none of the sparks are heading this way. Time to up the home insurance. 2010-05-05
New urbandale homes near my place are on fire--you can see the sparks and smoke from the bedroom... 2010-05-05
Christening the new grill--thanks #BroilMate !!! 2010-05-02
More updates...

POSTED:
13 people have left comments
Add a comment

Comments on This Post:

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!
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
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

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.
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
Michael
Date: January 3, 2008
Time: 11:01 am

Thanks Chris, I’m Looking Forward To It
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
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
Charli~
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

Thank you for tuning in!
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!
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?
Tregg
Date: June 8, 2008
Time: 1:27 am

on an iPod right now

Nice layout!
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.
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?

Thanks!

Tim
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, [...]