Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

What do I need to do?

share|improve this question
4  
Pay tribute to the mighty Jobs... –  adamcodes Jul 8 '10 at 19:38
add comment

6 Answers

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
see also jquery mobile jquerymobile.com –  Ken Liu Oct 31 '10 at 3:50
add comment

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

ipadpeek.com

Gives you a full size iPad/Safari emulator online.

share|improve this answer
add comment

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/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.