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.

Updated Mini Slide Navigation

UPDATE: I have ‘retired’ the Minislide Navigation from the site. The code was old and antiquated. And there are more modern and elegant navigation solutions available out there that have the same basic functionality and UX. The Minislide navigation had a good run but it was time to move on.

So I’ve finally gotten around to “officially” updating the Mini Slide Navigation mashup that I did two and a half years ago. When I created the mash up back then, I was just hacking around and was completely un-prepared for the attention and positive accolades that this idea received. What was really cool was that two people – Rob Glazebrook and Brian McAllister – built on the work I did and made the navigation even better by making the page locator “snap back” to the page you are currently on.

So this time, I’ve taken what Rob and Brian did, and built on top of that. With my new version, I’ve incorporated some PHP into the mix, to enable the navigation be an used as a “virtual include” on your site, so you to centrally manage the navigation and have one change/addition cascade throughout the whole site. Through PHP, I’ve also enabled the navigation to indicate the proper area of the site two directories deep, and realistically, it could handle more if needed.

So go on over to the demo page and check it out. One note: I’m still learning PHP, so if the method that I used is way too novice or considered a pseudo-hack, please be gentle with me.

Mini Slide Update – Page Indicator


I updated the Mini Slide Navigation so that there is now an active page indicator, informing the user as to where they are within the navigation/site. This was a known omission in the original version of the navigation and it was also astutely called out in a comment on my original post.

I used the “decendant selectors” method in creating the active tab, where I gave both the page’s <body> tag and each navigation item their own unique id, so I could style specific elements of the page based on the relationship to the parent element.

As usual, I have only tested this out on Firefox 1.5 and IE 6.0. I only changed the CSS and made no changes to the SlayerOffice JS. For some reason, I am seeing the “tab slider” move slightly on the initial page load. I am not exactly sure why I am seeing this, and will investigate further. I think it may have something to do with the “z-index” element I am using in the CSS, but I am just not sure (and its very late when I am posting this and I am tired). If anyone has any insight into why this may be happening, please feel free to post it in the comments area of this post, or my original post.

Del.icio.us-ed

My Mini Slide Navigation mash up was discovered and posted up on del.icio.us this weekend. By Sunday 1/8/06, it had made it to the #2 slot on the del.icio.us/popular ranking (see photo).

As of Monday 1/9/06 Thursday, 1/12/06, its been tagged by over 400 750+ people. Not bad for a small “mash up” I whipped up late one evening.

I had to make some last minute edits to the page and directory. It’s been on my site for a while, but I still needed to put the files in a more accurate directory, so I was admittedly a little unprepared for the traffic and attention. Del.icio.us obviously accelerated this! :) I even got a small nod of approval from Dan Cederholm of Simplebits himself.

Update – I updated the directory for the Mini Slide Navigation so the files reside in a directory of the same name as the navigation (/sandbox/minislide/). I have a redirect in place on the old page.

Mini Slide Navigation

So I was recently playing around with a couple of navigation treatments that I’ve seen – Simplebits’ MiniTabs and SlayerOffice’s Focus Slide. And I came up with a navigation “mash-up” of the two. I’m calling it the Mini-Slide Navigation (click to see demo page). I’m not sure this is any great innovation here, and I’m not claiming it to be.

Update – I updated the directory for the Mini Slide Navigation so the files reside in a directory of the same name as the navigation (/sandbox/minislide/). I have a redirect in place on the old page.

I essentially applied the small Javascript used by Steve Chipman at Slayeroffice for his neat Focus Slide navigation to the equally neat Mini Tab navigation treatment created by Dan Cederholm @ Simplebits, with a few CSS tweaks. So instead of having the bottom indicators “appear” when you hover over the navigation link, the indicator slides between the navigation choices. So if you are a CSS purist, you can go with Dan’s creation. Or you can add Steve’s little Javascript (so Web two point oh-ish) and give the navigation a little bit of life.

This has been tested on IE 5 and Firefox 1.5, however I made no material changes to the Slayeroffice JS so the testing done there should be valid for this. Enjoy!

Related Posts:
Del.icio.us-ed
Mini Slide Update: Page Indicator
Smart Mini Slide
Animated MiniTabs

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.

Soft

I don’t know why I did it, but I made a Valentine’s Day skin for my web site. I must be married with children. :-) Just click on the “heart” icon at the bottom of the right column.

Update – The Valentines Day version of the site has been retired until next year since Valentine’s Day has passed.