10 brilliantly responsive ecommerce sites

Words: Nathan Leigh Davis

As Christmas hurtles towards us, more people are purchasing gifts online than ever before. So it's important for retailers to focus their efforts on developing a great ecommerce strategy.

Advertisement

Mobile use of the internet is exploding and it’s expected to overtake desktop access by 2014. The disparate screen sizes and range of devices available is overwhelming, but it’s a challenge online retailers need to address. Put simply, most of their customers will soon be purchasing goods from either a mobile or tablet device. Given the rapid growth of mobile in developing countries such as China, those who are agile may even be able to tap into new and very lucrative markets.

Design once, sell everywhere

While many larger retailers have introduced native apps to complement their website, this option is not usually feasible for smaller retailers. So the emergence of responsive web design - in which sites conform to the individual requirements of the device they are being viewed on - offers the perfect solution.

A lot of ecommerce sites suffer from unnecessary bloat and a responsive approach requires designers and retailers to trim the fat. This means better considering information architecture, streamlining checkout processes and optimising written and visual content for mobile. Given the advantages of this approach, it’s surprising that great examples of responsive ecommerce websites are few and far between. We’ve scoured the web though to seek out 10 of the very best. We hope they encourage you to utilise responsive web design for your next ecommerce project...

01. Indochino

Indochino make high quality custom menswear and its responsive store features beautiful product photography combined with a minimal design aesthetic. While the whole site responds extremely well to various screen sizes, the way in which the product pages are handled is particularly worth noting.

02. Skinny Ties

Skinny Ties is a niche online retailer that sells nothing but retro-style skinny ties and have been doing so since 1997. The layout of the site is carefully structured and complemented by the use of great product photography and concise and helpful information on the individual product pages. The site navigation also works seamlessly across a variety of screen sizes and allows users to quickly search for products via a variety of options, such as material and colour.

03. Stury

Stury is a site that allows people to swap books online. The way in which the vertical navigation and grid based layout condenses when viewed on smaller screens is particularly effective and a design pattern that would work well for many other sites.

04. Fit For A Frame

Fit For A Frame sells gorgeous prints created by talented designers and illustrators. Their online store features simple navigation and an equally simple layout, both of which condense beautifully for smaller screens. There’s some interesting tricks on show here too, such as the way the prints on the brickwall background on the homepage switch to a vertical layout when viewed on a smaller screen.

05. United Pixel Workers

United Pixel Workers sells T-shirts and accessories created by the web design community and given the tech savvy nature of their customers, it’s not surprising to see that their website is responsive. The site utilises a simple grid layout and large typography, which means it adjusts exceptionally well when viewed on smaller screens. The way in which the cart and menu buttons are arranged on narrower devices is particularly well thought out too.

06. Tattly

Tattly sell 'Designy Temporary Tattoos' created by leading designers and illustrators. Its online store utlises a simple grid structure throughout, which is complemented by a monochromatic colour palette, which prevents the UI from detracting from the products on show. The flexibility of the underlying grid means the layout resizes beautifully when the site is viewed on smaller screens.

07. Nixon

Nixon is one of the few established brands to have a responsive ecommerce store, and it’s exceptionally well done. It works so well due to the simple and minimalistic layout and like many other sites in this showcase, a grid structure is employed throughout. Nixon’s great product and lifestyle images play a big part in pulling the design together. When viewed on a smaller screen the flyout navigation and checkout process works particularly well too.

08. Folksy

Folksy is an online platform for British designers and makers to sell their handmade wares online. While the layout is more complex than many of the others showcased here, the way in which it responds to the demands of various viewing environments is adeptly handled.

09. Five Simple Steps

Five Simple Steps is a small independent publisher of practical books for web design professionals. Its online store utilises a simple and minimal layout and interface that make it a delight to use.

10. SuitSupply

SuitSupply is an online mens fashion retailer whose responsive store design utilises a simple minimal layout combined with high quality product photography. The desktop site contains standard navigation and product filters, but interestingly they’ve chosen to either remove or simplify these elements when the site is viewed on smaller screens.

• Nathan Leigh Davis is a designer and web-developer living and working in Melbourne, Australia. He works primarily as an interactive design and web developer, but is equally proficient at brand identity, design for print and creative direction.

Now read:

• Ecommerce web design: 20 essential tips
• 10 of the most creative online contact pages
• Web design training: the top 20 online resources
• 30 web design secrets to boost your skills!

Have you got a favourite responsively designed ecommerce website? Tell us about it in the comments!