Stephanie Briones

Diving into Responsive Web Design

I come across brilliantly designed websites all the time, but my favorite have to be the ones with the delightful surprise of a responsive layout. They are extraordinary.

Truly responsive websites are perfect on all browser window sizes and collapse and flow as you resize your browser window. They scale to fit browsers on mobile devices and tablets, as if they were created specifically for that device. I love to see columns and menus rearrange in a gorgeous, practical way.

A perfect example of Responsive Web Design from Trent Walton.

The idea of being able to do this myself has always been sort of a far away, "maybe one day" type thing in my mind, but it turns out that it doesn't have to be. There are so many tools out there now, but the one that I've used, and loved is The Goldilocks Approach from Front.

There's also Responsive Web Design by Ethan Marcotte, which will explain how to make your design responsive. The list of great resources on Responsive Web Design is ever growing.

It seems silly to me now to put off making my web designs responsive, especially given how amazing the results are in the end.

I recently converted my blog to a responsive layout using The Goldilocks Approach and was very surprised at how quickly I was able to get it working. It helps that it's a really simple website, but it was a nice experience.

I'm currently working on a web app design that will also be responsive without any boilerplate stuff. It's a bit more complex than a blog site, so it's a great learning experience.

Here's some eye candy, in case you enjoy looking at Responsive Web Design as much as I do:

  1. Responsive Web Design techniques, tools, and design strategies, Smashing Magazine
  2. 60 Examples of Responsive website design, Inspiration Feed