5 Steps to make your site IPAD Friendly

Introduction of Ipad has created lot of headaches for website developers ( and some extra work for companies like ours ). Noting down some learning from our experience of optimizing a site for Ipad.

1. Detecting IPAD and redirect to IPAD Version of website.

Optimizing your website for Ipad

Here we are assuming that the current site does not work in Ipad at all and required a totally new site. Mostly this occurs when the site has significant flash content. To detect visits from IPAD Browsers, We need to add a script as following

<script>

if ((navigator.userAgent.indexOf(‘iPad’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {

document.location = “http://www.inavista.com/ipad/index.html”;

}

</script>

This script will redirect IPAD visitors to a pre-defined page (Which should be optimized for IPAD).

Note : You can add more user agents using the same script if needed.( Eg. ‘iphone’)

2. Detecting Portrait and Landscape modes

As you might know, tilting ipad moves the screen from a portrait to landscape mode and the consequent realignment required to make the screen navigable.

If your website is not just a static website , You may need to use separate CSS Files for both Portrait and Landscape Modes for better performance. In some cases, even a different design will be required to show menus.

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

<<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

3. Use Jquery or Other Javascript Libraries Instead of Flash widgets

Steve Jobs and Apple does not like flash. We have found Jquery to be the best replacement for flash effects.

Eg:

Flash Version : www.inavista.com

Jquery Version : www.inavista.com/ipad

4. Use percentage on CSS
It will be good to change all dimensions in to “Percentage” from ‘px’ / ‘em’.
Maximum width of an IPAD website should be 1024px and minimum must be 768px
5. IPad Testing
To test your site on Ipad properly, obviously you need an Ipad but its not always easy to get hold of one. Some alternative below.
Best option is to run the site on the simulator that can be download to mac but for those who don’t have mac either, the following options are worth a try. One can get a general feel of the issues with these.
Ipad geek : http://www.ipadpeek.com/
AIR IPAD: http://www.merhl.com/?page_id=58