» Designing for the iPhone: Resources

Designing for the iPhone: Resources

September 8th, 2008
Posted in General News

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.

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 application reviews, check out AppCraver.