Responsive Design

It has always been a big part of my work as a consultant to help designers of the old school (i.e. print) transition to interactive designs. Leaving taste aside, drop shadows on top of gradients within rounded corners just won’t work across all browsers. Even more so, responsive design is a concept that a lot of people don’t grasp after a simple review.

It often starts with the question “how big should I design this site” and I already know it is going to take some time to explain: there is no set size, no standard layout width, let alone height.

The idea of a flexible layout might even be scary to some but good examples help explain: View www.resourcesnyc.org, www.devastudios.com, www.toymailco.com on your desktop browser and then on your mobile device and you’ll notice the difference in layout. But these sites don’t have alternate mobile versions; they are the same content, the same actual file but using different style declarations.

Often, content is hidden or displayed based on the screen resolution: there are certain features that may become pretty useless on a mobile device so you drop them. Just like we might hide graphic elements that don’t serve any purpose other than eye candy.

Interestingly enough, there used to be certain guidelines in terms of “best size”: a small desktop monitor might be 1024px wide and a handheld device might be 320px while the big desktops are 1600+ px wide. These used to be defined as breakpoints in stylesheets that allow content and layout to adjust to these devices.

But with the advent of tablets and ultra-light portables, there really is no use in setting breakpoints. In other words, prepare your designs so that they look good at ANY possible size. Consider that somebody opens your site in a full screen browser on their 27″ monitor.

We just will never know what browser size your site will be opened in so “think flexible.”

* required