Mattias Rost

Researcher and Coder

Boston Globe does HTML5 & Responsive Design

Posted on 2011-09-27

Here's an awesome article on how The Boston Globe implemented their HTML5 web page botonglobe.com using responsive design. For those who do not know responsive design, it is basically a way to create and design a web page to respond or adapt to the resolution of the web browser viewing it. It does not only take into consideration of rescaling images or text elements, but rather restructures the layout to best fit the screen. In the article they describe the technical challenges they went through: implementing Media Queries for outdated browsers; fast Responsive Images; how to sandbox third party ads to not mess with the page, etc. I am also very happy to read that they do no User-Agent detection, but rather do feature detection which is often advocated for HTML5 development, and that I do. The benefits of that is nicely explained in the quote

It is clear that we did not plan under any circumstances for anybody to be opening it on a GameBoy, but, when somebody did recently, it worked great on a GameBoy.

It's really nice seeing big projects starting to come out using HTML5 and responsive design. It definitely shows how it is unnecessary to write native apps for several platforms to get a great user experience.