5 Tips for Designing a Great Web Storefront

Five years ago, companies built their online shopping carts ^[1] 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 ^[2]. "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 ^[3] 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 ^[4]. 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 ^[5] and on Target's mobile website. You can also see it pictured below.

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.

As you can see in the image below from RemmilLondon.com ^[6], as you scroll down the page, the website's background images changes. However, the change occurs subtly as the background and foreground images blend into one another. The screengrab below shows the website right at the moment when the background image chang es from purple to pink.

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.

You can see a similar feature on UnderArmour.com ^[7]. Unfortunately, Under Armour requires you to click the "Load More" button to see additional content. Some websites are equipped with an auto-open mechanism that will show you more content without requiring a click.

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 ^[8] 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.