Getting Your WordPress Themes Ready for Apple iPad
So you want to get your themes ready for the newly released Apple iPad? Worry not, take a deep breath and follow this simple checklist:
- Do nothing.
Done. And no, that is not a joke. Generally you won’t have to do anything since iPad’s Mobile Safari is a full-fledged browser comparable to desktop browsers, supporting modern web practices of (X)HTML/CSS/JS and even HTML5 and CSS3.
There are some points I want to mention, though: design consideration, specific things you can do on iPad’s browser, and more.
iPad has a resolution of 1024 x 768 pixels in landscape orientation, and (obviously) reversed for the portrait orientation. Any website with a width larger than the current viewport will be scaled down and zoomable. If your theme is designed to be around 960 pixels wide, which I believe is the most widely used width, it will then show up full scale the way you intended it.
iPad does not support Flash. I don’t think there are that many themes that uses Flash, but if yours do, it might be a good thing to find another alternative.
As a note, Degradable HTML5 audio and video is a neat WordPress plugin that automatically enables HTML5 native playback for compatible browsers (including Safari), and degrades to Flash player for older browsers, and further to a download link for ancient browsers out there.
Things you can do on iPad
This page specify a bunch of things you can specifically do for your website on iPad. A few things you can do are:
- Specify a width for the viewport,
- specify a home screen icon,
- disable scaling and zooming,
- detect orientation changes,
- conditionally load CSS for Mobile Safari
I do not currently own an iPad, and this article is done after reading and learning through these links:
- Apple’s list of iPad ready websites
- Preparing Your Web Content for iPad
- Safari HTML5 Audio and Video Guide
- Safari CSS Visual Effects Guide
- Safari on iPhone Graphics, Media, and Visual Effects Coding How-To’s
- A List Apart: Put Your Content in My Pocket Part I and Part II.
- How to fit your website for the Apple iPad
- jQTouch, a jQuery plugin for mobile web development. Includes useful functions such as Swipe Detection and Animations.