A short while ago, the Boston Globe rolled out a redesigned website. To say that it was just redesigned is an understatement, though – the new entity is the result of Responsive Web Design.

So, why jealousy? I have not yet had the opportunity to work on a responsive redesign yet; REALLY jealous of all parties involved!

This very buzzwordy descriptor is a new philosophy in web design where content is delivered in principally the same manner to all devices but its presentation is adjusted to accommodate the browser’s screen size and orientation. There is a single site that works for both desktop and mobile displays in both portrait and landscape. In the past, this has been accomplished by developing a site per visitor type – one site for the iPhone visitors, one for Blackberry visitors, a ‘main’/’regular’/’desktop’ site, etc. Sure, designers and developers could combine some of the views and use a generic ‘mobile’ site, but the idea was the same.

The Boston Globe site is one of the first big names to implement a full redesign using this responsive philosophy, which is why the new site has garnered so much attention. Take a look for yourself – open the site, then resize your browser and watch the content shift. Image sizes adjust; column widths shrink; eventually columns start to drop down to be pillars, instead of side-by-side; the navigation shrinks and eventually starts to drop items. The whole thing is just a marvel of web design.

The point of responsive web design is not to accommodate this type of resizing – a lot of sites now use fluid layouts, so as you expand your browser the line lengths increase – rather the point is that the site naturally respects your browser size and remains device agnostic. You’ll get a slightly different experience if you move from the Droid to your desktop, or rotate your iPad from portrait to landscape, but you’ll never get a different site. You still have access to all the same content without having to click the “full site” link from your mobile browser.

Upstatement, the Filament Group and a few contractors (notably, Ethan Marcotte, write-up) worked together to create this masterpiece. Upstatement’s write-up is pretty thorough. If you’re into it, give it a read. Jeremy Keith has another great journal article about the Boston Globe’s new site, and the response he’s witnessed.

Jason vs. Semantic CSS - establishing a visual outline in your stylesheet

Let’s move beyond simply linting our code, and delve into creating a visual outline of our CSS.… Continue reading