Intro to Responsive Layouts

Recently, I’ve started to work on creating websites with responsive layouts. Responsive layout design means that the presentation of the website is adjusted to improve the fit at different resolutions. In the past, I have usually targeted 1024 as the minimum horizontal resolution that is needed for an optimal experience. But with phones and tablets being used more to browse the web, it’s becoming more important to give a first-rate experience to visitors using mobile browsers as well as desktop ones.

Unlike desktop browsers, mobile browsers automatically zoom out the page to fit the availability device resolution, so the user doesn’t have to deal with horizontal scrolling (unless zoomed in). The downside is that text gets cramped and hard to read, and clickable buttons and links are hard to tap accurately. Mobile-specific versions of website have been created to solve this problem. This made sense when mobile devices were primarily low-resolution phones. But recent model phones and tablets have much better resolutions that are capable of delivering a better experience than that offered by the low-resolution mobile-specific version of a website. What’s really needed is a modified desktop experience that is optimized to provide better legibility and usability on the reduced resolutions of mobile devices. Enter responsive design.

Examples

Responsive design is facilitated by CSS media queries, which are supported by modern browsers. Media queries enable control over which stylesheet selectors are applied by on rules that test for minimum and maximum widths of the device area. CSS is generally written so that when viewed in a browser that doesn’t recognize media queries it will fall back to the default display for the desktop. Here are some examples of websites that feature responsive designs:

http://www.bostonglobe.com/
http://steff.me/
http://stunningcss3.com/code/bakery/index.html
http://51bits.com/
http://www.stpaulsschool.org.uk/
http://www.kingshillcars.com/
http://www.dolectures.com/
http://sasquatchfestival.com/
http://spigotdesign.com/

Sass Approach

Sass is a CSS pre-processor. Using a compiler improves in a fundamental way the ability to build complex, yet maintainable CSS. There are other CSS pre-processors available too. Sass is my favorite for two reasons. One, the language includes conditional and looping statements. And two, Compass—a pre-built library of best practices for using CSS and Sass.

I don’t like to re-invent the wheel when possible, so when working on a responsively designed website, I look for existing work that can be leveraged. There are several responsive CSS frameworks and approaches emerging on the web; some of which are purely Sass-based and others are CSS-based often with a Sass adaptation. At the moment, I don’t think any of them are a good fit to use as a best-practices foundation for building a responsive site, but reviewing them and trying them has been a great learning experience to gain experience with responsive techniques. Here’s a run-down of the ones I’ve looked at. I applaud the developers for pioneering this area and paving the way by demonstrating various responsive layout techniques.

http://lessframework.com/
http://goldengridsystem.com/
http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/
https://github.com/ntreadway/responsive-sass

Know of any others?

1 thought on “Intro to Responsive Layouts”

  1. I wished to thanks for this wonderful examine!! I undoubtedly taking pleasure in each tiny little bit of it I've you bookmarked to examine out new things you post…

Leave a Reply

Your email address will not be published. Required fields are marked *