RESPONSIVE & ADAPTIVE WEB DESIGN. WHAT IS IT AND WHAT'S THE DIFFERENCE?

What is Responsive web design and Adaptive web design, and what's the difference?

Although this has been around for some years it has been fairly recently that companies and individuals are really starting to take notice of how their websites are viewed on different devices, from large monitors down to mobile phones, tablets, laptops etc.

As with everything in the web world a lot of complicated explanations for the terms Responsive and Adaptive are given and what you should or shouldn't use. The plain fact of the matter is quite simple:

"Your website needs to be clearly visible on all devices. It also needs to be optimised to work well on the particular device it's being viewed on"

"More and more users are viewing your site on a mobile device so it makes sense to ensure they find it clear and easy to navigate which means making it's layout slightly different for the different size devices"

Now how this is done and the different methods to achieve it could be discussed all day however this section should explain a couple of things:

Responsive Web Design (RWD)

..is programing your website so it responds to the size of the browser or device screen resolution – this is a “fluid design” and your website will respond to changes in your browser – ie if you make your browser smaller on a desktop screen your website will respond to the change and it's layout will look its best for that size screen/browser window.

Adaptive Web Design (AWD)

..is programming your website to adapt to the device it is being displayed on. This means that the CSS3 and @media rules will check to see what device it's being viewed on and then apply the correct layout/style for that device.

So What's the difference?

The main difference is that an adaptive design will not respond to a browser window on a desktop monitor, for instance, the way a responsive site will. It will decide it's on a monitor or XxY resolution and set the layout accordingly thus when the browser window is shrunk the layout will not change. If the site is responsive it will change.

Yes there are other differences which go into more technical depth and we're more than happy to tell you about them but would rather do it over a cup of coffee!

It's down to your preference whether your site is built as Adaptive or Responsive and we're always here to give you advice in order to help you make that decision. At a later date another section may be put up to list the pros and cons – if you're interested in them please email us on info@synccreative.co.uk.

(Which one does this site use? This site is developed using Responsive Web Development - shrink your browser and see it change!)

Find out about Google's Mobile-Friendly Algorithm