Designing for the IPad

Question

I'd like for my website to be accessible (e.g., fully usable) through the IPad.

What do I need to do?

Answer 1

General speaking (err... writing) all you need to do is aim to HTML 5 and Safari Specific CSS3 rules, to create gradients, shadows, etc ...

Add some Apple Devices Specific tags like

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name = "viewport" content = "width = device-width">

remember that you can use a css in horizontal mode and other in vertical mode

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

if you, by the way, want to create a native alike visual, I recommend that you see JQtouch and Sencha

keep in mind that some events do not exist in a Touch Device, like "click" (though this majority of the times just work ok), "mousehover", etc ... JQTouch and Sencha are already configured to give you a "tap" event and mouch more events Apple Devices specific.

Answer 2

There is a great online tool for doing iPad targeted web design:

ipadpeek.com

Gives you a full size iPad/Safari emulator online.

Answer 3

I highly recommend having an actual device to test your site on as you develop.

Answer 4

Check out this article; It's about a nice technique for liquid layouts that will make your site look great on a iPad, 30" monitor and even your iPhone ;) http://www.alistapart.com/articles/responsive-web-design/

Answer 5

The iPad primarily uses the browser Safari - or alteast its own version, so making sure it works on there is a good starting point, if you don't have a device to test it on then check the normal safari first. From here you should be able a to find a simulator.

Other mobile browsers can be downloaded as apps, I know opera has hits own app for browsing, also firefox just realised there first version although it only on Nokia at the moment.

Answer 6

Because the Safari browser on the iPad is the most advanced browser in general distribution, you can utilize all of the latest CSS3 and HTML5 techniques without having to hack in support for older non-standards compliant browsers.