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.

Insights

Paid Search: How To Survive Without A Feed

Insights

CRO: The route to testing: What comes first?

News

Cryptocurrencies and eCommerce

red image of an employees desk
Insights

Top 10 Tips For Fashion Affiliate Campaigns

Insights

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

Insights

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

Insights

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
Insights

Future Proof your 2018 Online Marketing Strategy

Insights

Retailers: How to do London Fashion Week

Insights

6 Tips for Creating a Successful Social Media Strategy for 2018

Insights

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

Insights, News

The Four Pillars of Affiliate Marketing

red image of woman with short hair and glasses
Insights

E-Retail Performance Report 2017 UK Edition

Insights

Creating an effective Black Friday Social Strategy

Insights

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

Insights

Search Hacks for a successful Cyber Weekend 2017

Insights

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

laptop screen with retailers website on
Insights

Black Friday-proof your Affiliate Marketing Campaigns

Insights

4 Lessons to make Cyber Weekend 2017 your best yet

Insights

5 Steps To Integrate Social Media and Email Marketing

Insights

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

Insights

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

Insights

What can online retailers learn from the offline shopping experience?

Insights

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

Insights

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

Insights

BrightonSEO 2017 Highlights

Insights

PPC: Google & Bing Updates

Insights

How to create effective Easter campaigns without being punny!

Voice Search device
Insights

Digital Assistants: Artificial Intelligence & Paid Search

Insights

Take your email marketing higher: 5 quick wins

Insights

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

Insights

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

Insights

PPC: How to stand out without a merchant promotion

emoji icons - thumbs up, cross and sick face
Insights

PPC: The Good, The Bad & The Ugly

Insights

A fashion retailer's guide to successful Email Marketing

Insights

Is affiliate marketing right for my online business?

Insights

5 Tips to Creating Effective Web Promotions

Insights

Clock up more email sales with a festive countdown timer

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

An update from Google you'll genuinely be interested in

Measuring the Multi Device Journey

Visualsoft PPC team win a Bing Ads Bonanza Box

The mCommerce shift - Mobile vs Desktop

Future online marketing trends to watch out for

Affiliate Marketing Q&A with Luke Atherton

Further Google Shopping Product Feed Specification Update

Email Marketing Q&A with Kirsty Metcalfe

The Key to Social Success

Get real - Humanising your eCommerce website

Be a better developer - Stop multitasking

Mobile sales rocket in Q1 2016

Google Unnatural Link Penalties Signals Big Changes for Bloggers

An Introduction to Responsive Design

Meet The Mentors - Using Analytics

Further Changes To GTIN Requirements

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

Meet the Mentors - AdWords For Beginners

Simple steps to increase your average order value

Mobile affiliate activity flourishes in 2015

Google Panda Added to Google’s Core Ranking Signals

Changes To Google Shopping Policies

Does your site speed measure up?

VS SEO Episode 1: The Phantom Update

Black Friday: Shoppers switch from bricks to clicks

Black Friday by Numbers!

Celebrating #ClicheDay with our top five social media cliches

Preparing for Penguin 4.0

Five Simple Tips to Successful Email Marketing

PPC Update: Changes to Google Shopping Data Feeds

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

SEO FAQs - Google Search Snippets

Customer Match In Adwords

User Testing - Choosing Who to Target and Why

Affiliate Marketing News - UK Customers Want Discounts!

Marketing Tips from the Experts: Understanding your Analytics Data.

Dealing with Google Webmaster Tool errors

Google's Taxonomy Update

We're Google Winners!

Improving your site's images for better SEO results

Facebook's Video Partners to Earn Ad Revenue

Highlights from the Google Analytics Summit 2015

Visualsoft awarded Google Analytics Certified Partner status

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

Google announce update to Mobile Search

A guide to choosing an eCommerce provider

Visualsoft client featured in eConsultancy post

VIsualsoft named as finalist for the BBC Digital Excellence Award

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

eCommerce Platform Magento Go to Close on 1st February 2015

Study reports over half of mCommerce users abandon checkout

Research highlights the need for mCommerce

Online sales up 16% in March

Visualsoft apprentice on the road to success

Values matter to Visualsoft client Charles Clinkard

Boxing Day a huge hit for online spending

Visualsoft Directors recognised in the Online Fashion 100

Visualsoft client named in The Times Fast Track League

Online shoppers crave a speedy checkout process

eCommerce experiences are not up to scratch

Are 76% of retailers missing a trick with mCommerce?

mCommerce spend is on the increase

Another three clients named as Drapers finalists

eCommerce is booming in 2011

45% of consumers prefer shopping online for fashion

Facebook revealed as important sales tool

European eCommerce on the up

UK consumer trends revealed for Christmas

Retailers urged to prepare for the festive season

40% of teens embracing eCommerce

Next's performance boosted by online sales

Amazon reports 51% sales increase

eCommerce sales boosted in 2011

Consumers embrace mCommerce around the world

80% of consumers say shopping online is cheaper

Research highlights the need to embrace changing email habits

Companies fail to communicate via social network platforms

UK online advertising spend hits £4bn

New payment system set to increase eCommerce

Digital boost for UK advertising industry

Social networking proves to be a big influence

More than £5 billion spent online during May 2011

On the road to PCI Compliance

mCommerce on the up

Social networking used to maximise online sales

CBI reveals predictions for UK high street sales

Sharp growth predicted in the m-Commerce market

Retailers suffer record fall in sales since 1995

Marketing trends for 2011 revealed

Online fashion spend up 34%

eCommerce growth threatening the high street

Online spend hits £4.9billion during February

Facebook reaches 30 million UK users

UK tops eCommerce sales chart

UK consumers name top three innovations

Online spend hits £5.1 billion in January 2011

Tips for a successful email marketing campaign

Internet shopping to increase by 18% in 2011

Results through relationships

Merry Clickmas!

Shoppers go online during cold weather

Another eight Etail Awards!

UK's eCommerce boom continues

Two Visualsoft clients named as Drapers finalists

Media spotlight focuses on Visualsoft

Online shopping predicted for 4% annual rise

Drapers report on Pritchards success

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

Get in touch today