Responsive design is a Web design approach aimed at building websites that provide an optimal viewing experience in different devices – be it a PC/Mac, tablet or smart phone.
This method makes the website render elegantly in each device by detecting the dimensions of the viewing screen.
Responsive websites respond to the screen size and adjust themselves accordingly. If you are reading this post on a PC or Mac try resizing your web browser and watch how the layout of this page adjusts accordingly. This approach is an evolution from the creation of “mobile friendly” websites utilised prior to the improvement of CSS rendering in more modern browsers. The method works by interchanging CSS (the code that controls a page’s layout) commands dependent on the screen size.
Click the image below to view an example of how content layout is adjusted dependent on the viewing device.