Meet Joe Hewitt, iPhone Web App Interface Guru
Many of the developers I’m talking to at today’s iPhoneDevCamp keep dropping the same name: Joe Hewitt. That’s not just because Joe (pictured above) is a well-known Firefox developer. He has also hacked together a set of templates that greatly improves the presentation and usability of any iPhone web application.
Joe’s template set, which he has just posted to his site, includes a native-looking iPhone skin — a set of PNG files and some stylesheets to give pages the “iPhone chrome” look and feel. There’s also a JavaScript component that iPhonifies the navigation. It gets rid of the Safari toolbar, forces the pages to flip like a native app and adjusts the page elements to look consistent when the phone is spun between the portrait and landscape modes. You can read more about Joe’s templates at Ajaxian. A good number of developers have adopted Joe’s skin, so it’s well on its way to becoming the “default” look for iPhone web apps.
The disappearing toolbar makes perfect sense — when loading pages into the iPhone’s Safari browser, the toolbar takes up a large chunk of real estate at the top of the screen. By inserting one line of JavaScript, you can force the browser to automatically scroll just beyond the bottom of the toolbar, letting your app take over the entire screen. Joe has posted details about this simple hack on his blog.
Joe and his two cohorts here at the camp are working on a game utilizing the iPhone’s gravity sensors. Your character in the game has differently shaped indentations on the sides, and spinning the iPhone rotates the character so you can catch differently shaped falling objects. Can’t wait to see that one.
Oh yeah, Joe has also hacked together a tiny version of Firebug to run on the iPhone so you can debug the JavaScript in your web apps. Busy man!
