5 Principles to Remember when Designing a Responsive Ecommerce Site

responsive Having great web design has never been more important than in 2014. If you want to make a good impression, solidify your brand and better communicate your message, then using modern, responsive web design is the way to go. And though there are pros and cons to using a responsive site design, it’d be foolish to ignore the trend—and with the advent of mobile devices, you can’t afford to NOT adapt. Not adapting to the current design culture is as hopeless as swimming against a rip tide.

This post isn’t about WHY you should have a responsive web design, but more on how to make your site more user-friendly so that can get you more sales and happier customers.

Never underestimate the importance of making a good impression. Know this: when someone first comes to your site, they will often judge a book by its cover. If they see a cluttered, messy, outdated design, with poorly placed images, sloppy typography, and a complicated menu navigation, you can bet that they will bounce from your site (unless they are especially interested in what you have to offer). A modern design that is attractive and eye-pleasing, while also being simple to use, will be a winner for your business.

Let’s look at the 5 principles we need to be thinking about when designing an Ecommerce site.

Clean Typography

The content needs to be readable across all devices. The web is mostly textual, meaning that the communication between you and your site visitor will be articulated through your text/content. But that’s just the practicality of it. Within the style of the typography is the actual message you’re trying to convey, the vibe you want to evoke, and the image you’re trying to sell. You need the typography to be clean and modern, while also being large and noticeable enough for the average visitor to read across all devices.

For example, look at the design for United Pixel Workers, an E-commerce retailer that sells clothing. Their typography is large, clean and simple, and it also manages to illustrate their brand image.

Fluid Grid Layout

Having a fluid, responsive grid system is worthy of a separate, dedicated blog post, but we can still talk about it briefly here. A great grid structure will allow you to do two things:

  1. Have as many columns as you want. And better yet, you can place them wherever you want.
  2. Adjust the width and height to scale. Obviously, the dimensions required for a desktop will be entirely different than an iphone. With a fluid grid structure, you can make custom adjustments so that your site will condense or expand naturally whether you’re on a mobile device or a desktop computer.

Easy Navigation

Simply, make it easy for a new site visitor to get around your site. If you’re a retailer that sells all types of clothes, and a potential customer wants to buy socks, you need to make it very easy for him to find the “socks” section of your site. Even if your site has a huge stock of products, the average visitor to your site will still need to go where they need to go, and if they spend too much time searching, they will get frustrated and leave your site.

As an example, look at Currys. Their design isn’t the prettiest, but they tremendously compensate for it by having stellar navigation. If you browse their site, you’ll see that they have a huge catalog of products across different markets and industries, but their navigation is so focused and organized that you can find what you need very, very quickly.

Attractive Product Placement

The way you present your product is very important.  How you properly display your product is also dependent on what we already discussed: the typography, grid layout, and navigation. But something we haven’t touched on is the image, or how the product actually looks to the prospective buyer. It needs to look appealing.

The aesthetic attributes of the product will mostly depend on what you’re selling, but stick by this principle:

The product needs to be photographed or illustrated beautifully.

Fast Checkout

If a prospect clicked on the checkout button, then you’re almost home, and you definitely don’t want to be stopped by any bumps in the road. Across all devices, the checkout process must be quick and streamlined. If someone is pulling out their credit card to buy your product, then you want to eliminate as many obstacles as possible. Here are a few common mistakes to avoid:

  • Making the prospect “create an account” right before the final stages of checkout. Though you should definitely encourage your customers to sign up, don’t do it during the checkout process. It’s generally a pain for the customer.
  • Not visually identifying the sensitive fields when a customer fills out his information. If you require the customer to enter his email address, for example, add visual cues to instruct him to do so (like a red star to indicate that he cannot proceed to the next page without entering his email).
  • Using ambiguous language. In the checkout process, make your communication as clear and easy-to-understand as possible.

Having a good design isn’t just about the attractiveness of the site, it’s about the functionality, ease-of-use, versatility—the all-around package. The goal is to capture more customers as easily as possible. And if you can accomplish that, then your site design did its job.

Want more digital strategy advice and insights?

Sign up for our newsletter.
Something went wrong. Please check your entries and try again.

Joseph Riviello

Joseph L. Riviello is the CEO and Founder of Zen Agency. Joe's agency builds websites and web applications that attract, engage, and convert. Joe has over 30 years of experience in entrepreneurship and he is an expert digital marketing strategist who specializes in conversion-centric e-commerce experiences and cutting-edge solutions that maximize growth and profit. Check out Joe featured on: Business.com, Redbooth.com, Kabbage.com, MaterialDesignBlog.com

Leave a Comment

You must be logged in to post a comment.

More Posts By Joseph Riviello

E-Commerce Experts Thoughts on New Instagram Checkout Feature

By Joseph Riviello

Facebook is at it again, innovating the social media landscape … this time with its uber-popular platform, Instagram. In a March 19th press release, the company unveiled the new Instagram Checkout feature, an e-commerce extension of the app. Since it’s currently in beta with only 25 companies, not much is known about it, and businesses…

Why You Need a WooCommerce Store

By Joseph Riviello

According to a study published by the U.S. Census Bureau’s Department of Commerce, total e-commerce sales in the United States were estimated at $513.6 billion in 2018, a 14.2% increase from 2017. This data has been on an upward trend since 2009. Future projections globally cement e-commerce as the primary shopping method. Now, more than…

4 Tactics Marketing Automation Companies Use to Improve ROI

By Joseph Riviello

The most exciting part of doing business in this day in age is how much technology is available. This elevates the potential of what you can do with your marketing since it opens up a world of opportunities. While technology won’t be the magic button that will fix all of your problems, it helps accelerate…

The 3 Tenets of Lead Generation: How You Can Produce Sales On-Demand

By Joseph Riviello

Sales are the lifeblood of any business. Without a steady stream of sales, you don’t have revenue. And without revenue, you don’t have a thriving business. In today’s post, we’re going to look at the three tenets of lead generation, and how you can use them to exponentially grow your business. Tenet 1: You Must…

Zen Agency is Now a Sharpspring Silver Partner!

By Joseph Riviello

Zen Agency has earned the Sharpspring Silver Partner Certification from Sharpspring, a leading marketing automation platform. Why Does Marketing Automation Matter? The marketing automation tools provided by Zen Agency as a Sharpspring Silver Partner allows you to deliver the right message to the right leads. Track your content, who is seeing it, and craft an…

How to Create a Successful Law Firm Marketing Funnel

By Joseph Riviello

If you were to go back 20 years, you would see that law firm marketing was starkly different than it is today. You would see more billboards, late-night infomercials, neighborhood flyers, and newspaper ads. These days, we have websites, SEO, pay-per-click ads, and social media marketing. The options available to lawyers today give them countless…

What Is Content Marketing? How You Can Get Started Today

By Joseph Riviello

Almost every successful website has one thing in common: Great content. You can have an extremely beautiful website with all the bells and whistles, but if you don’t have content, your web presence is woefully incomplete. You must learn how to start content marketing the proper way. There are no shortcuts: You need good content.…

5 Steps for Creating a Successful Marketing Strategy

By Joseph Riviello

Many businesses jump straight into marketing without a plan. This is a big mistake. Going into battle without a strategy will leave you with a poorly spent marketing budget and lackluster results. Often enough, the difference between companies who dominate the marketplace and companies who fail to get off the ground is simple: A clear,…

The 5 Step Cheat-Sheet for Using Youtube for Your Local Business

By Joseph Riviello

If I were to ask you, “what’s the #1 search engine?”, you would automatically say, “Google”, and you’d be right. But what if I were to ask you to state the #2 search engine? Some would say Bing or Yahoo, but the truth is that Youtube is the second largest search engine in the world.…

Why Call Tracking Is Critical for Local Businesses

By Joseph Riviello

Let’s say you’re a business that’s running different online and marketing channels like SEO, PPC, email marketing and direct mail. You notice a remarkable uptick in sales, but you’re not precisely sure where they are coming from, as you’re using a variety of different marketing methods. If many of your leads contact you via the…