Designing Websites for the iPad

The iPad is implanted in our conscious as the high end tablet of choice for professionals. Remember: CEOs love their iPads.

Who buys iPads? The majority of people who buy iPads already have desktop computers, laptop computers and smart phones. The iPad is a luxury purchase. And, with the cheapest iPad selling for around $500, that’s a pretty expensive luxury in a recession.

What do they use them for? It’s easier to say what they don’t use them for. They’re not generally used for doing accounts or the usual “home office” type tasks which is the domain of the home PC. They’re not being used for casual social media interaction as this is more the domain of the laptop and the smart phone. They’re used, I think, for gaming and good old-fashioned media consumption.

So, there are two things you can say about iPad users – they have time and money. And that makes the iPad a very important device.

iPad visitors on my site

Taking the three months from June to August there were a total of 6,397 mobile visitors to this site. Of these at least 2,472 were from iPads.

Although this is a small proportion of the total unique visitors I had to this site during the same period (94,749) – it’s the pages per view and time on site figures are interesting: 1.82 pages per visit and an average time on site of 1:52 minutes. Well above the site’s average. Confirming my suspicion that the iPad user is consuming information in a relaxed and sedately fashion.

How to cater for the iPad crowd

There are several ways to produce content for the iPad.

• Do nothing! Produce websites in the same way as you’ve always done and let iPad people pinch and zoom to navigate around them.
• iPad detection using PHP and JavaScript to redirect the user to a different iPad only design.
• Make a website responsive to iPads and use CSS media queries to display website elements according to the width of the device.
• Make iPad apps. Definitely the most costly and difficult option. But potentially the most rewarding as well.

For this site at the moment I am preferring the third option as it is developed from the Streamline responsive theme from Genesis. That is an affiliate link and I may get a commission if you make a purchase after having clicked on it.

CSS media queries for the iPad

The iPad’s main browsing area is 1024 pixels by 768 pixels. Of course, there’s no right or wrong way to hold an iPad. If you hold an iPad so it shows a landscape or horizontal rectangle, most websites will display normally as their width is unlikely to be greater than 1024 pixels.

However, if the tablet is being used in the upright or portrait orientation, the website needs to fit into the fairly narrow 768 pixels width.

This gives a cleaner design which goes along with the iPad user’s habit to relax and read!

This is how Streamline gets rid of the sidebar on the portrait view. For starters, in the “normal” CSS, the whole website’s content is in a containing div called #wrap. Most websites have a containing div which is sometimes called #wrapper or #container or something like that.

#wrap { width : 960px; margin: 0 auto; }

This #wrap div is set to be a width of 960px and the left and right margins are set to “auto” which centers the element. These values, along with many others, change when the device viewing the website has a width of less than 960 pixels wide.

@media only screen and (max-width: 960px) { #wrap { width: 100%; margin: 0; } }

So now the container of the website, instead of being 960 pixels wide, will fill the width of a browser window if it is less than 960 pixels wide.

But how do you get the sidebar to drop down below the content area in the portrait view of the iPad? First lets look at the “normal” CSS for the main content div (.content-sidebar #content) and the sidebar (.sidebar).

.content-sidebar #content { width: 642px; }
.sidebar { width: 316px; }

Similar to the #wrap div example, they have fixed widths. And added together they come to more than 768 pixels – the width of the portrait iPad view. So, again similarly to the #wrap div, they change to 100% width and fill the browser window when it is less than 960 pixels wide.

@media only screen and (max-width: 960px) { .content-sidebar #content, .sidebar { width: 100%; } }

As both elements (the main content area and the sidebar) are now 100% in width, the sidebar drops beneath the content area because of their order in the HTML.

Other considerations for designing websites for the iPad

Don’t use Flash; use HTML5. But you knew that, didn’t you?

There are no hover states on the iPad. As you use fingers on the iPad, rather than a mouse, the hover states may be redundant and you should check if they work.

For example, the drop-down menu on this site (as well as all other Genesis sites), uses the Superfish jQuery plugin. You can see it in action by hovering over the Portfolio link in the top navigation bar. When hovering, you will see the sub-pages, Web Design, Logo Design and Print Design drop down. You may decide to click on the Portfolio page or choose one of the three sub-page options.

On an iPad it works differently: one tap on the Portfolio shows the options and you can then choose to tap either on the Portfolio link again to get through to the Portfolio page or tap on one of the three links that have dropped down.

This works quite well on the different devices. However other drop-down menus may not be so successful on iPads so it is advisable to check.

What you can do

Do you have an iPad? What do you think about the portrait view of this site? What do you think about your habits in using the iPad as opposed to connecting to the web via a different device?

We must all think about displaying content on different devices via different mediums in the best possible way.