Blog

Responsive Web Design Examples for Ecommerce

Reading Time: 8 mins

Creating a website with a responsive web design can be tough, whilst attempting to align usability, functionality, and visual style; but there are many high profile ecommerce retailers who have managed to create excellent user experiences.

We have compiled a list of some of the best responsive web designs that ecommerce retailers have to offer, for you to take inspiration from when building your own.

Selfridges – selfridges.com

selfridges new website responsive

Costing a cool £40m, Selfridges have high hopes for their new responsive site, designed with those using touch-screen devices in mind. So what’s so good about it?

Selfridges is all about image, and that is exactly what you’re presented with upon opening the website. Scrolling produces more images one after another, showing a range of products, and ending in a number of links for inspiration.
Selfridges have saved space and created a minimalistic look by allowing access to the footer via an information and help tab.

Product wise, each product allows an alternative view when you hover over with your mouse, which can be handy in gaining a better view before clicking through.

The responsive web design ensures that the same feeling of the desktop site is replicated on the palm of your hand, or on a tablet.

B&Q – diy.com

B and Q New Responsive Web Design

An unfathomable £60 million went into making this responsive website happen, although a lot of that is said to have gone on back-end systems, as part of a wider operation.

Design wise, it’s very crisp, stylish, and looks great on any device; from desktop to smartphone. The extensive mega menu directs users to look at rooms and products, instead of focusing on departments. This provides an easy way to find what you’re looking for; whether you want a specific item, inspiration, or are simply just browsing.

The search also has prominent position, featuring a predictive search feature which aids customers in finding desired products. Products can be compared, and it features a range of product filters, that allows you to select items available for in-store collection, which is a very popular feature within large ecommerce chains.

The search results also returns results for articles they have available, helping customers decide on purchases, and lending itself to an interesting content marketing strategy for B & Q. Help & Advice also shows a series of videos which can help you choose, install, and inspire your home renovations.

ITGP – itgovernancepublishing.co.uk

ITGP Responsive Web Design

This website for IT Governance Publishing was built by Xanthos Digital Marketing, and is fully responsive to adjust for any mobile device it is viewed on.

ITGP needed a B2B web design to boost conversions, and it was built with this in mind from the ground up, to increase conversions and revenue. The initial links for authors, booksellers, and librarians automatically adjust to the width of the screen, so that they are accessible on phones, tablets, or PCs.

The website for ITGP has a direct feed from the publishing platform Stison, and features a unique search by author, title, or ISBN, with a filtering system.

Currys – currys.co.uk

Responsive Web Design from Currys

Currys is a great example of a top UK retailer which boasts an effective and visual responsive web design. The scaled down mobile version of the site is functional and easy to use, with large icons and calls-to-action which allow you to navigate your way around very simply.

The homepage does display large sale adverts upon opening, which may be useful for Currys, but could be detrimental for customer experience. All titles can be viewed and purchased with ease on a mobile device.

Woolies Trim – woolies-trim.co.uk

Woolies Ecommerce Responsive Web Design

Another website built by the team at Xanthos, Woolies Trim is a great example of how responsive design can benefit any ecommerce website. Woolies features a one page checkout, and a powerful on-site search feature so that finding the product you require is as simple as possible.

Woolies runs on AspDotNetStoreFront, and is accessible on any mobile device to increase conversion rates. The results have been an increase in sales, with PayPal proving to be a popular payment method, with more enquiries turning into business.

For more information, read our case study, and the results of the new ecommerce website here.

Garmin – garmin.com

Garmin Ecommerce Responsive Web Design

Germin have created a simple, no-nonsense responsive web design, that is minimalistic on both desktop and mobile devices. Yet the site still manages to provide enough information and links to satisfy any visitor.

Garmin’s responsive website looks very nice on a mobile, with clear icons which are catered to customer needs. The Burger icon also brings up a very useful and informative menu on the left-hand side.

The sliding images along the top are also very non-intrusive, taking up a small amount of screen real estate, whilst still proving to draw your attention with great images and calls-to-action.

The shopping cart is also optimised for smartphones, to ensure that mobile customers do not abandon it in droves, which is a common issue.

Microsoft – microsoft.com

Microsoft Ecommerce Responsive Web Design

For a company expanding into tablet and mobile device markets, it’s essential to have a responsive website which works to serve their customers best.

Microsoft make use of bright colours, whether it’s for their Surface or Lumia range, with each product standing out very clearly. On mobile, each division within Microsoft has their logo displayed, from Windows to Skype, for quick direction to the appropriate part of the site.

Microsoft also makes use of a nice collapsible menu on mobile devices accessible via the hamburger icon, which is similar in use to the full menu available on the desktop version.

Sony – sony.co.uk

Ecommerce Sony Responsive Web Design

The UK Sony site is fully responsive, and looks great on a mobile phone. Featuring a header image which directs to their flagship product, their 4K Ultra HD televisions, with scrolling down revealing more products with latest news and hottest products.

The hamburger icon also brings up a unique image-centric menu, so you can easily direct to the product you’re interested in, from cameras to gaming consoles. You can also quickly access your shopping cart in the top right with ease.

Xanthos Mobile Read

If you’re looking to create or redesign an ecommerce website, get in touch with the team here at Xanthos. We can help shape your ideal website to grow your business. Click here to contact us, or call 08450 740 068.