Just seven months ago I introduced the second version of my portfolio site. Last time, I was inspired to update after reading two books, and this time is no different. After reading Dan Cederholm’s Handcrafted CSS, and Ethan Marcotte’s article, Responsive Web Design I was once again inspired to update my site. But rather than call this update a “complete over-haul”, I have refreshed the site using principles highlighted in Cederholm’s book and Marcotte’s article.

Put simply, my site is now “responsive”. The term “responsive web design” was coined by Ethan Marcotte and is all about making your site able to handle any environment it’s put in and feel as if it belonged there all along. Now, no matter the size of the browser window, or the size of a device’s screen, my site will thrive.

Responsive web design is made up of two parts. The first is a fluid grid. A fluid grid is a shift away from traditional “fixed grid” layouts. Rather than have your site set at a certain width, a site built on a fluid grid will allow your content to better adapt to the environment it’s being viewed in (text and images will scale proportionally and spacing will remain intact).

The second part of responsive web design is media queries. What are media queries, you ask? Media queries are a CSS property that allow your site to detect the current environment (device) and display and then reformat the site to fit that device. Think of media queries like a chameleon: no matter their environment, they always blend in. Using media queries, your site can look different when viewed on a desktop, tablet, or mobile phone. But the power of media queries, is that you don’t have to build completely new sites for each query. Media queries simply allow you to have alternate sets of CSS that are loaded when an environment is detected. A chameleon is always a chameleon, but when it’s near green flowers, it turns green and when it’s near blue flowers it turns blue. There are not two chameleons, but rather, one that smartly shifts itself to become part of it’s environment.

There are only a handful of sites on the web today that embrace the concept of responsive web design, in part because the idea is so new. Part of my goal in refreshing my site was to help push forward this practice that I feel will prove essential in the years to come. More and more today, iPhones, iPads and other mobile devices are becoming the favorite way to access the web. By making our sites responsive, we can ensure that our message will be heard across all devices, from desktops and tablets, to the devices of the future. Responsive web design is more about considering a different frame of mind, rather than implementing a new technology. So now, go out, learn more and help usher in the next phase of web design.