Editor's note: This story is part of a series we call Redux, where we're re-publishing some of our best posts of 2011. As we look back at the year - and ahead to what next year holds - we think these are the stories that deserve a second glance. It's not just a best-of list, it's also a collection of posts that examine the fundamental issues that continue to shape the Web. We hope you enjoy reading them again and we look forward to bringing you more Web products and trends analysis in 2012. Happy holidays from Team ReadWriteWeb!

Filament Group Makes A Big Step In The Evolution of HTML5

The Boston Globe enlisted the services of Filament Group, a Boston-based design and development firm that focuses on accessibility. Below is a transcript of a conversation between ReadWriteMobile and three Filament Group designers and partners that were instrumental in bringing responsive design to reality. Todd Parker and Scott Jehl are both partners while Mat Marquis was one of the main developers that was "camped out" at the Globe during the design process. The man they call the "father" of responsive design, Ethan Marcotte, was not available to comment at this time.

Check out BostonGlobe.com's responsive design in action.

On how it got started

Todd Parker

I think we started the project in November. We started the front-end templates and were working with the designers up until late spring and then we have been doing a lot of integration support through the summer up until the launch.

Technical Challenges

I think up until now it has only been used in blogs and portfolios and things like that. The pieces have been there but it just hasn't been put together. I think it is also having a client that is that this is brave enough to say that this important for their business and makes the leap. Because it does take more time and more testing and things like that than your typical Web developer that can just throw something together.

So, in terms of technical challenges, I think a lot of it was media queries. A lot of things are reliant on media queries and Internet Explorer doesn't really support them in the versions that you can target. So, one of the things we had to target was a polyfill that can be used for media queries. There were some others out there that were too slow for our needs and so we created RespondJS that is a really fast, lightweight polyfill for media queries. That is one of the first things that we kind of had to solve on this project to really make it work. Otherwise it was just too slow.

The other big challenge that we were working on here was responsive images. So, everything we are doing is taking a mobile-first approach so that means that the page that is served up is as lean and lightweight as possible and that includes images. So, if you look at the Globe's site they have these big images that are a thousand pixels wide and they are really big and really rich, like the Big Picture, on all the article pages. So, what we doing in the HTML is actually referencing a smaller, low bandwidth image and we figured out a little trickery that if you are on a device like a tablet or a desktop that could use the high resolution image and if it does that is a loaded reaction flip. So, if you are on mobile you get the low resolution image and if you are on a browser or a tablet you get the high resolution image. So, delivering the appropriate image to the appropriate device was another technical challenge that took up quite a bit of work to actually work in a real CMS environment.

Next Page: More of the discussion with Filament Group and pictures and video of the new BostonGlobe.com.