Recently I have been working on a project, the final output of which, is an iPhone application that displays content in html. 

Of course to do any actual application development, you are going to need a Mac and the iPhone SDK, but in my case I am simply developing a web based system that is creating and editing the content that is then fed into the iPhone application.

My challenge though, was previewing the content before it went to the app – so I could check the layout etc on either my Windows pc or online within the content management system I was building.

My first goal was to find something for my Windows PC – once I had that available to me, and I was happy that it was displaying content roughly the same as on the iPhone application, I could use that as my baseline for testing and build out an online version within the CMS for a live preview function.

Well the options seem pretty few and far between! The two viable options I could find are:

1. Firefox iPhone Emulator
   This is a Firefox add-on that emulates the iPhone. It looks interesting, however, it requires installation of Netbeans, which is a bit heavy I felt, so I haven’t tried this one. 
    
2. iBBDemo
   This is a nice little emulator from Shaun Sullivan at Blackbaud. I’m pretty happy with how it functions and it uses Webkit, just like the iPhone application does, to display the html. Be warned though: the instructions state you need to download and install the latest version of Safari – don’t! This does not work with Safari 4.0 – in order to get it to work you will need to download Safari 3.2. I found it here. Aside from that, it looks pretty good! Given that it does not work with Safari 4.0, my concern is that it will become out of date as changes are made to Webkit which are contained is newer versions of Safari.

And now the online versions….

So there are two that I found worthy of praise: 

1. TestiPhone
    Of all, I found this the best mix of convenience and accuracy, particularly when viewed in Safari. What impressed me most was that when compared to the same content on an iPhone, though the display was larger, the text spacing, layout etc was very accurate: lines ended almost exactly the same.   

   The major disadvantage I found was that the pages I was testing required vertical scrolling: when viewed in Firefox, the scroll bar was show, which reduced the width of the page, this messing up layout. On other browser types, no scrolling was possible, which was even worse. I solved this by rewriting the emulator in my own test page with some Javascript to scroll down the page, thus maintaining correct width, but allowing scroll, just as in the iPhone. Let me know if you would like the code…
    

2. iPhone Tester
    In many ways, I should applaud this one for being more honest – when not being viewed in Safari, it gives a warning saying it is best viewed in this browser. Practical advice given you are testing an iPhone page – Safari is the best place to do this.   

   In terms of layout and function, it was very close to the TestiPhone site above, but lost points for: showing a scroll bar automatically, thus breaking layouts, and having messed up navigation: every time I entered a url and hit enter, it gave an error and I then had to click on the suggested link….

My inline preview utilises TestiPhone code as a baseline and no complaints so far.
So if you don’t have a Mac or an iPhone, iBBdemo or TestiPhone are my recommendations!