Friday, July 6th, 2007
iPhone Native Looking Skin
<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!
Related Content:
- Why does Mozilla look different on some apps?
4.2 rating from 72 votes
I’m starting to believe Joe is not one man, but a team of 100 people working under one name.
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!
You may be right Maarten, but I wouldn’t be surprised if Joe were Apple themselves.
Nice work! Thanks.
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.
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.
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.
I don’t think it’s works in IE…
I wish I can get this kind of interface for a menu in my website.
Joe,
Great job — your iphonenav.css and iphonenav.js are getting a lot of use here at iPhoneDevCamp in San Francisco this weekend!
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?
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
I’ve been searching for this for days, too! Guys, you are amazing, big thanks from Latvia…
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!