The web as we know it has changed dramatically, and it continues to change every day. Screens are greatly varying in sizes, and users need information faster and faster. How do we deliver content more efficiently and usable across such a wide variety of devices?
Responsive CSS Frameworks are the answer. Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
I had the chance to attend some great lectures on this topic at An Event Apart in Austin, and at Gatorworks we jumped right on in.
To be as helpful and concise as possible I’ll try to keep this short. Ethan Marcotte went over Responsive Web at An Event Apart, and his first step was layout. You have to start small. With such a variety of screen sizes, a 1000px (width) site just won’t work for the majority of users. First, you have to design for your smallest screen then use a flexible foundation to adapt to larger screens. Part of this will require the use of some abstract thinking, and for the developer it can entail a little math. Don’t worry though, I hate math as much as the next person and it really wasn’t as bad as it sounded.
Imagine your site now. You’ve designed a beautiful grid-based mobile layout. So sure, it looks great, but how does it translate to a computer monitor? Here’s an idea of how Responsive Web would work – grab the upper left and bottom right corners of your screen and stretch your site out and envision what happens with the layout of your site once it hits certain resolution benchmarks. Maybe at 800×600 it goes from a 1 column layout to 2 columns. At 1280×760 it goes 4 column. Here’s a quick example of this: The Boston Globe Responsive Website. Notice how the layout changes as you drag the web browser window smaller.
To accomplish this, the website layout should abandon the pixel. Layouts now should be setup in EM’s or percentages. Setting all your main layout defining divs as percentages will allow your site to grow and shrink as necessary. The other step in this process is the CSS “media-query.” It is widely accepted as a standard in CSS and defines exactly what will happen once your site goes below or above a certain width, allowing for massive amounts of customization to fit every one of the plethora of screen sizes. So, basically you’re saying, “At this size, do this.”
Handling images properly is the final step. As I’m sure you’re aware, there is no inherently resizeable image format made specifically for the web. Sure, you have jpg, png, gif – all of these are great, but none of them can be resized on the fly. Until we have that file format, there are a few work-arounds available. You can use jQuery to make an originally large image smaller based on the browser width or you can use media queries to call a different image for each width. Ideally, we’d use one image for all sizes and have it resize on the fly, but until that day comes we have to work with what we have.