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.

How To Do Mobile A/B (Split) Testing with Mobify

Over the past decade, digital marketing has evolved and become increasingly metrics-driven. As a result, techniques from traditional direct-response marketing have been reinvented and gained traction in the arsenal of digital marketers and e-commerce professionals.

A/B testing (or Split Testing, as it's sometimes called) is the most popular of these direct-response tactics to be reinvented for a digital age.

A/B testing or split testing compares the effectiveness of two versions of a web page, marketing email, or the like—in order to discover which has better response rate, better sales conversion rate, or the like. A classic direct mail tactic, this method has been recently adopted within the interactive space to test tactics such as banner ads, emails, landing pages or even entire websites. For instance, on an e-commerce website the purchase funnel is typically a good candidate for A/B testing, as even marginal improvements in drop-off rates can represent a lot of additional sales.

Now we can add mobile marketing as another compelling use of A/B testing.

A/B Testing With Mobify

A/B testing on your Mobify-powered mobile and tablet website is simple and easy to implement. Here's a quick guide on how to do it.

1. Choose an A/B testing service

Optimizely is a good choice and we have used it on Mobify.com.

Other options include Google Content Experiments, Visual Website Optimizer and our Vancouver friends at Unbounce.

Any enterprise-grade analytics application like Omniture SiteCatalyst or Webtrends will also have A/B testing baked in, so do a little Googling and you'll find the right choice for your situation.

2. Set up your A/B testing tag

For most of the A/B testing software options above, installation requires you to insert a JavaScript tag onto your web page or use an existing JavaScript tag. This tag triggers the A/B test, routes the traffic and provides the data for your reports.

For your Mobify-powered website, insert the tag below the Mobify tag in the <head> of the HTML document.

If you're using any sort of tag management solution, you'll have to ensure your A/B testing tag is being included on every page you want it included on.

3. Create your A/B test for mobile

Now that your A/B testing tag is inserted you can set up your A/B test.

(If you're wondering what kinds of things you should consider A/B testing, we've included a list of ideas to start from below.)

Set up your A/B test variations and make sure you specify that it's meant to target mobile browsers.

In some A/B testing software, the setting to target mobile visitors setting may take a little searching to find – but don't give up, it's always possible.

For example, in Optimizely, to make sure your A/B test runs for your mobile visitors, specify the setting like this: Options -> Targeting -> + Add more conditions -> Position Conditions -> Use these browsers -> Any mobile browser.

4. Launch your mobile A/B test

Now you're ready to go. Launch your mobile A/B test and see how it performs.

Your A/B testing software ought to have a calculator built in to measure the statistical significance of your test as it runs. If it doesn't, here's an A/B split test significance calculator.

What kinds of thing should be A/B tested?

If you're stuck on what kinds of things on your mobile website that you need to A/B test, here's a list of ideas to start with. They will introduce you to the concepts of A/B tests in action and they may well provide you with some very good optimization value.

  • Simplifying the main menu with fewer items.
  • Moving your action button (in mobile commerce, the Buy or Add to Cart button) up or down on your product detail pages (with the goal of getting the buy button above the fold)
  • Removing any element on your pages that's not essential
  • Adding more product images to your product detail pages
  • Hiding any optional fields where you require input from customers, such as on the checkout page
  • Adding simplified payment options to steamline checkout like Paypal express
  • Changing the words / shape / color or anything on your action button(s) – for example, from Buy Now to Learn More or Try for Free
  • Adding small snippets of microcopy to tactical locations in your customer flow (See microcopy examples.)

Have other ideas for A/B testing or specific mobile A/B testing experiences to share?

Please add share them in the comments below.

Happy A/B testing!

Mobify Wordpress Plugin - Updated

Update: The Mobify Wordpress Plug-in has been replaced by the new Mobify Platform.

Now you can insert one JavaScript tag into your website to activate Mobify and gain complete control over your website on mobile and tablet devices.

Try Mobify here for free

Mobify built and launched a plugin for Wordpress. At the time, we also built integration with other popular blogging and CMS systems like Drupal, Joomla and Squarespace.

These integrations were terrific to help people adapt their websites to mobile devices.

But we found that maintaining all these separate integrations was difficult and time intensive.

We also wanted to be able to evolve the Mobify Platform to embrace cutting edge coding technologies and open it to anyone to use.

As a result, we built a new version of Mobify in JavaScript – Mobify.js. It's open-source and available to anyone to try for free on our Mobify Cloud.

Now with Mobify.js when we do an update to the core technology, it's immediately available to all the systems – Wordpress, Drupal, Joomla, Squarespace – and beyond.

It's actually available to any CMS or e-commerce system.

Try Mobify free here.

Image Optimization for Mobile and iPad Websites

One of the biggest problems in making websites adaptive for mobile devices and tablets like the iPad is image optimization — making sure every user gets the right image for their device.

Images are incredibly important for user experience and e-commerce success.

The phrase "a picture is worth a thousand words" is especially true on mobile commerce websites. Rich product images showcase the details customer care deeply about seeing. Simply put, showing customers the products they're interested in is the best way to get them to purchase.

Yet the huge range of devices people are using and the variable capabilities of each device creates a big complexity problem – How to make sure every user gets the right image for their context?

The previous answer to this question was to send the biggest image and trust their device to figure out how to display it. Usually this meant just sending the standard desktop website image down the wire to mobile and tablets.

Sound like a bad way to deal with the problem of image optimization? You bet.

Well known mobile strategist Luke Wroblewski reports from a recent talk by Brad Frost that, "...the average Web page size is over 1MB and growing. 86% of responsive web designs send the same content to mobile devices."

Just sending the biggest image wastes bandwidth, causes mobile website performance to bog down and generally leads to a user experience that needs big improvement.

Now we're happy to showcase a solution to the image optimization problem. It's new and it's rolling out now as a key part of the Mobify Platform.

The Right Image File For Every Device

When a mobile phone or tablet visits a Mobify-powered website using image optimization service, that device gets just the right images for its capabilities.

If it's a Retina display device like new iPhone and iPads, we serve it a Retina-quality image.

If it's a standard smartphone, we serve it a standard image for its screen size.

In total, we serve the right 1 image from 7 different versions of the image.

And we serve the right image from the nearest point of presence in our global Content Delivery Network (CDN), which now boasts over 30 points of presence.

This has a whole host of benefits for customers on Mobify including:

  • Bandwidth savings — Costs for bandwidth to mobile devices decrease by an order of magnitude.
  • Mobile performance — The mobile website is faster to load and every page is snappier.
  • User experience — Customers experience a website that's fast, responsive and delightful with the best images possible for their device.

Beyond the Rack recently launched with our new image optimization service. Now their website serves over 5 TBs of exactly the right images to exactly the right customers every month.

More customer are launching all the time. They understand acutely how performance and user experience affect conversion rates and their bottom line.

As Google reports:

When Edmunds, a leading car review destination, re-engineered its insideline.com site to reduce load times from nine seconds to 1.4 seconds, ad revenue increased three percent, and page views-per-session went up 17 percent. When Shopzilla dropped latency from seven seconds to two, revenue went up seven-12 percent and page views jumped 25 percent.

....When you speed up service, people become more engaged - and when people become more engaged, they click and buy more.

We want to make the web faster to help people deliver better experiences and better results. We believe the image optimization services does this and makes the web better.

Want to check out the image optimization service for yourself?

We're booking demos now to show you how it works.

Talk to a mobile expert to get started.