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.

Apple-iPad-3

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.

mobile visitors

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.

iPad portrait

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.

drop-down-menu

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.

Comments

  1. says

    I just had a look at my own stats and just as with your site, a fair number of users seem to be using iPads to browse my blog. This is something I hadn’t realized before.

    A quick question though (I’m no css wizard …) Does the “normal” wrapper div stay in the style.css file when you add the “@media only” statements?

    • says

      It’s interesting to have a look at the devices your visitors use.

      Yes, you can have one “style.css” file which has all the “normal” declarations (body, #wrapper, p, a, h1, etc., etc.) and then at the bottom usually (although it doesn’t have to be) you have the media queries, for example @media only screen and (max-width: 960px) { } and these styles take effect when the browser window is less than 960 pixels.

      Generally speaking the “normal” CSS declarations take up about 90% of the CSS file and the media queries are surprisingly short. They just adjust the way the main containing divs behave.

      I hope this rambling answers your question. Thanks for the comment, Alexandra.

  2. says

    I love testing my site(s) out on my wife’s iPad and my Android phone. I enjoy seeing what’s good, what needs improvement and what just needs taking off.

    That said, I do rely more heavily on reactive framework and so reading post did make me take a think about each site. Having said that; i’m quite happy that without me know it the frameworks seem to have defaulted to a great screen resolution for all formats. Though it certainly something I will be paying more attention to in the future.

    Quick question, not listed in screenshot but how do you find Android stats over iPhone. Only most Android phones do cater for larger screens; even with the iPhone 5 announcement.

    • says

      It’s really good you’ve got access to a variety of devices in your home, Sean. I’m not sure if I really understand your question. Are you asking how many of my visitors use Android compared with iPhone? The answer is not many – I seem to attract a lot of Mac users here! Or are you asking how I find out the stats? That’s in Audience > Mobile > Devices in Google Analytics.

  3. says

    I too believe that responsive design is the way to go. It took a bit of extra work to do it, but it has been well worth it. I have optimized my site for iPad & iPhone. Much of my portfolio content was done in Flash, so I use alternative video content; this way the user can still see the work when the Flash player is not available.

  4. says

    Rob I saw your tweet and went here well I am commenting here using my iPad. I never really thought it that way,, that is that those who have an iPad has time and money and knowing that in marketing will make a big difference in our efforts. And for the record, your website looks really neat on my iPad :) How about mine what do you think? I really like Genesis themes for wordpress for they work really well with mobile devices.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.