I'd like for my website to be accessible (e.g., fully usable) through the IPad.
What do I need to do?
Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.Sign up to join this community
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">
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.
There is a great online tool for doing iPad targeted web design:
Gives you a full size iPad/Safari emulator online.
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/
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.