In 2010 I read Ethan Marcotte’s landmark article, Responsive Web Design. After a confusing comment about fixed-width layouts not loosing their place in the world, I commented...

This kind of forward thinking turns the desired attributes of the print medium into a handicap, and lets us explore the possibilities of the web.

That’s been my position ever since.

One week later, I had my first, while rather embarrassing, responsive website. I shot off a link to Ethan, and he looked past some awful design and gave me an A for effort. Featuring a quote of greatness from my then girlfriend (now wife), I was just starting to explore the scope of what Responsive Web Design means. Since that time, I’ve created a handful of responsive sites, and one large application for a forward thinking company, and have hardly scratched the surface of what is possible.

I’m excited to release another variation on this site that takes advantage of both a fixed grid, and a responsive design. I’m pretty charged to put the techniques I learned in making this site to use on future projects, and will give a few notes on why’s and how’s.

Good Designers Redesign, Great Designers Realign

At the start of revamping my site, I threw together a few layouts that, well, didn’t work. Suppressing my desire to create a new design from ground zero, I decided to follow Cameron Moll’s old advice, and opt for a realign vs. a redesign.

The old design lacked structure, and organization. With free-floating elements, there was a deep feeling that bothered me, that the picture was not beautiful. I decided to work with a fixed grid to give the layout some rigor and structure. What came out, what a much more organized blueprint, and as with all grid based designs, everything just fell into place.

Design combines a static grid (85px wide, and 15px gutters), with a fluid layout.

Responsive and Dynamic

At the start, I knew I wanted to add a lot more depth to my portfolio, showcasing projects with more than just a single image. I decided to create a flexible, and responsive image carousel that would allow me to add some information for each project, and allow prospective clients to easily scroll through my work. It was a challenge to create a module that was both responsive, and dynamic, but in the end was very happy with the result.

Using a fixed grid made the rest of the process surprisingly painless. A few HTML tweaks and Media Queries later, the site was (once again) fully responsive.

I’ve long appreciated the ingenuity that comes from wrangling a site into a reactive frame... while there are still a few bugs to squash, and places to improve, it was a pleasure to apply all I’ve learnt in the past 1½ year on a personal project!

Full Responsive Layout

I’ll soon release a responsive redesign realign of CSSButton.me, and be happy to push past the naysayers and antagonists of RWD into the next generation of websites and apps!