HomeDecorative ElementBlogDecorative ElementE-Commerce
Accelerating E-Sales through M-Commerce: Optimize Your Site for Mobile Shoppers
Explore our step-by-step guide to adopting a mobile-friendly design for your e-commerce page. Learn how responsive design can enhance the experience for smartphone users and increase your sales.

Optimize Your Website for Mobile Commerce

It looks like it's going to be a big year for mobile commerce (or M-Commerce) - the numbers don't lie! Around the globe, the number of smartphone shoppers is on rise and it's likely that many e-commerce websites will soon react and opt for responsive redesign, if they haven't already. In order for e-commerce sites to convert on mobile, they'll have to provide users the resources they need to make a quick, intelligent purchases and responsive design is the most sophisticated way to provide that clean experience for shoppers, no matter which device they are on.

Responsive design will play a huge role in m-commerce this year for another IMPORTANT reason. Google has been sending mass notifications to webmasters alerting them to fix mobile issues found on their site. This indicates that Google is preparing to officially launch the mobile ranking algorithm they've been experimenting with. It seems that if website mobile-friendliness is on the minds of Google search engineers, it should definitely be on the minds of e-commerce owners too!

What is Responsive Design?

Responsive Web Design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.SmashingMagazine.com

Responsive web design is the art of designing websites for optimal viewing experiences, no matter the screen size. This innovative design technique is based on advanced mathematical grids that calculate the appropriate screen sizing for desktops, laptops, smartphones and tablets alike. Page elements get sized in proportion to other elements on the page instead of by their actual size. This keeps your website's formatting intact, even as the user switches from device to device.

Responsive design also considers the fact that mobile shoppers are not using a mouse with a cursor like they would be on a desktop or laptop. Instead, shoppers are using their hands to navigate mobile sites. Without the precision of cursor available, it's important for the mobile version of your site to include larger navigation features that are easy to click on via touchscreen.

As mobile usage continues to rise, the importance of responsive website design will also rise too, especially for e-commerce businesses. Redesigning your website to be mobile-friendly can be quite the undertaking, but the return on your investment is worth it. According to MoPowered, 30% of smartphone shoppers will abandon their shopping experience if the website is not optimized for mobile. Smartphone users simply expect web pages to look and load the same way they would on a desktop or laptop.

Search engines like, Bing, have already started to implement mobile crawlers and mobile ranking algorithms. If soon the mobile-friendliness of your website becomes a Google ranking factor, a responsive redesign may be the only way to combat a huge hit to your rankings.

Are There Other Mobile-Friendly Methods?

Are you sold on the idea that m-commerce is a must-take step for your online store and like the idea of responsive, but want to weigh some other options? You have a smartphone and love your online shopping apps — why don’t you build a mobile app instead?

Although everyone would love to have an iOS or Android app, it’s generally outside the scope of what small E-tailers are able to afford. Not only is building an app expensive, but it's a hassle to keep apps up-to-date. Newer versions of iOS and Android operating systems are constantly released, requiring frequent updates to your code base. Worst of all, the money spent on building an app won't make your website mobile-friendly for shoppers using their phone's native web browser.

To optimize for mobile, you could also create an "m.your-site.com" version of your store. There are usually existing services available that tie into your e-commerce system and provide users on mobile and tablet a completely different view of your store. Though these services can be quick and inexpensive to setup, they come with some major disadvantages.

The biggest disadvantage is that these services create a separate subdomain for the mobile version of your store. The "m.your-site.com" subdomain will be crawled and indexed by Google as a completely separate website from your real domain. This means all the content for your product descriptions and other static content will be crawled twice and considered duplicate content.

Related Posts
5 Essential Magento Extensions for Your E-Commerce Business Should Magento be Your Go-To Platform for E-Commerce? 3 Resources for Amazing Mobile Commerce Stats

What Would Fruition Do?

Fruition.net has embraced responsive design for all of our e-commerce customers for many of the reasons outlined above. As a community, we’re in the perfect place to embrace responsive design at a fairly minimal price. Frameworks like Foundation and Bootstrap have made it easy to create responsive sites.

There are a number of themes available for e-commerce platforms that will quickly get you up and running, but you definitely need to make note of some specific pages and make sure these are optimized for viewing on smaller devices:

  1. Home Page — Be sure you are showing users the most relevant content on this page. The goal should be to allow your customers to enter your sales funnel as quickly as possible.
  2. Navigation — This piece is vital for a mobile optimized e-commerce store. How will your navigation look and work in the header? How will your product filters work so your customers can winnow to their desired products properly? You have to make sure these things are easy and intuitive for your customers.
  3. Product Grid Page — This again goes back to the product filters, make sure these are easily accessible. Also, make sure your products aren’t crammed into the grid view on smaller screens. They need extra attention!
  4. Product Pages — Figuring out what product information is essential to display here is key. Displaying specs and product photos correctly is huge. You also need to make sure your "Add to Cart" button is highly visible so customers can find it.
  5. Checkout and Cart — The Checkout page is the the most vital area of the site. One-step checkouts and mobile payment options are the way to go. Don’t lose customers at checkout!!

By opting for responsive design and taking care to optimize the most important five pages of your e-commerce site, you can bring your e-commerce website into a mobile-friendly 2015 and celebrate huge returns on investing in the mobile movement.

If you're interested in seeing how your website fares out, Google's Mobile-Friendly Test can provide initial insight into whether your website is mobile-friendly or not. Google also provides a speed test for mobile and desktop that is important to pay attention to.

Test Your Mobile-Friendliness Test Your Page Speed

If you'd like to learn more about optimizing your e-commerce site for mobile, please contact the Fruition team! We want to help you build the best mobile version of your website possible. [gravityform id="91" name="Responsive E-Com Contact"]
Post by Taylor Hansen and Chance Carlin

Table of Contents
    Table of Contents+