Wired

Webmonkey

  • Web Dev & Design
    • Ajax
    • Backend
    • Blog Publishing
    • CSS
    • Databases
    • Fonts
    • Frameworks
    • HTML
    • HTML 5
    • JavaScript
    • Mobile
    • Multimedia
    • Programming
    • Security
    • UI/UX
    • Web Standards
  • Software & Apps
    • Browsers
    • Software
    • Web Apps
  • Platform & APIs
    • APIs
    • Identity
    • Location
    • Social
    • Web Services
  • Reference
    • Color Charts
    • HTML Cheat Sheets
    • Special Characters
    • Glossary
    • Templates
    • Code Snippets
  • twitter
  • facebook
  • RSS Feeds
Jul 7 2007
File Under: Events

Meet Joe Hewitt, iPhone Web App Interface Guru

  • By Michael Calore

750214294_e2fa2d1537_b

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!

  • Post Comment  | 
  • Permalink
  • Digg
  • Stumble Upon
  • Facebook
  • Delicious
  • Reddit

Comments (4)

All fields required
  • Posted by: koreyel | 07/8/07 | 12:32 pm

    Get real.

    To call a chrome interface a hack is like Bogart calling a bearded guy in a wig a Dame.

    Until the iPhone can be purchased and booted up without giving ATT’s net-neutrality hating CEO a cent… until then… all Joe and his empty izealots are doing is imasturbating.

  • Posted by: bill | 07/8/07 | 1:32 pm

    Always making good things better! Way to go, Joe. Bill

  • Posted by: Joe Cooper | 07/10/07 | 12:28 pm

    koreyel, what good have you done for the world, lately?

    If you’re not using Firebug daily, then you’re not doing serious web application development (or you’re doing it poorly and more slowly than you need to).

    Attack AT&T and Apple all you want, but really, what good do you hope to accomplish attacking folks who are doing great and useful work for free? (Not that I imagine Joe gives a crap what a random internet doofus thinks of him, but still, it seems like poorly placed aggression that would be better spent in more productive directions.)

  • Posted by: Karen | 08/1/07 | 11:50 am

    The first thing I thought when iPhone announced that it would be using Safari was, “Nooo, what about Firebug!” Now, thanks to Joe Hewitt, I have an excuse to get one, hehe. I’m exaggerating a little, but as a developer, I don’t like to think of an internet without his (beyond fabulous) Firebug…PS, I read his blog entry about the toolbars on the iphone http://www.joehewitt.com/blog/iphone_tips_loo.php , and I’m going to try to get that implemented on our site asap!

Webmonkey's Picks

Browse Our Tutorials

HTML, JavaScript, design and more

Cheat Sheets

HTML, CSS and special characters

Color Charts

Brighten up your pages

Cut & Paste Code

Templates and snippets you can steal

Recent Comments

  • MangoMen on Turn Your WordPress Blog into a Forum
  • James on Code Optimizers Can Make View Source Useless
  • Arieh on 5 Reasons Why You’d Want Internet Explorer on the iPhone
  • Arieh on 5 Reasons Why You’d Want Internet Explorer on the iPhone
  • adwords on Get Started With AdWords
  • Recent Articles

  • Code Optimizers Can Make View Source Useless
  • Mozilla Labs Seeks to Tame Your Address Book With ‘Contacts’
  • Chrome Web Browser Adds Automatic Translation, Better Privacy Controls
  • Internet Explorer 9 Shows Up Faster, But Still Lacking
  • Opera on the iPhone? Yes, and Soon
  • Corrections | Sitemap | FAQ | Contact Us | Wired Staff | Advertising | Press Center | Subscription Services | Newsletter | RSS Feeds
    Condé Nast Web Sites:
    Webmonkey | Reddit | ArsTechnica | Details | Golf Digest | GQ | New Yorker

    Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/1/2009) and Privacy Policy (Revised 4/1/2009).

    Wired.com © 2010 Condé Nast Digital. All rights reserved.

    The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.