Implementing the new

I just discovered a great meetup group “Boston Front End Designers”.  I missed the talk on the design aspect, but came to part 2 “ at the Cambridge Innovation Center. Great talk and the best pizza!

The Boston globe delivers the cutting edge news for the 21st century

Adam Salsman, who lead the technical team from the Boston Globe along with engineers Jesse Weisbeck, Dan Middleton, Ian Cohen and Caz Vonkow talked about the challenges of implementing a responsive design, using local storage, handling advertising in a responsive site, and answering lots of questions.

The Boston Globe has proven you can teach an old dog new tricks. Investing in a total redesign of their site that makes use of the functionality needed to keep subscribers and play nice with all devices. The site went live in September of this year.

The website has a responsive design that adapts to different window sizes, browsers and devices, and it has a built-in Instapaper-type SaveMe feature that saves articles for reading off various devices even on the subway or where you have no connections. The overhaul has incorporated the talents of Boston design firms Filament Group, and Upstatement, as well as a large internal team, and pre-empts the need to build separate apps for each device.

See the video about the building the
The first big challenges of a html5 site:

  • media queries
    For the browsers (ahem ,IE!) that don’t support media queries, they had to target a polyfill that can used for media queries. They created RespndJs : a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). They tested on real devices because they found that simulations were not accurate. Instead of targeting user agents, they target capabilities. They believe in progressive enhancement, works great in the newest devices but also needs to on all older devices (maybe doesn’t have all the bells and whistles). Not every window width results in a beautiful page, but overall it’s a much better and more consistent experience from the big screen to the iPhone. It made them rethink as designers how you think about designing a site. It is no longer a static comp but a interface that works fluidly in a broad continuum of devices that you are targeting.
  • Responsive images
    Their approach : mobile first.  That way the page served is lean and lightweight. So on the site, a 1000px wide image that is on the Article pages, is referenced to a smaller, low bandwidth image.
  • Advertisements
    Problem 1: buying is still based on the old requirements of paper: size and placement, which is every changing depending on device. They needed to incorporate the ad delivery system into the design. The size and placement of the old way media buying didn’t take in considerations all the devices the Boston Globe could be delivered to.
    Problem 2: how to keep third party scripts, like flash and javascript of each ad, from creating havoc with the site.
  • Some tools used:
    With the Filament Group, known for their work on jQuery UI, used jQuery. Plus they built a custom framework for the code that handles dynamic loading of javascript. It allows them to load only the minimal amount and dynamically load the rest.
  • Type
    New adapted font Miller Headline. The website uses screen versions of the fonts via Webtype. Supplemental heads and section titles are set in Benton Sans, Cyrus Highsmith’s contemporary interpretation of News Gothic that was introduced to the print edition four or five years ago. Smaller type, where one can not truly decipher the details and where website performance is important, similar fonts such as Georgia are used.”The fonts let us bring over the soul of the printed Globe while still focusing on making a cutting edge and modern website that drew more inspiration from the web than from print.”
    Mike Swartz,  Upstatement
  • Importance of Asset loading:
    Filament Group worked pretty hard to refine the overall asset loading and distribution from mobile, tablet, and desktop to try and control the page weight. A typical prototype page was around 700KB–1MB for desktop, but that was too heavy for mobile connections. By dropping the custom fonts, whose details really can’t be seen in smaller type sizes, the prototypes became much smaller  in size –  300kb to 400kb. Also you can reduce file sizes of web fonts by subletting font to include only necessary characters.