Mobile Magento Themes: Why You Need a Mobile Commerce Site

by on March 16, 2012

Mobile Magento Themes

mCommerce is huge! Just how huge?

“In the last twelve months, customers around the world have ordered more than US$1 billion of products from Amazon using a mobile device,”

Jeff Bezos, Amazon.com (July 2010).

The mobile era has arrived. As the first all-in-one desktop and mobile Magento theme, Avalanche addresses the need to provide a great mobile experience for your customers.

In this article I’m going to cover mobile commerce essentials and how Avalanche Mobile will meet your customers’ expectations for a quality mCommerce website.

First let’s cover the most important criteria for a mobile website:

  • Blazing Fast Speed & Performance
  • Ease of Use & Solid User Experience
  • Device Compatibility

Speed & Performance

Speed is far and away the most important. No questions asked. With Avalanche I sought to create a good balance between design, functionality, and speed. I wanted the site to load quickly but I also wanted to design a mobile website built for the future.

In Avalanche Mobile you’ll find a variety of configuration settings that improve speed such as JPEG compression. During performance tests the slowest loading resources were the product photos. If you take down JPEG quality to 50% performance should improve on 3G/Edge connections.

I used image sprites for the top menu icons. This reduces the amount of resources to load when first visiting the website. Most of the design is entirely in CSS3 so graphics were kept to a minimum.

Mobile Magento Theme Speed

User Experience

My primary focus when designing Avalanche Mobile was delivering a “WOW” user experience. I wanted to build a mobile website that almost behaved like an app and included some truly amazing features. I started from scratch and built my way up. No bloated mobile JavaScript libraries or frameworks. Just HTML5, handcrafted CSS3, and a lightweight JavaScript library that weighs less than 8k.

Before adding the bells and whistles I sought to perfect the basics. What do customers expect while using a mobile commerce website?

  • Simple homepage.
  • Search.
  • Full access to navigation and catalog.
  • Product page with photos and reviews.
  • Cart and checkout optimized for mobile.

All of the following are essential to any mobile commerce site. When fitting Magento for the mobile world I had to determine which form elements are most useful on a mobile device. For example, should we use an input box or a select dropdown to change the quantity? Should radio product options stay radios or should they become dropdowns for easier access?

Avalanche Mobile UX

The biggest difference in Avalanche Mobile vs. any mobile commerce site out there is the catalog navigation. It’s faster and easier to access. You don’t start off on a homepage with a menu. You don’t have to return to the homepage every time you want to browse the navigation. You can open the menu from any page and select a new category.

Avalanche Mobile Browse Catalog

I also had to take a closer look at filters and sorting. How are they supposed to be handled in mobile? Using lightboxes, dropdowns, and buttons I wanted to make it easy to get around the catalog.

Avalanche Mobile Filters

The product page was simplified and only includes the most important info, such as a quick overview and reviews. After installing Avalanche Mobile you’ll be able to write custom mobile descriptions for each individual product in the admin panel.

Cart and checkout, in my opinion, look fantastic. It’s easy to change quantity and remove products with buttons. The checkout includes checkmarks to signify your progression. One Page Checkout works perfectly on a mobile device by separating the checkout process into steps and not overwhelming the customer.

Avalanche Mobile Checkout

Compatibility

For now I decided to support iPhone and Android, but compatibility with newer Blackberries are in the works. The majority of your mobile audience will browse and purchase products on your eCommerce site via iOS (iPhone, iPad) or an Android device. Based on my experience, half of mobile sales come from tablets and the rest from smartphones. Avalanche Desktop is served for iPad and other tablet devices.

In Summary

Based on the stats I’ve given you it’s crucial that your company has a mobile commerce site! By providing an online shopping experience tailored for mobile and understanding the essentials like speed and ease of use, your conversion rate will increase.

Design and architecture decisions for Avalanche Mobile were discussed to give you an idea of the challenges involved when building a mobile commerce site. You can use our premium Magento themes as a starting point or even as a full solution. I recommend saving time and money with quality themes.

Mobile Q&A

Should I build an app or mobile website for my store?

Use a mobile website. Consumers prefer to shop using their mobile web browser. While some larger e-tailers provide iPhone/Android apps for a smoother experience in addition to a mobile website, it’s better to focus your resources on a fast mobile website that supports a variety of devices.

Which mobile devices should my store support?

Ideally you’d want to support as many as possible. However, at this time Magento relies on the Prototype JavaScript framework for everything: Form validation, checkout, and more. Your mobile device needs a decent browser to handle Prototype. For Magento sites I recommend providing support for iPhone and Android at a minimum. Currently iPhone and Android are the most dominant platforms in the smartphone industry. iPhone/iPad and Android will account for most of your mobile sales.

What about mobile commerce SEO?

In December 2011, Google announced that Googlebot-Mobile now crawls smartphones by specifying a different user agent:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

So yes, mobile commerce SEO will be very important in the future. If you have a mobile website right now the best thing you can do is avoid duplicate content issues. Avalanche Mobile detects the user agent string and shows a mobile version for iPhone and Android. This is the correct approach to take. A problematic example would be to make a subdomain such as “mobile” and display the mobile version regardless of the user agent.

Very soon mobile SEO may impact Google Mobile Search. I’m monitoring the space and I’ll keep you updated.

Should I use responsive web design for mobile or build a separate mobile store?

You may hear the popular term “responsive design” floating around from developers and designers while they’re discussing the benefits of having a website that adjusts to every imaginable resolution. Responsive design relies on CSS media queries to show and hide different areas of content to the customer depending on the device/browser resolution. This means you can use one design for everything, including mobile phones.

While responsive web design is very powerful for certain use cases such as blogs and simpler websites, in eCommerce you want two different designs: One for desktop and a lightweight version for mobile. Speed is crucial and you sacrifice performance when you load everything from the desktop version on to a mobile phone. That’s what happens with responsive design since you’re not removing features, you’re simply hiding them with CSS. With a separate version you can choose which features are loaded, optimize images, reduce resources, and deliver streamlined code with less file size.

That’s the approach I took with Avalanche Mobile. Front-end speed was one of my top priorities, but it’s still up to the store owner to optimize even further by using techniques such as full page caching and minification. Poor performance (especially on mobile), will cause your conversion rate to tumble. Don’t risk it with responsive design. Serve two different experiences to accomodate slow 3G and wireless internet providers!

Previous post:

Next post: