Responsive Web Design : Explained with images

Why read this?

Not really sure how Responsive Web Design works? Here's explaining Responsive Web Design with images.


Every website owner must have heard about the terms RWD and CMS. But it wasn’t much of concern to those website owners thinking that it wouldn’t help their business. But RWD (Responsive Web Design) and CMS (Content Management System) are two keys factors that enable easy functioning for the owner and provides a user friendly experience to the visitor, which in turn helps the business.

 The change in a website bounce rate spikes to 100% when a page takes 4 seconds or more to load. It jumps to 150% if a page takes 8 seconds or more to load. (Source: Mobile Joomla) 

In today’s post we would explain in detail, the difference between a RWD and a non RWD site. After which you would understand what benefits you could provide to the digital audience.

In short explaining what RWD is

Responsive Web Design (RWD) is a new approach to designing websites that facilitates competent and automatic re-sizing of the website based on the user’s browser, device and resolution.

Responsive web design has come as a boon for user’s that use various devices such mobile, tablet, laptop or a PC to view a website.

Difference between a RWD and non RWD site –

Here are two sites designed by Adams Creation for Silent Creek Resort (RWD Site) and Fernville (Non RWD Site). Through examples we would explain how a RWD and non RWD website would react on different resolutions –

Desktop Web Browser (Average Resolution – 1280 X 768)

Non Responsive Site:

Screen Shot 2014-11-07 at 11.28.20

Responsive Site:



On the desktop view (1280 X 768), both Non Responsive and Responsive site would render the same. But the problem for non Responsive site  comes in when the user uses different devices to view the website.

 40% of people will abandon a web page if it takes more than three seconds to load. (Source: Econsultancy


Mobile Phone Browser (Average Resolution – 320 X 480)

Non Responsive Site:

Screen Shot 2014-11-07 at 11.29.45


Responsive Site:



While viewing the non Responsive site on a mobile device (320 X 480), the site rendered is incomplete and user would have to scroll through to view the content on the home page. This might lead to miss-clicks while scrolling.

On the other hand the Responsive site has reformatted itself based on the device used by the user and enables complete view of the website without any problem.

The menu in a Responsive site has vertical scroll, making navigation easy. Whereas non Responsive site has both horizontal and vertical scroll.

Another aspect of responsive web-design is media queries, in which the website would choose a suitable image for the device from a pre-defined gallery while the page loads.

 46% of mobile users report having difficulty interacting with a web page, and 44% complain that navigation was difficult. (Source: Keynote


Tablet Browser (Average Resolution – 768 X 1024)

Non Responsive Site:

Screen Shot 2014-11-07 at 11.30.09


Responsive Site:



When the user opts for a slightly bigger device to view the website, like a tablet (768 X 1024). The problem in a non Responsive site still exists, as one can see in the image that the information rendered is incomplete and requires scrolling for more information.

In an Responsive site the view remains the same as the user can access complete information on any device the user uses.

If you are also looking for a new site website to be designed or thinking upon upgrading your existing website to an RWD (Responsive Web Design) one then you are at the right place as Adams Creation provides solutions to all your website and graphic design needs. Do feel free to contact us for further queries on your latest up to date website, which will match the industry standards.