Web Development Blog

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.

Screen Resolution
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">

As with optimising websites for iPhone, you can specify a CSS file just for iPad devices. You can also have different CSS for Portrait and Landscape orientations without using Javascript. This is useful if you want to hide certain elements (for example, sidebar) on Portrait orientation.

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.

JavaScript
As with iPhone, Javascript is supported on iPad. This will enable your iPad friendly website to have web 2.0 features, AJAX, dynamic content, and animation effects. If you are looking for a good Javascript Framework to use, check out jQTouch which is a jQuery plugin for mobile web development.

Flash
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.

Viewport

<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.

Preview
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.

Inspiration
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.

Found this article useful? Share it with your friends: