Your opinion matters! Please fill in the InfoQ Survey!

Guidelines for Responsive Website Design

| by Abel Avram Follow 4 Followers on Jun 12, 2014. Estimated reading time: 2 minutes |

A note to our readers: As per your request we have developed a set of features that allow you to reduce the noise, while not losing sight of anything that is important. Get email and web notifications by choosing the topics you are interested in.

This article includes several guidelines for creating websites that scale for different screen sizes and form factors.

During QA TechWeek 2014, David Walker, Principle Technologist for QA,  has presented guidelines for creating a Responsive Website Design during the session Going Responsive with Foundation. Walker mentioned several ways of creating websites for mobile applications starting from an existing one for the desktop: Native App – one for each mobile OS, Embedded HTML5 – using PhoneGap or similar, Filtering at the server – separate websites for the desktop and mobile devices with redirection between the two.

After the pros and cons for each of these methods, Walker introduced Responsive Website Design (RWD) which involves creating a single website whose layout, format and content is adjusted on the fly for the device it is displayed on using HTML5, JavaScript and CSS. The main benefits of RWD are less duplication of content and having the website ready for all sorts of device sizes including future ones. The cons are: needs excellent CSS and JavaScript skills, some of the resources may be large for mobile networks, and requires polyfills for older browsers.

To be able to create a responsive design, Walker suggested following a number of guidelines:

  • Creating a fluid layout. All container widths must be defined as percentages of the browser’s viewport.
  • Using CSS3 Media Queries. Different styles will be applied to different media types –screen, print, TV, etc.- and media parameters –width, height, color, resolution, etc.
  • Using fluid images. Image size should be adjusted, being not larger than the maximum display width.

To decide what style applies to what media type one needs to establish which are the different display widths that require different styles. For example, uses over 40 styles associated with media queries. They can be seen with the Responsive Inspector, a Chrome extension. By using all these styles, the content of is rearranged at the browser level so it is shown on devices with different widths without having to scroll the page horizontally.

According to Walker, doing RWD also requires considering the following:

  • Optimizing images for different devices and connection speeds
  • Changing navigational patterns for mobile UI/UX
  • Restyling links and buttons to be touch friendly
  • Dynamically resizing fonts to work better at different screen resolutions
  • Loading content as required, not hiding it from the screen
  • Providing retina versions of graphics

Walker also demos how to create responsive websites with Foundation, an open source responsive front-end framework. Another similar solution is Bootstrap, a framework initially developed by Twitter. 

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you