5 Tips for Designing a Great E-commerce Site

There is no doubt about it, our ‘addiction’ to our mobile devices, whether that be a mobile phone, a phablet, or a tablet, is changing the way that most people access the internet and that means change too for those wishing to sell on the web and the web designers who help them do this.

The problem of making sites ‘fit’ on screens of such varying sizes (say 2 inches by 4 inches at the smallest to a big 20 inch monitor) is not new, but it is getting more and more important, this of course being because more people access the web using these ‘small’ screens that use desktops or laptops today.

There is one caveat that should be raised here though, in that whilst 60% of web users are using these mobile devices, how much of that time is being spent on Social Media and just chatting to friends, rather than ‘serious’ surfing when they want to buy something. I expect that the numbers are still quite high, but I doubt whether this category of usage is over 50%.

Whatever the number though, it is ESSENTIAL for a website to be mobile friendly and that goes deeper than just making it fit the smaller screen. The reasons for this are two fold. One, it is of course necessary to make the site look good on the smaller screen and to enable easier navigation (perhaps by not having to scroll to the top of the screen to go anywhere – so easy with a mouse, but harder with just your thumb), but secondly and of growing importance (in our view) is that the psychology of the interaction with sites is different, people wanting the information faster and in a more concise manner when using these mobile devices. The main reason here being that they are more than likely away from home and are ‘hurriedly’ trying to find some information / buy something.

This makes a big difference to how you lay a site out and how you do, for example SEO. Here Google ‘demands’ words so that it rank the best sites first, but the inclusion of hundreds of words would in a mobile environment, more than likely, cause the user to click elsewhere. There is therefore art and science in designing web sites today…

At Rouge we have extensive experience of building ecommerce sites and of how to tackle this problem, so please feel free to contact us for a chat. In the meantime, have a look at this article on designing Ecommerce sites we found, it is certainly worth a read.

Five years ago, companies built their online shopping carts with the desktop experience in mind. To meet the needs of smartphone and tablet shoppers, these businesses made minor adjustments or they purchased mobile storefront software that was completely different experientially as compared to the e-commerce experience.

Today, companies that are designing their first e-commerce websites, or completely revamping old websites, must design the mobile experience first and then adjust the desktop experience as needed. “Every element, every piece of content, must be functional on mobile,” said Jimmy Rodriguez, Chief Operating Officer (COO) at 3dcart. “If you’re starting from scratch, you design for mobile. With responsive design, you can build the website to start on mobile and then bring it to the desktop.”

3dcart, which provides e-commerce software to more than 17,000 customers worldwide, has logged a radical shift in how people shop online. Five years ago, only 5 percent of people were browsing 3dcart websites on smartphones and tablets. Today, that number is 60 percent (including tablets).

To help you design your e-commerce storefront for both mobile and desktop users, Rodriguez recommends that businesses incorporate the following design elements into their storefronts. However, before making any wholesale changes, Rodriguez cautions readers to A/B test features on specific product pages rather than plugging new features onto the entire website.

1. Sticky Header Navigation
We’ve all been there. We’ve scrolled down to the bottom of a product page to read user reviews or to read product details, and now we’re ready to leave the page to get back to the menu to continue our shopping journey. Unfortunately, in order to get back to the menu, we’ve typically had to click the “Page Up” button on our desktop keyboards or tap at the top of the screen on our mobile devices.

With Sticky Headers, as you scroll down, the menu resizes and adjusts. The menu follows you along your journey to keep the navigation on the screen should you need to quickly jump pages. You can see this in effect on Bose.com. Despite being midway through the page, I’m still able to access the page’s main navigation without having to head back to the top of the screen.

2. Hamburger Menus
Although Hamburger Menus sound like a feature best-suited for fast food restaurants, they are quickly becoming a must-have for companies that do a lot of business on mobile devices. You’ve seen them before: Hamburger Menus have become the standard mobile icon for mobile navigation and menus.

They feature three horizontal lines that, when pressed, offer a drop-down menu of a website’s navigation. They are particularly useful on mobile devices where screen real estate is at a premium. But we’re starting to see them on desktop websites as well, so consumers have a similar experience on company websites regardless of the device they’re using.

“A lot of people see Hamburger Menus and they know what it means, but they don’t know it’s basically the new standard,” Rodriguez said. “Mobile visitors have learned the meaning of this symbol and websites should embrace it as a standard for mobile navigation.”

You can see a Hamburger Menu on the upper-right hand corner of Target.com and on Target’s mobile website. You can also see it pictured below.

courtesy of PCMag and Target.com


3. Parallax Scrolling
Less of a functionality feature and more of a way to improve your website’s aesthetics, Parallax Scrolling takes advantage of big banners full of high-resolution imagery to add an artistic flair to your website. By taking advantage of large, full-width images, you can create a displacement effect between your website’s background image and the image that’s directly in front of your consumer.

4. Infinite Scrolling
Infinite Scrolling sounds more like a torture technique than it does an e-commerce feature. However, this nifty tool lets your users continually view new products without having to click into and load a new page. Here’s how it works: When you scroll down to the bottom of an e-commerce page, the page automatically loads more items at the bottom of the page. They’re still catalogued as pages on the backend but the visitor doesn’t know that.

5. A Floating “Add to Cart” Button
Similar to the Sticky Navigation tool, floating “Add to Cart” buttons allow your consumers to add products to their shopping cart regardless of where they are on the product page. Previously, users would scroll down to user reviews, product details, and other lower-page elements, and, in order to add the product to their cart, they’d have to scroll back to the top of the page. Now, companies such as Diesel.com let you see the product’s price, quantity, color options, and image as well as the “Add to Cart” button, regardless of where you are on the product page.