iPhone UI as HTML

11 Jun 2010 - 9:24am
1483 reads
jabbett
2008

If anyone out there has tried jQTouch - http://jqtouch.com/ - you might have reacted as I did - initial excitement, followed by increasing frustration. It makes for a great demo - a web app with rich iPhone look-and-feel on any device. It's implementation, however, is clearly still in beta.

In particular:

- The CSS is hard to understand, undocumented, internally inconsistent, and a bit buggy
- It only uses CSS3 properties for webkit, and doesn't define the other variants (mozilla, etc.)
- The HTML is semantically confusing, and does not map easily to the iPhone human interface guidelines
- It is not fully implemented - it has basic coverage of lists and input, but offers little advice on content display

Inspired by a number of talks on mobile design, and by jQTouch itself, I came up with this:

http://abbett.org/resources/iPhoneHTML.pdf

It's the first part of proposal for how to accomplish an iPhone look-and-feel in HTML that's well-designed and well-structured.

I haven't started on the CSS yet - since I know that the implementation is fully possible, a proof of concept isn't as necessary.

I would appreciate critique, on both the elegance/validity of the HTML, and my semantic translation of the iPhone UI's widgets.

Maybe this work could feed into jQTouch, if they're open to it, or become a project on its own. Volunteers welcome ;)

Best,
Jonathan

Syndicate content Get the feed