The term “Responsive” web design was coined in 2010 by design Ethan Marcotte. His inspiration came from the “responsive architecture” movement which looked for ways to improve energy performance and adapt buildings to their context: walls that automatically move, enabling more space when more people enter a room; or intelligent windows that change opacity when less people are in a room, pre-empting the need for privacy.
Ethan proposed that something similar was possible with web pages. Layouts that would change to suit larger and smaller web browser sizes, and – instead of a fixed pixel size – page items could be given a percentage value, proportional to their environment.
Up until this point, most websites weren’t made with small screens in mind
Smartphones were capable of browsing the web, but would squeeze a typical website down to a third of its original size. Not the easiest to read or navigate.
Some websites had a mobile version, which would strip away superfluous content and alter the design to match a smaller screen size. Which was fine for those with an iPhone, but already the smartphone market was saturated with different devices, at many different sizes, running on various different operating systems and using any number of web browsers.
And then came the iPad and the fast-growing tablet market. It was becoming unrealistic to build a separate mobile site to cater for each of these possible combinations.
Responsive Web Design provides a solution to allow the same site to adapt to a plethora of screen sizes
Using Ethan’s techniques, the width of the screen can now dictate whether you want three columns of text or one. Whether you want to use giant or smaller text for headings.
How many images wide you want your gallery on a tablet. This control liberated proactive web designers, who took up the challenge of dramatically changing their working processes in order to start designing “responsively”.
Now, in 2014, the buzz has calmed, Responsive Web Design is a standard process for any design agency worth its salt. But advances in technology keep us on our toes. How do we design for Google Glass? For TVs? Some digital agencies are now looking to take things even further.
Screen size can tell us a significant amount about the equipment on which a website is being viewed, but not necessarily the context or the user. There are more questions to consider• Is the user at home, outside or on public transport?
• Is the user at home, outside or on public transport?
• Is the user connected to high-speed broadband or a 3G network?
• What time of day is it?
• Does the device feature a retina display, requiring higher quality images?
New questions continue to arise and Responsive Web Design will continue to evolve to adapt to the new ways in which we use the internet.