Designing and Optimising Websites for iPad
iPad was released a month ago, and is made available in Australia a few days ago, but already, I am seeing a lot of big name companies and brands trying to optimise thier websites for iPad. While I have yet to optimise a website for iPad, I have put together some notes about designing and optimising a website for iPad to help us get started soon.
1024×768 pixel resolution (9.7-inch (diagonal))
This is as big as a normal computer screen. According to the Analytics stats for this Web Development Blog, 10.47% of the total visitors have 1024×768 pixel resolution.
User Agent String
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
This is useful if you have a device detection script on your server that redirects mobile devices to a different website. For example, since iPad doesn’t support Flash, if you have a flash website, it is a good idea to redirect iPad visitors to the HTML version of the website.
CSS for iPad
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
HTML 5 and CSS3
iPad supports HTML 5 and CSS3 so you can go crazy with box-shadows, text-shadows, border-radius, multiple backgrounds, video, canvas and geolocation features on your iPad friendly website.
Neither iPad nor iPhone supports Flash. And Steve Jobs has made it pretty clear that he has no intention of supporting Flash in the near future.
<meta name="viewport" content="width=device-width" />
Use a constant width for viewport rather than a fixed pixel width. Similarly, when it comes to layout design, consider Fluid width rather than Fixed width design.
Touch not click
This is something to bear in mind when designing websites for iPad and iPhone. They are both touch devices and not point and click, so make sure there is enough padding between links (eg: Navigation items) and buttons are large enough to be
clicked touched on.
iPad Friendly Website ≠ Mobile Friendly Website
With iPhone, you can simply redirect to your existing Mobile version of the website for iPhone users, but you can’t do the same for iPad. iPad screen resolution is many times bigger than a normal mobile screen, hence, there will be a lot of whitespace when you view a mobile friendly website on an iPad. For this reason, it is sometimes better to serve the same version of the web friendly website to iPad devices rather than redirecting them to the mobile version of the website which is designed for small screens. And according to Apple, Safari on iPad is capable of delivering a “desktop” web experience.
If you want to check out how your website would look in iPad without an actual iPad device, open this Simulator in Safari browser and type in the address of the website you wish to view in the address bar on the iPad image (not the browser address bar). You can click on the top left corner of the iPad image to switch between Landscape and Portrait mode.
But if you have got a spare $800, you can buy iPad from Amazon Online Store for the real deal.
As always, Apple has a list of iPad ready websites for your inspiration. If you are looking for an iPad friendly WordPress Theme, be sure to check out Mobility WordPress Theme that provides a touch and slide friendly user interface for iPad viewers.
Other similar posts that you might be interested in:
- Making a website iPhone-friendly using CSS
- How to use hi-res images in web apps for iPhone4
- Professional Mobile Themes for WordPress
- Tips on building websites for mobile browsers
- How to use Google Fonts in your WordPress Theme
- Embed a YouTube video iframe in a phonegap app