Optimizing Your Web Content for the iPhone

Found this an interesting read on the Apple Developer site:

Safari on iPhone uses the same Web Kit engine as Safari on the computer desktop. With the Safari Web Kit engine, you can develop sophisticated Web 2.0 sites and applications that will impress and delight iPhone users. To design a web application that shines on iPhone and ensures a great user experience... Read More

Things that I personally thought were worthwhile noting:

There are a bunch of misconceptions out there about how Safari on the new iPhone is exactly as the version of Safari on Mac. It’s close but there are variations.

Things to keep in mind that the article pointed out:

  • Mouse does not equal finger. I won’t elaborate.
  • Safari for iPhone does not use scroll bars or resize knobs.
  • Since there are no scroll bars or resize knobs it uses something called "iPhone Viewport" which is a rectangle area that determines how content is laid out and where text wraps on a web page.
  • We’ve been using standards for years. It’s just another reason why we have. iPhone works great with them =) and standards are recommended.
  • iPhone supports it’s own telephone links upon which you can make direct phone calls, use the following: <a href="tel:1-408-555-5555">1-408-555-5555</a>
  • Google maps links open a built-in Google client rather than making a connection through the public website.
  • There are iPhone specific style sheets which are utilized as follows  media="only screen and (max-device-width: 480px)",  for other devices continue to use media="screen".
  •  Popups are blocked by default but is a set preference by the user.
  • It’s noted below but it can be noted again, Safari for iPhone doesn’t support flash. Personally I think it’s just a matter of time before they build a  patch that enables flash but that being said there are most likely many issues that arise when trying to develop an app. for flash to run for iPhone.
  • Use the -webkit-text-size-adjust CSS property to override Safari’s default text size adjustment. The values for -webkit-text-size-adjust are: none, auto & value%.
  • Safari on iPhone does not support file uploading, <input type="file">
  • Image formats supported by iPhone: gif, jpg, png & TiFF

Safari on iPhone does not support:

  • window.showModalDialog()
  •  Mouse-over events
  • Hover styles
  • Tool tips
  • Java applets
  • Flash
  • Plug-in installation
  • Custom x.509 certificates

Read more - Apple Developer Connection

A quick  visual demonstration of Safari in use on iPhone.

(Graphics courtesy of Apple Inc.)

 

to blog