I was made aware of the Boston Globe’s new website thanks to a Gawker article. To put it simply, the content adjusts itself in response to the width of the browser. This function is called responsive design as explained in an A List Apart article.

I ran Boston Globe’s website through Builtwith.com’s website to learn more about the technologies controlling the page. Their results revealed only two properties: the framework was built in ASP.NET and the document information is X-Frame-Options. I had not heard of X-Frame-Options but the explanation reminds me of earlier websites attempts at keeping you from right-click saving images:

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a frame or iframe. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

To learn more about their website (since I am tasked with redesigning Darien Library’s website), I checked the source code and found the following items which were of interest to me:

  • Five lines dedicating to sniffing out which version of IE a user of might be using
  • A reference to an Apple friendly icon (something I learned about over the weekend for my own usage)
  • Five Javascript references with the most interesting name being: lib/modernizr.custom.min.js (which I found out is a reference to the open source Modernizr Javascript library. Note: I do not know Javascript yet)

The Javascript discovery led me to the fangirl joyfulness of the Modernizr website. For fun, hover over their logo. I did a quick skim of their website and it looks like they have some great documentation. Notice that their logo drops down to become the table of contents for the page (I’m taking mad mental notes over here with ideas to show my boss if you can’t tell)! To check out my hunch that this is what is controlling the Boston Globe website, I started messing with the page width and lo and behold, the site acted identically to the Boston Globe one.

This is the first web design stuff that I’ve seen in ages that has gotten me excited about seeing something new. They even include a build tool which will give you only the code that you really need for your project to keep your site light.

More information links:
A great discussion which gave me a heads-up about behind the scenes of this website
Ethan Marcotte, the guy who started responsive design and is behind the BG site: Twitter (whom I think I’m web design crushing hard on thanks to the Clint Eastwood holding an armadillo background and his Twitter handle is beep)
Ethan explaining his involvement with the BG redesign
Ethan’s book about Responsive Web Design
Another link from that great discussion from a 4 year old post about above the fold mechanics in newspapers with and without AdBlock turned on
The SHIM code project which allows you to simultaneously test your website on multiple devices and browsers
Final note for me, look into attending the Converge conference.

This article has 3 comments

  1. Kevin Ballard

    I believe the actual magic powering the resize behavior is something called CSS Media Queries. You can see this in the Modernizr CSS because you see things like

    @media all and (min-width: 768px) {

    This embeds a bunch of styles that only apply when the minimum width of the browser is 768 pixels. There’s another similar block for 1200 pixels.

  2. Daniel

    Modernizr is headed by Paul Irish, a Google Developer. Check out HTML5 Boilerplate for a great website framework that includes Modernizr, server configuration, CSS normalize, and other goodies brought to you by some of the coolest devs in the world.

    Prepare to have your mind blown!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>