Step 3.
Well, this is really something like step 10. I didn’t post for a few days and now I have this running on the iPhone, and on the emulator seen here:
I used tables to get the bubbles looking right and to automatically size themselves, within certain bounds, to the size of their content.
I used iScroll, a JavaScript library, to keep a static header on the page while the content scrolls like most other iPhone apps. In the browser, there appears to be two headers but when the page is saved to the home screen, it can then be opened without the browser address bar that is normally shown. It looks like an app!
Positioning things and getting the images to look right too a few hours this evening. My daughter was very helpful since she has an iPhone and could capture screens from the built-in SMS messaging program and my web page for comparisons on the PC zoomed way in.
The next step is to use AJAX to build the content in the background and then update it as data is available.