Request Quote

Starting Guidelines for Tablet and iPad Website Design

September 21st, 2011

Starting Guidelines for Tablet and iPad Website Design

Some Guidelines for Tablet and iPad Website Design

In the last few weeks we’ve been working with clients on extending Mobify Enterprise, our galaxy-leading mobile e-commerce product to include tablets like the iPad.

As a result, we’ve been learning a ton about what works, what doesn’t work and what are some best practices when adapting a website design for a tablet and iPad world.

And we thought we’d share.

This isn’t a definitive list but it does provide a great start if you’re designing for tablets, reviewing wireframes or just thinking about how to reach people who are visiting your website on tablets and iPads.

As our senior engineer Roman Rudenko says, “These are my gut feel guidelines.”

  • Make text larger for readability. Bonus tip: Consider offering a text resizing control.
  • Increase padding and line-height of densely packed links to increase touch accuracy. This applies especially to form elements and calendar dropdowns.
  • Remove mouse hover interactions wherever possible. If you want to keep them, extend them to support tap-and-hold interactions as well as mouse hover.
  • Consider making design reflow-friendly to cover the full range of tablet screen sizes — from 600px to 1000px wide — instead of fixing page widths in stone.
  • Beware the Flash. With iPads such a big portion of the tablet market, Flash elements need to be removed.
  • Remove elements using the declaration (real or simulated) “position: fixed” because they slow down page scrolling on tablets to much greater extent than on desktop.
  • Consider cutting some HTTP requests, as you would on mobile. While tablets have screen area close to that of laptops, their processing power is closer to that of phones. Additional on-page elements like Facebook Connect and Google +1 might fit into a tablet-sized wireframe but real-world performance and user experience can quickly suffer.

Have more tips to add? We’d love to hear them.

Please add them below as comments and we’ll keep building this out.

  • http://twitter.com/inkbase Jason Landry

    As with phones, if you’re planning on doing any animation effects, look at using CSS transitions rather than Javascript animation. Also, if you’re still having performance issues, try using 3D transforms to trigger hardware acceleration.

    • http://adhack.com James Sherrett

      Good additions, Jason. Thanks!

  • Graham

    Consider building a responsive web site. Collapsible floating divs using CSS with inspection elements. This is all covered in A List Apart (search Responsive Design) or just google Ethan Marcotte.

    • http://adhack.com James Sherrett

      Hey Graham, thanks for the comment and suggestion.

      I think if you’re building a site from scratch, considering building a responsive site is a great option, as long as you have the right budget, ongoing tech team and timeline.

      But for existing sites it’s not so simple.

      What we hear from clients and industry contacts is that for existing sites it’s next to impossible to start from scratch. This applies especially for e-commerce or international sites that have big existing investments in the technology and processes to create and manage the site.

Return to Top
Mobify is a platform for launching mobile commerce and content websites – a fast, secure and future friendly One Web solution.