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

, October 17 2012

Mobify Studio: the Fastest Way to Build Adaptive Mobile Websites

Today we're happy to publicly announce our new product for web designers and web developers to build amazing mobile websites – Mobify Studio.

Watch the video introduction above from our VP of User Experience, Dave Shea and read the full press release below.

Better yet, try Mobify Studio for free.

Read More →

, October 12 2012

Mobify in Harvard Business Review on Open Source

Mobify's CEO, Igor Faletski, shares some of the lessons we learned going open source with Mobify.js in the Harvard Business Review.

In early 2012, my company made the decision to open source a key piece of our technology platform. We open sourced Mobify.js, our core framework that enables web developers and designers to create a mobile-friendly version of their website. "Open sourcing" means to make software's source code publicly available, so that anybody can recreate the software or modify it to make their own version.

Read the whole article with some excellent comments here: Open Sourcing May Be Worth the Risk.

If you like it, please share or give it some love on Hacker News or Reddit.

Then be sure to learn more about Mobify's commitment to open source.

, October 10 2012

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!

, August 30 2012

Book Now: Mobile Website Reviews at Shop.org Summit

Have you ever wanted a mobile commerce expert to review your mobile website?

What if you have the chance to ask specific questions about performance, design, usability and conversion optimization?

If you're coming to the Shop.org Summit in Denver, Colorado, September 10 to 12, you'll have your chance.

Our VP Marketing James Sherrett will be there doing 20-minute sessions called "The Doctor is In: One-on-One Website Critiques" focused on mobile.

If you're coming to Shop.org Summit, you can book a session in advance though the Shop.org website. Deadline for advance bookings is this Friday, August 31.

We've got James in rigorous training up until Shop.org to give retailers maximum value in their one-on-one sessions. If you're there, make sure you take advantage.

Here are all the details on Shop.org Summit 2012.