Preparing your site for Apple’s iPad

With over 300,000 iPads sold on the first day of its launch, this new mobile device is poised to change the future of publishing and the way people consume content on the Internet. As a web designer or web developer, there are a few things you might want to know about how the iPad renders your web page and what you can do to optimize your site for a better end-user experience.

The iPad runs Safari as its browser using the Webkit layout engine and supports the latest web standards – including HTML5, CSS3, and JavaScript. Apple has published a technical document outlining how to ensure that your website looks and works great on iPad and even ow to create touch-enabled web experiences. Here’s a quick summary:

  1. iPad returns a user agent string that will allow you to detect and then serve a mobile version of your site.
  2. The device users W3C standard web technologies and plugins is not supported. As such, Flash will not work on the iPad – you will ned to use HTML5 <audio> and <video> tag instead.
  3. It is recommended to avoid using CSS fixed position as content viewed from the iPad can end up outside the viewable content area.
  4. The use of HTML5 contenteditable tag is not supported; instead use a normal textarea for text input.

For more information on preparing your web content for iPad, please review the Safari Reference Library.