Mobify Developer Blog Mobify
, October 24 2012

5 iPad mini Web Design and Development Early Best Practices

iPad Mini

The arrival of iPad mini has been widely anticipated. To anyone paying attention, the  arrival of the iPad mini should not be a revelation. The only somewhat surprising fact is the iPad mini doesn't ship with Apple's vaunted Retina display.

We wanted to know how the iPad mini would affect our work (we power $100-million in mobile commerce and empower over 75,000 developers with our adaptive mobile web platform).

So we tapped into our in-house design, development and product expertise and put our minds to thinking about how best to build for the iPad mini.

Summary: The most popular thing to do on an iPad is surf the web. Yet existing desktop and mobile websites won’t gracefully adapt or perform well on Apple’s new iPad mini because it is a new device type with a screen size between mobile and tablet – too large for mobile experiences, too small for desktop experiences.

Overall, we anticipate the iPad mini will be seen as a huge leap forward in the mounting evidence that every modern websites needs to be adaptive to meet demands of visitors using any and every device. In particular, websites whose revenues are directly linked to the quality of the experience they provide to customers – e-commerce vendors, multi-channel retailers and media companies – need be adaptive starting now.

The bottom line? If you want to be relevant on the web today your website must adapt and perform on all the devices that use the web.

Quick History: Desktop Websites on Tablets & iPads

We’ve found that for the most part, standard desktop sites can work on a full-sized iPad. Provided they avoid major obstacles – Flash elements or modal windows – desktop sites can be an underwhelming but passable experience to present to tablet visitors.

Tablet web experiences improve immensely with some adaptive enhancements: touch-enabled interface elements; larger buttons; and smart input forms that use the device’s capabilities. We regularly see increased conversions and effectiveness when websites are designed specifically for tablet devices (like this one for Ideeli), not with one-size-fits-all designs that just happen to accommodate tablets.

But a desktop site won't work on a seven-inch iPad mini. A typical 12-pixel font will be unreadable. The buttons will be unclickable. The form inputs will drive people away.

At worst, a desktop website will look broken. At best, a desktop website will be hard to use.

The closest comparison experience is to viewing a desktop website on a mobile device. It’s painful with all that pinching, zooming, targeting tiny links, and panning around to read any text.

That’s a similar, painful experience as your visitors will have viewing your desktop website on their iPad minis. So what can you do?

Here are five ways web designers and developers need to rethink website delivery for iPad minis in today’s post-PC, multi-device universe.

1. Desktop Websites on Tablets are Dead

Let’s start with the obvious: your desktop website alone isn’t going to cut it.

If you have a mobile website, you can consider sizing it up to accommodate the iPad mini screen. If you have a tablet website, you can consider sizing it down to accommodate the iPad mini screen.

Of these two options, we anticipate that sizing up a mobile website will be the best approach as a starting point.

But this is a Band-Aid solution. It’s time to address the big question of how to make your website adaptive to all devices. The world is shifting.

We live in a multi-screen world where Google reports, “90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV.”

As a device closely related to the smartphone, we anticipate the iPad mini will fit into the above graphic between smartphone and tablets – as a tool people will use in the setting (car, bus, home, office, beach) and context (productivity, leisure, research, entertainment) they choose to suit their needs.

So your website has to adapt to all the various ways people will use it. Here are some starting guidelines to make that happen.

2. General Tablet Design Guidelines

Now let’s get to some of the nitty gritty details of designing for tablets, like the iPad mini.

To start, we’ve compiled these general guidelines from designing for tablet devices.

The new wrinkle with the iPad mini is a new screen size. So, first ensure that your design accommodates a 1024 x 768 pixel-sized screen (same as iPad 1 and 2) in both portrait and landscape orientations, then start with:

  • Bigger text – Make text larger for readability, with a minimum font size of 14 pixels.
  • Better padding – Increase padding and line-height of densely packed links to increase touch accuracy. This applies especially to form elements and calendar dropdowns.
  • Removed hovers – Remove mouse hover interactions wherever possible. If you want to keep them, extend hover to support tap-and-hold interactions as well as mouse hover.
  • Content fluidity – Consider making the design flexible to cover the full range of tablet screen sizes – from 600px to 1000px wide – instead of fixing page widths in stone.
  • Banished Flash – With iPads clinching such a big portion of the tablet market, Flash elements must be removed.
  • Faster positioning – Remove elements using the declaration (real or simulated) "position:fixed" because they slow down page scrolling on tablets much more than on desktop.

Bonus tip: Devise your own tablet design guidelines by observing what people say, what they do and how those are sometimes the same and sometimes different. Talk to your users and listen to what they say. Then review your analytics to see what they do. Where your observations diverge, we recommend using data to guide your decisions without being deaf to what people are saying.

For example, one recent tablet enhancement we discovered was immensely beneficial was a text resizing control. In interviews, users said they loved it because they didn’t need to use their reading glasses. In analytics, users showed they loved it with deeper sessions and a better conversion rate.

Each website’s tablet design guidelines must come from the specifics of its situation so start with your users and respond to their needs. Read on for how to do that.

3. Surprise: User Habits May Vary

The iPad mini may have the same 4:3 aspect ratio as the iPad and it may be called an iPad, but it’s an altogether different creature from the tablet that’s already sold over 100-million units.

Apple's new "middle child" sits somewhere between the iPhone and the iPad. We anticipate the size and form factors of the seven-inch device will make it more portable than the iPad and yet much more of a personal device, like the iPhone and iPod Touch.

A different form may also mean different function for the iPad mini.

For instance, we think the iPad mini will be a huge hit for commuters and travellers who can easily slip the seven-inch screen into a handbag, laptop bag, purse or carry-on case. People will use it for content snacking, distraction, entertainment and productivity. We predict that iPad mini users will seek out and engage in immersive experiences: e-books; movies and videos; games and other types of entertainment; reading in medium and long form; social media like Facebook and Twitter; and shopping and product research.

Of course, we’ll need to wait and see how iPad mini user behavior emerges. But once patterns emerge, it’s imperative you understand user habits and be able to build experiences that people return to. For foundational understanding, we always like to revisit the three modes of mobile usage:

  • Repetitive Now users are seeking recurring real-time information, such as stock quotes, sports scores and auction listings.
  • Bored Now users are seeking distraction, entertainment or connection through a mobile device on services like Facebook, Instagram and Twitter, or in their email.
  • Urgent Now users are seeking urgent information on their mobile device that is often related to location or activity, mostly through search engines and recommendation sites like Yelp or Foursquare.

We’ve gone in-depth to unpack these modes in this blog post: Three Modes of Mobile User Experience.

And no matter how people use your website, the #1 requirement across all websites and all kinds of web usage is that the experience is fast.

4. Performance: Not Optional

The iPad mini will connect to the web by wifi and by cellular networks so its performance will resemble a smartphone more than a full-sized desktop computer.

To succeed in designing and developing for the iPad mini, web builders will need to respect performance constraints, both in delivering content and in running content on the device. Here are some best practices to ensure your customers get a snappy and satisfying experience.

  • Cut down on HTTP requests. While tablets have screen areas close to that of laptops, their processing power is much more like 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.
  • Optimize your images. The iPad mini boasts a beautiful, high-definition display that's not quite Retina quality but close. It’s tempting to serve the largest possible image to the device and then let it take care of downsizing the image. Don’t be tempted! Not taking responsibility for your images is digitally wasteful and makes for a poor user experience. Serve the right images to the right device, full stop.
  • Manage scripts and styles. You know all those JavaScript snippets in your web page and CSS styles, or stylesheets, that load for desktop visitors? Yeah, your iPad mini visitors don’t want them slowing down the page and sucking up device resources. Use a service like Jazzcat to concatenate JavaScript and CSS.
  • Choose CSS transitions. For animation effects on the device, use CSS transitions rather than JavaScript animations. They’re faster.
  • Bonus tip: Use 3D transforms to trigger hardware acceleration. Your users will thank you with increased usage.

The last word in iPad mini performance is this common refrain – you can’t simply deliver your desktop website and expect everything to be dandy.

So how to deliver an optimized website for the iPad mini?

5. Go Beyond Responsive and Get Adaptive

Responsive design techniques are almost certainly going to be part of your approach to building for a multi-screen world of devices, including the iPad mini. They are part of our approach, too.

But responsive design is just one element of an overall adaptive approach that incorporates more than just front-end CSS.

As Brad Frost puts it in his excellent presentation, Beyond media queries: anatomy of an adaptive web design:

Responsive web design by definition is defined as fluid grids, flexible media and media queries. However, it’s part of a much broader adaptive philosophy/strategy. Because the term has grown in popularity, it should come to define all that goes into crafting multi-device web experiences.

So call it responsive or adaptive, the critical idea is to maintain a One Web approach. That is, to use open web standards like HTML, CSS and JavaScript, and to deliver an amazing experience to your users through the same URLs.

If your website is not too complex, the simple tactics of responsive design may provide a full-enough solution – fluid grids, flexible media and media queries.

But, as soon as you get any complexity, big responsive design pain points arise, such as:

  • Image management and optimization – Images for different devices and displays need to be available, but it’s hard to manage images with responsive design. Here’s a good overview of responsive design image optimization issues.
  • Resource management and optimization – Beyond image management, overall resource management – images, scripts and CSS primarily – is not part of responsive design but has a huge impact on a website experience.
  • Content reflowing – Responsive design uses the property display:none and is very limited in how it can manage content display.
  • User Interface (UI) elements – Many devices work best with specific UI elements tailored to that device. Form inputs, menus, image sliders all are examples of UI elements that work best when they’re specific to a device type.
  • Tables of data – Combine the pain of images and content reflowing and you have the problem of dealing with tables in a responsive design. Some partial solutions exist but they’re very challenging to implement.

Responsive web design is a great series of techniques for front-end layout. What it needs now is better tooling and advanced functionality to address some of the gaps and pain points that remain.

The reason that 86% of responsive website simply deliver the same HTML pages – with all associated image, script and code resources – to all devices – is because it’s hard to do otherwise. Instead of doing the hard work, most responsive website spray their data to every device and pray it will work out in the browser.

The addition of the iPad mini and its projected sales success makes the need for a fully adaptive approach more critical than ever before. Now is the time to start investing in an approach that’s future friendly.

We have a vision to mobify the web – to make it amazing on all devices.

We’re working on products, strategies and approaches that make responsive and adaptive websites, and that ensure one website will work on all screens no matter the size, shape, pixel density, user interface elements, or new variable aspect yet to be invented.

If you’d like to see what that means today, try out Mobify Studio for free.

Get the Ultimate Guide to Tablet Web Design

Hope that article was useful for you!

Would you like to receive more mobile web tips in your inbox, right when we publish them?

Subscribe to Mobify’s Developer Blog!

You'll be joining a community of awesome, like-minded mobile developers.

And you'll get articles full of mobile web development tips and tricks, in your inbox, right when we publish them.