Visualsoft designer working across two desktop screens

An Introduction to Responsive Design

If you’re in the Web Development industry or you’re a keen techy, the chances of you being unfamiliar with the term ‘Responsive Web Design’ (RWD) are pretty slim. RWD is undeniably a buzzword within the industry, and has been ever since Ethan Marcotte debuted the term back in 2010 in his landmark article for A List Apart.

Despite it being the topic of conversation Responsive Web Design is surprisingly still not widely used in eCommerce, with figures showing a tiny 20% of the top 500 eCommerce websites employing RWD as of July 2015. However, with the UK awash with smartphones and tablets, these devices are now accounting for over half of all eCommerce sales, showing the growing importance of your business exploiting RWD.

So, what is Responsive Web Design?

In its simplest form, RWD is a combination of 3 main techniques that allow web pages to display in an optimised format across a wide range of devices including desktop computers, laptops, tablets and mobile phones:

1. Media Queries

Media queries are one of the most essential tools for serving optimised content to different devices – in essence they allow for CSS styling to be changed depending on the width of the user’s screen. For example, on smaller screens font sizes can be increased to give greater readability, and non-critical information can be hidden when space is limited in order to promote the important parts of the page and reduce seemingly endless scrolling.

2. Flexible Grid Layouts

Another equally important technique involves splitting the page up into columns of equal widths that are based on a percentage of the total screen width, and also rows to separate sections horizontally where necessary. This means that a grid structure can be used to cap the flow of the content and ensure the page does not display wider than the screen it is showing on. A different grid structure can be employed on different sized screens which means something that is half the screen width on desktop could, for example, go full width on mobile devices to give it extra prominence or make it easier to tap on.

3. Flexible Images

In 2016 we now have a few different ways to utilise flexible images but the most common is still the way Ethan Marcotte described it initially – display every image at its full size unless the grid structure (as above) forces it to be smaller. At that point the image should resize proportionately within the space allowed – so a square image would remain square but display smaller. This technique ensures that images are never “stretched” bigger than their actual size and consequently avoids horrendous pixelation!

An example of Responsive Web Design

Thanks to Justin Avery’s “Am I Responsive” project here is an example of a recently launched responsive Visualsoft site on a range of devices to demonstrate how the content has been optimised for each screen – you can check your own website here!

tiesrus_responsive.jpg

 

What are the benefits of Responsive Web Design?

Back in the day the alternative to RWD for multi-device capabilities would be fixed-width sites with a separate mobile-only site bolted on – in the last few years something around 980px has been a popular width to use in order to avoid alienating too many users. It isn’t the worst approach in the world, and does mean that generally a user would be viewing a site that has some level of optimisation for their device, however, RWD advances on this even further:

Device Coverage – The main benefit from a development point of view is that a responsive site should work for all screen sizes/capabilities rather than just one or two specific target devices (e.g. desktop and phone). As mentioned above, the trends for web usage are moving very much towards mobile and there are hundreds of possible devices that fall into this category.

Optimised Content – The user will always be served content appropriate to their device (no matter what they are using) which will improve their user experience and therefore a likely improvement in conversion rates due to increased engagement.

Easier Maintenance – In general the initial build of a responsive site will take longer due to the extra complexity of building for all devices. However, it does mean that fixes or upgrades only need to be applied in one place and, where appropriate, functionality will be available on all devices rather than just a selection.

Future Proofing –  As far as we can tell RWD should cope fine if, for example, a new tablet is released with a totally unheard-of screen resolution.

SEO Improvements – Google themselves recommend a responsive approach to tackle the issue of having separate mobile and desktop sites.

What does the future hold for RWD?

It seems RWD is here to stay and with new techniques and technology cropping up all the time then boundaries will be pushed further and further in terms of content and also design.

One interesting possible development from a technical point of view is the exploration of ‘element queries’, which instead of basing styling on the width of the screen, it would work from the width of a containing element meaning a much more flexible framework for developers. At the moment this is still very much a pipe dream, not least because of the chicken-and-egg type problem of whether the content defines the size of the container or vice-versa, but there seems to be substantial weight behind this being introduced at some point in the future.

Related articles.

Download, Guide, Insight

6 Day Facebook Action Plan

Insight

How To Grow, Nurture And Convert From Your Email Lists Following GDPR

Insight

Performance Marketing: Relationships At The Core

Insight

From Post To Purchase In Two Taps With Instagram Shopping

Insight

E-Retail Performance Report 2018: The Site Speed Update

Insight

Paid Search: How To Survive Without A Feed

Insight

CRO: The route to testing: What comes first?

Insight, News

Cryptocurrencies and eCommerce

red image of an employees desk
Insight

Top 10 Tips For Fashion Affiliate Campaigns

Insight

New to CRO? Here's all you need to know!

Insight

Valentine’s Day: Steal hearts and convert with inspiring Email Marketing

Insight

5 Ways To Combat Facebook's 2018 Algorithm Update

News

New year, new approach: 5 AdWords resolutions to kick your campaigns into shape for 2018

employees working at laptop
Insight

Future Proof your 2018 Online Marketing Strategy

Insight

Retailers: How to do London Fashion Week

Insight

6 Tips for Creating a Successful Social Media Strategy for 2018

Insight

5 Quick Wins To Make The Most of Email Marketing Around Christmas

Insight, News

The Four Pillars of Affiliate Marketing

red image of woman with short hair and glasses
Insight

E-Retail Performance Report 2017 UK Edition

Insight

Creating an effective Black Friday Social Strategy

Insight

Top 10 CRO tips to convert your Cyber Weekend traffic into sales

Insight

Search Hacks for a successful Cyber Weekend 2017

Insight

Cyber Weekend 2017: 8 Email Marketing tips you can’t afford to miss!

laptop screen with retailers website on
Insight

Black Friday-proof your Affiliate Marketing Campaigns

Insight

4 Lessons to make Cyber Weekend 2017 your best yet

Insight

5 Steps To Integrate Social Media and Email Marketing

Insight

Mobile Ad Extensions have had an update. Here's what you need to know.

Insight

Take your subscribers on a new journey through email this summer

Outreach Conference logo
News

Verve Search's outREACH Conference Highlights

News

5 Ways Overlays Can Increase Conversion Across ANY Website

Insight

What can online retailers learn from the offline shopping experience?

Insight

PPC: Bing Ads trial Meta Data in Paid Ads

News

People of VS: Meet our SEO Outreach team

Skyscrapers in Dubai
News

VS takes on the Middle East

Insight

Lights, camera, action: why your brand should be jumping on video

Insight

BrightonSEO 2017 Highlights

Insight

PPC: Google & Bing Updates

Insight

How to create effective Easter campaigns without being punny!

Voice Search device
Insight

Digital Assistants: Artificial Intelligence & Paid Search

Insight

Take your email marketing higher: 5 quick wins

Insight

What actually is CRO and what can it do for my online business?

Insight

Instagram: why online retailers should be working with bloggers and influencers

Insight

PPC: How to stand out without a merchant promotion

emoji icons - thumbs up, cross and sick face
Insight

PPC: The Good, The Bad & The Ugly

Insight

A fashion retailer's guide to successful Email Marketing

Insight

Is affiliate marketing right for my online business?

Insight

5 Tips to Creating Effective Web Promotions

Insight

Clock up more email sales with a festive countdown timer

woman on mobile with shopping bags
Insight

Get mobile and get ahead. It's the only trend this season.

Insight

An update from Google you'll genuinely be interested in

Insight

Measuring the Multi Device Journey

News

Visualsoft PPC team win a Bing Ads Bonanza Box

Insight

The mCommerce shift - Mobile vs Desktop

Line if people throwing buckets of water over their heads
Insight

Future online marketing trends to watch out for

Insight

Affiliate Marketing Q&A with Luke Atherton

Insight

Further Google Shopping Product Feed Specification Update

Insight

The Key to Social Success

Insight

Get real - Humanising your eCommerce website

Man with 8 arms working across multiple laptops and tblets
Insight

Be a better developer - Stop multitasking

Insight

Mobile sales rocket in Q1 2016

Insight

Google Unnatural Link Penalties Signals Big Changes for Bloggers

Insight

An Introduction to Responsive Design

Insight

Further Changes To GTIN Requirements

screenshot of Google search engine result with a red overlay
Insight

Google Remove Right Hand Side Ads - But How Will It Impact Your SEO Strategy?

Insight

Simple steps to increase your average order value

Insight

Mobile affiliate activity flourishes in 2015

Insight

Google Panda Added to Google’s Core Ranking Signals

Insight

Changes To Google Shopping Policies

a stopwatch

Does your site speed measure up?

Insight

VS SEO Episode 1: The Phantom Update

Insight

Black Friday: Shoppers switch from bricks to clicks

Insight

Black Friday by Numbers!

Insight

Celebrating #ClicheDay with our top five social media cliches

Google logo and a square penguin
Insight

Preparing for Penguin 4.0

Insight

Five Simple Tips to Successful Email Marketing

Insight

PPC Update: Changes to Google Shopping Data Feeds

News

UK Search Awards 2015 - We're in the running!

Insight

SEO FAQs - Google Search Snippets

Google Analytics interface on a latop
Insight

Customer Match In AdWords

User Testing - Choosing Who to Target and Why

Insight

Affiliate Marketing News - UK Customers Want Discounts!

Insight

Marketing Tips from the Experts: Understanding your Analytics Data.

Insight

Dealing with Google Webmaster Tool errors

Google Shopping image including a range of consumer products
Insight

Google's Taxonomy Update

News

We're Google Winners!

Insight

Improving your site's images for better SEO results

Insight

Facebook's Video Partners to Earn Ad Revenue

Highlights from the Google Analytics Summit 2015

Google Analytics Partner Logo
News

Visualsoft awarded Google Analytics Certified Partner status

News

Going mobile? We've got an app for that!

Insight

Google announce update to Mobile Search

Insight

A guide to choosing an eCommerce provider

News

Visualsoft client featured in eConsultancy post

logo for BBC Digital Excellence Awards
News

VIsualsoft named as finalist for the BBC Digital Excellence Award

Insight, News

Explosion in online shopping could hold key to Visualsoft's growth

Insight

eCommerce Platform Magento Go to Close on 1st February 2015

Insight

Study reports over half of mCommerce users abandon checkout

Insight

Research highlights the need for mCommerce

16% in big red letters
Insight

Online sales up 16% in March

News

Visualsoft apprentice on the road to success

News

Values matter to Visualsoft client Charles Clinkard

Insight

Boxing Day a huge hit for online spending

News

Visualsoft Directors recognised in the Online Fashion 100

Speedometer
Insight

Online shoppers crave a speedy checkout process

Insight

eCommerce experiences are not up to scratch

Insight

Are 76% of retailers missing a trick with mCommerce?

Insight

mCommerce spend is on the increase

News

Another three clients named as Drapers finalists

person holding a credit card in front of a laptop
Insight

eCommerce is booming in 2011

Insight

45% of consumers prefer shopping online for fashion

Insight

Facebook revealed as important sales tool

Insight

European eCommerce on the up

Insight

UK consumer trends revealed for Christmas

someone on their mobile, holding a credit card with a gift wrapped parcel next to them
Insight

Retailers urged to prepare for the festive season

Insight

40% of teens embracing eCommerce

Insight

Amazon reports 51% sales increase

Insight

eCommerce sales boosted in 2011

Insight

Consumers embrace mCommerce around the world

80% in red lettering in a box
Insight

80% of consumers say shopping online is cheaper

Insight

Research highlights the need to embrace changing email habits

Insight

Companies fail to communicate via social network platforms

Insight

UK online advertising spend hits £4bn

Insight

New payment system set to increase eCommerce

a speedometer dial maxed which says boost
Insight

Digital boost for UK advertising industry

Insight

Social networking proves to be a big influence

Insight

More than £5 billion spent online during May 2011

News

On the road to PCI Compliance

Insight

mCommerce on the up

twitter and facebook app logos
Insight

Social networking used to maximise online sales

Insight

CBI reveals predictions for UK high street sales

Insight

Sharp growth predicted in the m-Commerce market

Insight

Retailers suffer record fall in sales since 1995

Insight

Marketing trends for 2011 revealed

tablet with online fashion store displaying
Insight

Online fashion spend up 34%

Insight

eCommerce growth threatening the high street

Insight

Online spend hits £4.9billion during February

Insight

Facebook reaches 30 million UK users

Insight

UK tops eCommerce sales chart

woman at desk on laptop with a credit card
Insight

UK consumers name top three innovations

Insight

Online spend hits £5.1 billion in January 2011

Insight

Tips for a successful email marketing campaign

Insight

Internet shopping to increase by 18% in 2011

Insight

Results through relationships

gift wrapped present
Insight

Merry Clickmas!

Insight

Shoppers go online during cold weather

News

Another eight Etail Awards!

Insight

UK's eCommerce boom continues

News

Two Visualsoft clients named as Drapers finalists

Evening Gazette logo
News

Media spotlight focuses on Visualsoft

Insight

Online shopping predicted for 4% annual rise

News

Drapers report on Pritchards success

We'd love to share success with you...