Friday, July 6th, 2007

iPhone Native Looking Skin

Category: iPhone, Mobile

<p>The default look of a web page is pretty bad. Simple white background with ugly black lettering. Nothing nice.

With the iPhone though, it doesn’t look half as bad, and now, thanks to Joe Hewitt (again) there is an even better base.

You can simply use his native looking navigation skin to make your applications look and feel like a native iPhone application.

The magic sits in:

  • iphonenav.js: The JavaScript handles getting rid of the browser url bar, the back button (Safari finally supports changing the hash nicely!), changing based on the orientation, swiping a page across, and more.
  • iphonenav.css: The CSS makes the standard elements look like real iPhone elements thanks to magic like “-webkit-border-image: url(iPhoneButton.png) 0 8 0 8;”

There is still more to do of course. It would be great to give developers simple access to the red deletes, the blue buttons, the twisty round deletes, and more. This allows anyone to build an app that will look decent and just like the iPhone apps that users are used too.

Thanks again Joe!

Joe's iPhone Skin

Related Content:

Posted by Dion Almaer at 12:55 pm
13 Comments

++++-
4.1 rating from 77 votes

13 Comments »

Comments feed TrackBack URI

I’m starting to believe Joe is not one man, but a team of 100 people working under one name.

Comment by Maarten — July 6, 2007

I’ve been searching for this for days! (Yeah, I was being totally lazy and not wanting to do it myself.) Thanks to the pointer to Joe’s work!

Comment by Woody — July 6, 2007

You may be right Maarten, but I wouldn’t be surprised if Joe were Apple themselves.

Comment by Jonny — July 7, 2007

Nice work! Thanks.

Comment by jan korbel — July 7, 2007

If it looks like it then people expect it to work exactly the same, including gestures etc.

Again a massive problem with most web “application” developers, they don’t understand looking like something is not the same as being something.

Comment by terry — July 7, 2007

I’m working on turning this into a proper library — I’ve got it up on Google Code:

http://code.google.com/p/iui/

Enjoy.

Comment by Kristopher Tate — July 7, 2007

If it looks like it then people expect it to work exactly the same, including gestures etc.
Again a massive problem with most web “application” developers, they don’t understand looking like something is not the same as being something.

But if you’re developing an app for the iPhone, and it’s on the iPhone, it does behave like an iPhone app for the most part. There are more functional gestures in iPhone’s Safari than in, say, the Weather app-widget.

You don’t get everything in SafariPhone but it’s not a total kludge the way a lot of web-apps-impersonating-desktop-apps are.

Comment by Trevor — July 7, 2007

I don’t think it’s works in IE…
I wish I can get this kind of interface for a menu in my website.

Comment by Mgccl — July 7, 2007

Joe,
Great job — your iphonenav.css and iphonenav.js are getting a lot of use here at iPhoneDevCamp in San Francisco this weekend!

Comment by Mike Brophy — July 7, 2007

First, this is way cool.
I thought I’d add something to my site for my friends who now have an iPhone. I do family news every month, and the navigation translated very well. It worked great. But then I tried it in Safari, Firefox, and IE on both Windows and Mac. I got some unexpected results. The only place it works perfectly is in Safari for Windows. What’s up with that? It’s pretty amazing that it’s even semi-functional in IE on Windows.
I see that your developing it as a google project, any chance you might make it cross-browser/platform?

Comment by Scott — July 8, 2007

I don’t know anyone with an iPhone as I am in Australia but thanks for this code and the idea to create an iPhone podcast network app looking page.
http://www.photogeek.tv/iPhonePG.html

Comment by Philip Greenwood — July 8, 2007

I’ve been searching for this for days, too! Guys, you are amazing, big thanks from Latvia…

Comment by askripko — January 18, 2008

Unlock any iPhone worldwide from £7.99 with iUnlock from Unlock iPhone HQ. Tailor made iUnlock packs that unlock just your particular iPhone Version, i.e. iPhone 2G on 2.2 firmware using a Windows Machine. Guarantee a successful unlock!

Comment by UnlockiPhone — December 21, 2008

Leave a comment

You must be logged in to post a comment.