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 firstname.lastname@example.org.
(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