Responsive web design

Project method: Self-directed

Toggle grid

Goals

I coded my first website in 1998, when I got my hands on an HTML 2.0 book and created a modest personal site over a single weekend. It wasn’t great, but as a first effort it worked. I started getting freelance work soon after, and my websites progressively got better.

I don't make as many small websites as I used to, but I want the ability to create a website here and there quickly. That's why I assembled my own web framework, Carbon, which is what drives the website you’re looking at right now. I like it for the same reason that developers like frameworks in general — the code is reusable, and the CSS and JavaScript are derived from a single source of truth, so that I don't have to repeat myself when I want to use something that I've already created somewhere else.

Process

A web development framework can be simple or complex. Something like WordPress is pretty awesome, since a basic hosting package has plenty of responsive themes and a content management system. It also means people who want a basic responsive website don’t need to hire a designer and a developer.

Some frameworks, such as Bootstrap, are sophisticated development platforms. Others, such as 960.gs and Skeleton, are responsive libraries for front-end developers.

Carbon is small, lightweight, and flexible. It includes a fixed-with canvas (960px), a 12-column responsive grid, and responsive navigation that swaps from a dropdown to accordion pattern at a pre-defined breakpoint. The [head] tag includes links to resources such as jQuery, a web font (Open Sans), the Google Maps API, and a responsive lightbox.

The responsive navigation is taken from a tutorial found on ResponsiveNavigation.net — it’s called the “Multi-Toggle,” and it’s both intuitive and effective, while easy to modify. I’ve added several CSS touches to my version.

The 12-column grid is crafted from Ethan Marcotte’s excellent Responsive Web Design (A Book Apart, 2011). As long as all divs in a row add up to 12 (and are followed by a clearing div), the design will stack below a certain breakpoint. My approach varies slightly from Ethan's since I use flush columns as a default grid, and then I apply responsive margins to objects, such as blocks of text. (An alternate grid with gutters also can be invoked).

Beyond that, Carbon requires a designer and a front-end developer, because the stock appearance is meant to be modified, and the content area is a blank slate. It is ready for design.*

*By me of course, because I have no plans to announce Carbon for public use. It's a fun project that I can continue to develop when I want to get in the sandbox.