Ecommerce Tips From A Magento Expert: Building and Designing a Responsive Ecommerce Website

responsive-ecommerce-websiteOnce a marketing department has decided on a mobile responsive site strategy and a general design look and feel, it's time to think about specific design elements. In particular, marketers need to think about how site navigation will differ from device to device, how content should adapt to different browser sizes and how the site provides a responsive experience to the user rather than just a responsive design.

Site Navigation for Smaller Devices

Sites that haven't been designed with mobile in mind can be incredibly frustrating to navigate from a tablet or smartphone browser. Sometimes, navigation buttons are cut off completely; other times, users must scroll horizontally to find them on the site. The other extreme of the equation includes modified navigation menus that don't give users easy access the content that's on the desktop version of the site.

The most common way that companies have solved the mobile navigation bar problem is to consolidate all the navigation options into one drop down menu that can be accessed from a single button labeled "Menu." A similar option, as demonstrated on Disney.com, is a small, square button on the left-hand side of the screen that leads to a slide-out menu with various navigation options.

When creating site navigation for smaller screens, keep these points in mind:

People will be using fingers and thumbs. Almost every smartphone owner knows the experience of trying to click a link or a button and pressing something else instead by accident. Apple's own recommendation is to make buttons at least 44 x 44 pixels to allow people to press the button they actually intended to press.

It might be better to move navigation to the bottom of the page. One possible menu solution is to turn off the navigation at the top of the page when the screen size reaches a certain break point. The user can instead press a button at the top that takes them to footer navigation at the bottom of the site. This prevents space-hogging menus at the top of the page, requires less coding and forces the website visitor to spend some time on the landing page before making a decision about where to go next.

There's no need to reinvent the wheel. There are plenty of plugins, many of them free, that will create responsive navigation menus. Most of them are jQuery based with a little bit of extra CSS coding to add. There are a variety of these plugins already available, giving developers the chance to choose the responsive navigation method that will work best for their site.

Thinking About Content and Layout for Small Screens

Making sure that the site's most important content is mobile-ready is one of the strongest arguments for mobile-first design, especially when eCommerce is involved. Eye-tracking studies from six and seven years ago revealed that website visitors read websites in an F-shaped pattern. First, they look at the top line horizontally, reading from left to right. Then, they skim the second line from left to right, but they often don't scan as far to the right as they did on the line above. If the user doesn't hit the back button at that point, he or she then skims down the page, creating the stem of the capital F (Source).

What happens to that F-shaped pattern when a user's vision is confined to a 3 or 4-inch screen? Marketers should expect that the F-pattern shifts into an I-shaped pattern. That is, there's only one direction for a user to skim on a mobile phone: down.

In traditional eCommerce website design, designers place the "Buy Now" or similar call-to-action button either at the top right corner of the page, such as Amazon.com's desktop site, or at the bottom of a product description. Marketers should rethink the placement of their call-to-action buttons for mobile devices, however.

An image followed by a product description and then a "Buy Now" button makes perfect sense on a desktop device. When the browser width shrinks, though, the narrowed column containing the product description suddenly becomes quite long. Finding the call-to-action button then requires a great deal of downward scrolling. Given that many website visitors rarely make it to content located below the fold, there's a good chance the call-to-action will be lost.

Instead, follow Amazon.com's lead. When products are viewed on a smartphone, Amazon displays an image of the product, a one-sentence description and immediately places a "Purchase options" box with large, easy to press buttons. Other products display with an even simpler format, placing the "Buy Now" button well-above the fold.

Ecommerce on Smartphones is Growing Rapidly

Amazon, whose business has always been online, already understands what many eCommerce sites fail to grasp: Retail sales are moving to smartphones and tablets in the same way they once moved onto the Web in general. To get a better picture for the intersection between online sales and mobile devices, take a look at the following statistics:

67 percent of consumers who use mobile phones for online shopping are more likely to buy from a site they consider to be "mobile friendly" (Source).

52 percent of mobile shoppers state that a bad mobile experience makes them less likely to engage with the company in the future (Source).

Online commerce using mobile devices shot up 81 percent in 2012; by 2016, experts expect 24 percent of all online commerce to be conducted on mobile devices (Source).

During the 2012 holiday season, 70 percent of shoppers used their mobile phones while in retail stores to help them with their purchase decisions (Source).

Creating a Responsive Experience Rather Than a Responsive Website

In a July 2013 article for WIRED Magazine, author Joelle Kaufman argues that developers need to start thinking beyond responsive websites to responsive experiences. A responsive website, at its root, merely shrinks the size of the site to fit on a user's mobile device. That approach to mobile design, she says, does not go far enough to ensure a positive user experience with the site. Just as Amazon has done for years, mobile sites should be able to suggest products based upon customers' previous visits, making the site easier to navigate and easier to use when visiting from a smartphone that's much slower than a desktop computer. Technology is robust enough to provide a user's location, shopping history, browsing history and so forth; why shouldn't corporate sites take advantage of this data to provide the best mobile experience for each individual user?

Furthermore, it's not good enough for the site itself to learn about consumer behavior on its mobile version if the humans behind those sites aren't also learning and improving. Look for key indicators that the mobile version of the site needs improving and implement tweaks from there. For example, do users spend as long on the site when they are browsing from a smartphone as they do when browsing on a desktop machine? If they don't, it might be because they are having a frustrating experience. Are bounce rates higher for mobile devices? Again, it might be because the site takes too long to load on a smartphone or because they cannot find the information they need. Along the same lines, is page load time significantly slower on mobile versions of the site? If it is, it will affect both user experience and SEO. To create a responsive experience for the user, all these questions should be addressed and monitored over time.

Conclusion: Now Is the Time to Revisit Responsive Website Design

The future of the Web is a future of multiple devices and multiple browser sizes. With products like Google Glass on their way, design for mobile devices will only get more complicated. While it might be tempting to slap a website into a truly responsive template, a "one site to rule them all" template, and be done with it, such a hasty move might not be the best choice for the company. Instead, corporate marketing departments need to spend longer than they ever have before researching mobile design considerations and responsive website options before committing to a course of action. Companies that have already created some type of mobile site alternative may need to face the unpleasant reality that their existing mobile site design does not meet the challenges presented by today's mobile users.

Proper planning pays off, though. For evidence of wise and ever-improving mobile website experience, look no further than Amazon. Almost 60 percent of all mobile department store visits belong to Amazon. The online retail giant didn't get to where it's at today by accident; assessing and reassessing the needs of its mobile shoppers has led Amazon to a responsive website design that puts the user first and boosts mobile sales. Other corporations should take heed of Amazon's example, let go of old excuses and plan a website that responds to the future.

master inbound marketing hubspot academy class

subscribe to inbound ecommerce articles

(This is part two of a three part series by our Magento expert on mobile optimization for ecommerce websites. You can find part one here and find part two here.)

Don't forget to share this post!