Responsive Design on My Mind

January 24, 2012

Elizabeth McManus

A redesigned IS&T web site, due to launch in April 2012, will take advantage of responsive design – a concept that has garnered a lot of attention in the last year. Ethan Marcotte, an author in the field, has described responsive design as "a flexible foundation" for building websites.

In the past, web designers had to determine the fixed dimensions appropriate for most viewers of a website and then, as a workaround, build multiple style sheets for viewing the website on other devices (e.g., laptops, mobile devices, tablets). In addition to requiring a lot of extra work, these style sheets couldn’t guarantee that a site visitor would experience a user-friendly format on his or her device.

…and then all of this changed with responsive design.

The concept is simple: instead of creating a rigid, fixed-dimension layout for your website, you create a framework where the layout of your site ‘responds’ to the screen resolution of the device. It will display on all devices in a pleasing, usable format.

For many, the tipping point that drove home the concept of responsive design was the relaunch in September 2011 of the Boston Globe website. A key component of its responsiveness is that the number of columns displayed varies depending on the device. A three-column format is typically optimal for a desktop computer; a two-column format for most tablets, including the iPad; and a one-column format for mobile devices. All of these layouts ensure that the most critical content displays at the top.

Three-Column Format (optimal viewing for a desktop computer):