What is Responsive Web Design?
Responsive Web Design (RWD) allows a web page to be displayed differently depending on the size of the web browser it is being displayed on.
Why is Responsive Web Design important?
RWD has become essential for today’s websites as the amount of mobile traffic now accounts for more than half of total internet traffic1. With 3.5 billion mobile internet users worldwide 1, this figure has now surpassed the number of desktop Internet users.
If you want users to visit and interact with your website, it’s important to make their user-experience (UX) as good as possible no matter what device they’re viewing your site on. These days, a user won’t tolerate having to pinch, zoom and side-scroll to be able to view your content.
Google has also started to boost the ratings of websites that are ‘mobile friendly’ in a move described as ‘mobilegeddon’2.
-
Laptops & Desktops
45%
-
Smartphones
50%
-
Tablets
5%
-
Other devices
0.12%
1. 'We Are Social' - Digital in 2017: Global Overview
2. BBC News - Google's 'mobilegeddon'
mobile traffic now accounts for more than half of total internet traffic
How is a Responsive website made?
A Responsive website design is achieved through the use of a fluid layout built with HTML and CSS and usually constructed within grids scaled by proportion rather than in fixed pixel widths.
The layout of a page may change where the browser window is small. For example, columns may stack on top of each other until there is enough width for them to be placed side-by-side.
Fluid images are used so that they fit the available space and will scale up or down whilst maintaining their correct proportion and not be stretched or squashed.
Design considerations
The best way to tackle any RWD website project is to plan the design ‘mobile first’. This approach starts with the core page content in a design optimised for the small display on a mobile. Then, the layout can change with more styles being progressively introduced (sometimes with additional content) as the available screen space increases on larger devices.
This means that the user always gets the best possible experience taking into account the size of their browser window and the features supported by their browser.
