Designing for iPhone

[CharlieWon]

I am trying to design the webpage so that people looking at it from an iPhone have optimal viewing. I have figured out designing the page with 320px width and using the meta tag. But how do I put the code in that detects whether the person is using an iphone or not? If you go to Amazons page using the iPhone is detects it and takes you to a specific iphone designed page. Also, it is really great how there is some sort of code that makes the url bar be pushed up when the user enters that iphone designed page.

Are there resources online somewhere teaching how to design with the iPhone in mind? Or could someone slip me a snippet of code?

Thanks a ton!!

[greg]

If I were you would I would do is take some time and signup for an Apple Developer's membership. http://developer.apple.com/

They have a whole section devoted to designing sites and webapps for iPhone, almost all of it is very good with examples. Also if you are interested in really developing for iPhone the SDK will be released next week so you will want to snag that off of the developer site as well. As far as some quick simple things like getting the nav bar to go away, creating some iPhone specific links(google maps, address book, calling...) all that is outlined on the dev site.

Overall if you are just designing a page in general for iPhone just follow a quick set of guidelines:
- if it is iPhone only use the correct page sizes(found in the dev site)
- Create an iPhone webclip image(tells you all the specs in the dev site)
- For linking create large button links(for finger selections) and stay away from drop down menus

For the most part safari accurately renders everything, and even at far stricter standards than IE and Firefox. The only thing not supported yet is flash which should be coming in early March.

[greg]

Oh, sorry, missed one part of your question. For the redirect you can outline it in your .htaccess(if on apache) or just within your website to do a browser detect and redirect to the iphone specific page.

It is all outlined in the dev site somewhere as to what the exact browser name is, I can't recall off the top of my head but you should be able to find it easily

[CharlieWon]

Thanks greg!

I have signed up with the apple development center and have been browsing around in there. I am having a hard time finding where I learn how to hide the url address bar. I have learned that it must have something to do with scrolling the page down? Any ideas where I should be looking in the dev center?

You were right about this place having tons of information! I have been learning a lot!! Thanks for directing me there!

[CharlieWon]

This is the code that I was looking for

'<script type="application/x-javascript">

addEventListener("load", function()
{
setTimeout(hideURLbar, 0);
}, false);

function hideURLbar()
{
window.scrollTo(0, 1);
}

</script>'

[blackimpallass]

CharlieWon, are you redesigning a site you already have or designing a new site? The reason i ask is because I was looking for a company or person who could optimize my website for the IPhone. My site have alot of video, so i know I would need them converted to H.264.

[rob7676]

I have not seen a site yet that wont load correctly on the iphone.

[Izzmo]

I wish I had an iPhone

Have you ever seen that commercial on TV regarding "bank anywhere from True Blue" or whatever bank that is. Capitol Federal I believe.

Is banking really secure on the iPhone? Your signal trasmits via through air, meaning anyone can pick it up, and (maybe) not get in trouble for it since it is in open air. So, is it safe to bank online through the iPhone?