A bit about responsive web design

I recently launched a new KUCRL website for our lecture series, CRL Learns. We had been running some outdated backend software and the whole look needed to be refreshed, so I decided to take the opportunity to try out something that has been getting a lot of press lately, Responsive Web Design.

Let me back up a little and explain a little bit about what responsive web design is. In traditional print design, it is possible to take a design, say for a poster, and use the design elements across a variety of media. For example, we might use the fonts, colors, and photography, but scale them down to fit on a postcard, or we could blow them up and make a billboard, or we might even create a half-page magazine ad. Based on the size and the way it is to be printed, the designer can adjust the elements to make sure they fit properly and are appropriate (readable, balanced, etc.) for the display medium.

Until recently, this wasn’t the case on the web. If you viewed something on your computer screen, it might look fantastic, but when you went on a mobile phone, it would be extremely tiny and unreadable. Or, you might view it on a giant wide-screen TV and it would seem to ignore a lot of the on-screen real estate and seem inefficient. Things got a little bit better with the invention of mobile specific style sheets, but then you were basically designing two separate sites, often with little to do with each other.

Then the notion of responsive design took hold. As mobile devices like phones and tablet computers exploded on the scene, web designers had to find a way to make each web page look it’s best on whatever screen size it was being viewed on. Responsive design is, at it’s simplest, responding to the ever-changing and diverse spectrum of screen sizes and resolutions that web designers have to take into account when creating a website.

Take, for example, the new CRL Learns website. If you drag your browser window and make it smaller, you’ll notice that the two-column layout turns into a 1-column layout and the font size gets larger. This is an attempt to make the site more easily read on small mobile phone screens. If you drag the window on a larger 1900px-wide screen, you’ll see the 2-column layout turns into a 3-column one that uses the extra screen space to it’s advantage.

It’s still an evolving practice and not all browsers are on board, but to me, this is the web design of the future and worth paying attention to. In addition to CRL Learns, below are some more examples of the work going on in responsive web design right now. Drag your window smaller and larger to see them respond live to your screen size!

The Boston Globe – such a smart and classy design
Jessica Hische, illustrator
The 2011 Build Conference
Hicksdesign, graphic design
A great introduction to Responsive Web Design on A List Apart.


Related posts:

  1. Learning your craft: Universal Design for Web Apps
  2. The Importance of Design
  3. Learning your craft: Assistive Technology & Universal Design
  4. Tips for an easier design experience
  5. Museum design as inspiration

David Gnojek

I'm the art director/designer for the KU Center for Research on Learning. I also enjoy photography and music.