What the @#$% is Responsive Web Design?

Nov 12, 2012
responsive web design toronto canada
 
If you are scratching your head over the latest web design term then you aren't alone. It’s a phrase thrown around a lot of late for a reason. It’s cool and works to solve the problem with website appearance issues across multiple devices.

Responsive Design is a way of coding a website so that it adjusts according to the resolution of any screen. 

Depending on the size, the website will adapt to fit appropriately. All the elements of the website will adjust, move and re-size, making your viewing experience seamless across all devices. 
 
This essentially means creating up-to 5 sets of templates but can vary depending on the project requirements. One for each main device or resolutions: Desktop widescreen monitor, tablets (horizontal and vertical), Small phones (horizontal and vertical).  You can even now add iPad mini and eReaders to the list of devices that you can potential adapt too. 
 
Responsive design isn't the solution for all web presence because it will be a little more work to implement and manage but it does work well for information rich websites. Most good Content Management Systems will provide some functionality to accommodate responsive designs but these additional templates will need to be wire-framed and designed for the approach to work. 

Recent examples of responsive websites: 

http://bostonglobe.com/
http://www.smashingmagazine.com/

Here’s a demonstration of Responsive Design in action: 

Responsively Illustrated is a simple interactive experiment with responsive design techniques. Each device illustration is rendered using the same basic HTML which adapts its appearance to the changing viewport size.   
http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
 

About the Author

Tony Tullio

Tony Tullio is a veteran in the interactive business and Director/Founder at Inorbital and always looking for great web apps and useful websites. Let us know what you think about this topic by commenting or rating or connect with him via Twitter  LinkedIn