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

, August 23 2012

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.

, August 20 2012

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.

, August 7 2012

Hint and Reveal: Mobile Design Tip to Extend Small Screens

What's a key mobile design tip that we provide to customers building on the Mobify Platform all the time?

A mobile design tip that unlocks their mobile design thinking and helps them build amazing mobile experiences?

Hint and reveal.

Here's the hint. See the two designs below? Both use hint and reveal.

See what we're talking about? Here's the reveal.

Both these designs hint at content beyond the frame of the mobile device, then they reveal that content when the user swipes, taps or scrolls to access it.

Hint and reveal can be accomplished in a number of ways. The image carousels above that bring in content horizontally when swiped are just 2 examples.

Another common example is accordions that expand when tapped to reveal richer, deeper content, like these on the Mobify mobile site.

Simple right? The mobile screen is not the end of the content.

Instead, think of the mobile screen as a frame that people pull content into when they're interested in that content.

In the practice of interaction design this approach is called Progressive Disclosure and is effective to share information within limited constraints of attention.

Solving the Constraint of Small Screens

The main challenge that hint and reveal tackles is the limited screen size of mobile devices. Designers often refer to the screen size as the 'viewport.'

Even Facebook uses hint and reveal for their secondary navigation. Here's how it works.

Tap on the navigation menu item in the mobile web view of Facebook and you'll see the screen slides to the side to reveal the full navigation.

Yet the screen doesn't disappear. It remains in view to reassure users that they haven't lost their context, they've just triggered a separate pane.

Benefits of Hint and Reveal

Applying hint and reveal as a mobile design tactics has some outstanding benefits:

  • Invites interaction — Users get a chance to start to play with the mobile website and explore what it has to offer
  • Expands the screen — Designs can be larger than the frame of the mobile devices without cramming everything on screen at once
  • Inspires control — Users who interact and get a predictable result are users who are in control and confident on your mobile website

Under the covers, hint and reveal relies on a fast and reliable platform to live up to the expectations it provides.

Without that speed of reaction and reliability of interaction, hint and reveal would not be effective and would hurt user experiences.

Want your mobile designs to be fast and reliable? We use the Mobify Platform. You should too.

We are also constantly developing UI modules like a touch-enabled image carousel to help people with these issues.

Try Mobify here for free.

Subscribe to our blog

Get regular updates to help you create amazing adaptive web experiences.