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)
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.