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