Responsive web design offers huge opportunities to boost sales on
ecommerce sites. Here are 15 websites that have grasped that
opportunity.
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 the very best. We hope they
encourage you to utilise responsive web design for your next ecommerce
project...
An ecommerce site with a clean aesthetic to showcase the products
Kershaw has been designing and manufacturing high-quality and
affordable knives since 1974. With his team and Kershaw,
designer/frontend developer Jordan Sowers
created an ecommerce site with a clean aesthetic to showcase the
products. "Learning how to present and organise the vast amount of
information associated with an ecommerce site, while also being
flexible, made us realise so much of responsive design is about good
timing," says Sowers.
The product range benefit from the well-executed filtering system on
the catalogue page. The list of filters is displayed across multiple
columns on large viewports making the best use of the space. The filters
translate to smaller displays, folding down into a horizontal,
scrollable list with off-canvas list items that can be scrolled into
view.
The homepage is a hefty 1.3MB but the full canvas photography is beautifulSALT is a
collaboration between two surfers, Tyler Wolff and Nabil Samadani, who
decided to bring well-crafted surfboards to the thriving scene they
found in New York City. The website is arresting, its homepage featuring
beautiful full-canvas photography. Delving reveals an inspiring
aesthetic of considered typography, a purposeful grid and seductive
product shots.
The use of full-canvas photography has its cost: the homepage is a
hefty 1.3MB. Responsive image techniques can be fiddly to work with, but
would pay dividends here. However, the minimal aesthetic of the
internal pages offsets this somewhat.
The site boasts gorgeous, hi-res photography
A site rich in photography, history and emotion. "Our town is making
jeans again", the oversized strapline defiantly proclaims. The gorgeous,
hi-res photos showing your chosen wears just look fab, and we love the
way the images are laid out on mobile.
"Most of our projects recently have been responsive so it's becoming a standard part of our workflow," says Alex Morris of Mark Boulton Design, who built and designed the site along with Nick Boulton, with creative direction from Mark Boulton.
Elegant, light, fresh, this ecommerce site represents the brand well
It's good to see that Starbucks has a responsive site. In terms of
features, it has most things you would expect a modern coffeehouse to
have: nice big videos on the homepage, along with news items listed
vertically below.
The store locator is interesting, with the view taken up solely by a
series of icons on mobile. It's pretty minimal - at times we had to
think about what each icon represented - but it does the job, allowing
for easy filtering for different coffee shop types, for instance. There
seems to be a little too much similarity between some icons, too.
For core navigation, the mobile view condenses the header nicely,
consolidating items into a single, now-almost-universal responsive menu
icon, which shows and hides vertically when tapped. The richness of the
menu items and their descriptions are maintained across the board, which
is really good and feels sexier than most responsive menu degradations.
Navigation on smaller screens is accessed via an ‘off-canvas’ menu
Banks aren’t the most likeable organisations, but we're developing a
soft spot for Kiwibank, a New Zealand-based bank that competes against
larger Australian-based rivals.
With mobile traffic pushing past 10 per cent, Kiwibank asked Springload
to help them become device agnostic. Springload founder and director
Bron Thomson says, "The fixed-width paradigm has run its course – last
year we noticed that 20 people tried to join Kiwibank from their
PlayStation 3."
The design rests heavily on good copy, beautifully typeset in Meta
Serif. "Content is really important. We've banned Lorem Ipsum, and
Kiwibank’s copywriting team work in our office a couple of days a week,"
says Thomson. Navigation on smaller screens is accessed via an
'off-canvas' menu that slides in from the right, similar to apps such as
Facebook and Path.
The product pages on Indochina's responsive site adapt well to different devices
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.
The navigation works seamlessly across a range of screen sizes on the Skinny Ties website
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.
Stury's vertical navigation condenses on smaller screens in an effective and pleasing way
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.
Online print shop Fit For A Frame scales down beautifully on smaller mobile screens
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 are 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.
United Pixel Workers' cart and menu buttons are laid out in a thoughtful way that helps it perform well on a variety of devices
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.
Tattoo store Tattly's layout resizes beautifully on small screens
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.
Nixon is one of few mainstream brands to have a responsive store
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.
Though complex, Folksy's layout adapts well to mobile devices
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.
Five Simple Steps' minimal website layout is a delight to use
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.
Suit Supply's responsive site design is heavy on high quality photography
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.
No comments:
Post a Comment