Designing for the iPhone: Resources

37 Signals once said about designing for the iPhone:

Designing for the iPhone is like a hybrid of print and web design.

The web we all know is rife with uncertainty. We don’t know the viewer’s screen size or resolution, we don’t know the gamma of someone’s screen, we don’t know if they’ve got a certain typeface and/or exactly how that face renders on in their browser, we don’t know the browser they’re going to use, etc.

But paper, on the other hand, is full of controls. Fixed size, fixed faces, fixed colors. What you print is exactly what someone sees (assuming you’ve done your homework on color and paper, etc).

So the iPhone is a weird mix. It’s the web, and things can scroll, and the data is pulled from remote servers, but it’s also a fixed width, a fixed browser, fixed typefaces, etc. It’s pretty cool and a really refreshing design exercise.

It’s very true. Getting to design for the iPhone is just FUN. No worries about cross-browser testing, no worries about having to cater to outdated technologies. What you design is what you get!

Here are some resources to get you going with your iPhone design project.

Photoshop files

Free iPhone PSD file for icons / snapshots / whatever

iPhone GUI PSD

iPhone Interface PSD File

iPhone Icon Style .psd Kit

Official Apple Resources

iPhone Dev Center
Video: Introduction to the iPhone SDK (free registration required)
Graphics & Animation Coding How-To’s

Tutorials

Learn How To Develop For The iPhone

Designing for the iPhone (when you’re not holding one)

Create a Slick iPhone/Mobile Interface from any RSS Feed

Designing for iPhone (list of several websites with iPhone interfaces)

Ask E.T.: iPhone interface design (video included)

Practical eCommerce: Website Design for the iPhone

iPhone Icons

Designing for the iPhone (part 1) (favicon)

How to create a custom Apple iPhone icon for your Web site

How to create a Webclip iPhone Icon using Photoshop

Evolution of the Delivery Status Icon (very cool animation of its progress)

Useful code snippets

Detecting the iPhone with JavaScript:

<script type="text/javascript">
  if (navigator.userAgent.indexOf('iPhone') != -1) {
    {
      // Do something iPhone Specific!
    }
</script>

Set the iPhone viewport size:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Put that in your web pages head section. If you want to force a static width, change “device-width” to a specific size. The iPhone’s screen dimensions are 320 x 480px.

Scroll down to hide the menu bar on page load:

<script type="application/x-javascript">
	addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false);
	function hideAddressBar() { window.scrollTo(0, 1); }
</script>

For more iPhone news and reviews on the latest iPhone apps, check out AppCraver.