100 ideas that changed the Web: Responsive web design

Picture credit: Yangzai/Thinkstock.com

We work, shop, play, socialize and relax in front of screens. We have a screen in our pocket, a screen on our desk, a screen on our lap and a screen in our front room. We use multiple screens at the same time. We move between screens to carry out tasks.

Whether we are consuming media on a PC, a tablet device, a smartphone or the TV, we like content optimized for that particular device. This is not easy when they all have different screen sizes and interfaces and are used at different points of the day for different tasks.

Websites are traditionally optimized for desktop browsers, but increasingly the most important screen is the one on our phone. It is the last screen we look at at night. It’s the one screen that cuts across our work and leisure time.

Content optimized for larger screens often results in a disappointing experience on smaller screens. Cropped images, wrapped navigation, rollovers no longer working and illegible text are all common degradations.

Designing for a smaller screen is equally unsatisfactory at larger resolutions. Traditionally, this has meant different layouts for each device, but with ever more screen sizes to optimize for, this is a huge task.

In a May 2010 article for A List Apart, Ethan Marcotte suggested a solution. Inspired by responsive architecture, where buildings react and adapt as people pass through them, he coined the term ‘responsive web design’ (RWD).

In the article he states: ‘Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice Responsive Web Design.’

Responsive web design makes no assumptions about a browser window’s width. It responds elegantly to the device using ‘media queries’, a World Wide Web Consortium standard. Navigation can be adjusted, images can be repositioned, content can be re-aligned and font sizes adjusted. It is a better experience for both the user and the developer.

Despite the hype, responsive design is just good design. Since the birth of the Web, designers have had to create webpages that worked at multiple resolutions. Screen resolutions have always varied. Just like users, they come in all shapes and sizes. It is the designer’s job to accommodate them.

Extracted from 100 Ideas That Changed the Web by Jim Boulton, published by Laurence King Publishing, £9.95.

Related Stories

Leave a comment


This will only be used to quickly provide signup information and will not allow us to post to your account or appear on your timeline.

30 Aug 2014, 3:05 p.m.

"In a May 2010 article for A List Apart, Ethan Marcotte suggested a solution"
Oh, please. The web has been responsive from its inception two decades ago. It had a free flow layout and supported percentage based width and height specifications. Also media queries (which are the technical base of any responsive design) have been existing for almost a decade in 2010. Don't make it appear as if someone in 2010 have invented it, because that's simply not true.


12 Nov 2014, 3:42 p.m.

There are many reasons to execute a responsive web design or adaptive web design strategy and employ the latest mobile application development techniques. What often gets lost in the mix is the ROI and benefit of this strategy. While businesses typically look only at the cost of such a strategy, what they fail to recognize is that the expense and resources used to maintain numerous versions of one site is significant. That cost consideration must also include the likely cost of human error and the cost of lost revenue when one version of the site doesn't work because mistakes were made in updating code or in the initial or modified design. The bottom line is that, while it may take some time to create or modify a site to ensure a high-performance, scalable, intuitive site with a great Ux design, the cost of ongoing maintenance and support and the additional revenue and productivity, and improved customer satisfaction must be included in the strategy review.