A Decade Into Responsive Web Design

From Ethan Marcotte, the ‘inventor’ and person who established the concept of ‘responsive architecture’, on the process of how his epiphany came to be:

Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people would move them apart for a bit of solitude, or push a few chairs together to sit closer to friends. We got to excitedly chatting about them. I thought there was something really compelling about that image: a space that could be controlled, reshaped, and redesigned by the people who moved through it.

I remember spending that evening reading more about those chairs and, from there, about more dynamic forms of architecture. I read about concepts for walls built with tensile materials and embedded sensors, and how those walls could bend and flex as people drew near to them. I read about glass walls that could become opaque at the flip of a switch, or when movement was detected. I even bought a rather wonderful book on the subject, Interactive Architecture, which described these new spaces as “a conversation” between physical objects or spaces, and the people who interacted with them.

After a few days of research, I found some articles that alternated between two different terms for the same concept. They’d call it interactive architecture, sure, but then they’d refer to it with a different name: responsive architecture.

A light went off in my head. Responsive felt right for what I was trying to describe: layouts that would just know the best way to fit on a user’s screen. A user wouldn’t have to tap or click on anything to get the best design for their laptop or smartphone; rather, the design could fluidly adapt to the space available. It’d just respond.

And to think that before this, the collective ‘we’ had to look at web pages that were the same size and did not adjust to the different screens or devices that were beginning to pop up out there in the wild. Like the animals we were.

Alternate Style Sheets

I have created some alternate style sheets for my site. The various flavors can be chosen by clicking on any of the four square icons on the top of the right hand column on each page. I have a few more flavors that I would like to add to the mix, however they are a work in progress at present.

The Blue style sheet is the primiary style sheet for the site and it also holds the core page structure and page presentation of the site together, including the navigation, the header the main body and the right hand column of each of the pages. To enable the alternate style sheets (the Orange, Purple and Earth tone one), it was really a pretty simple adjustment. I simply pulled out of the main stylesheet the elements that needed to be changed, placed them in their own CSS file, and switched out the specific images/icons and settings to reflect the color scheme I wanted to employ. I then used Paul Sowden’s Style Sheet switcher javascript to enable this functionality. So when the style sheet switcher calls one of the alternate style sheets, it essentially only switches the elements that I changed but leaves all the other attributes from the primary style sheet intact.

I will highlight the other new flavors I am working on in a future post, but my goal is to go one step further with these style sheets and develop a different page structure and interface similar to the way CSS Zen Garden does it.