October 24, 2012 | by Liam

What is Responsive Web Design?

This approach to web design can be quite confusing at first so to get started here is a definition of responsive web design; “A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.” Source: Stanford University, IT services.

So, responsive web design is in essence one website that works on numerous different screen sizes such as desktops, phones and tablets. With the explosion of mobile phones and tablets this approach is becoming more and more common. Responsive web design makes use of flexible layouts and images, the goal being to build web pages that distinguish the visitor’s screen size and orientation and consequently change the layout. A responsive web page uses a grid layout and image sizes are calculated by a percentage rather than fixed width parameters. In doing this the web page will have a more fluid layout that will resize itself to fit the display it is being viewed on, it will be in proportion to the screen size.

Ethan Marcotte coined the term Responsive Web Design in his article for A list apart and he describes the theory and practice of responsive web design in his brief 2011 book on the subject.

Here is a great infographic from social media agency my clever agency (http://www.mycleveragency.com/) to show the rise of mobile internet useage.

Desktop v Mobile Infographic

Taking into account the figures shown in the infographic above and considering the huge number of screen resolutions present in today’s market, the benefit of responsive web layouts are too great to ignore.


From Twitter