beta.boston.com

As we began to design and architect the new BostonGlobe.com site in fall of last year, we knew that we had a unique challenge and opportunity – to design and build a news site from scratch in 2011 with all the technologies available today.

We set out to understand what readers wanted most from a new experience, with a process based on research, focus groups and user testing.

What they told us has guided us to create what we believe is a highly usable, readable and journalistically-focused experience.

I had recently arrived in August from a year-long assignment in the New York Times Company as SVP for product management at About.com, a site with almost a billion page views a month, largely driven by searches on Google. It was our job to optimize the product for each and every visitor coming over from Google.

As a user of multiple devices – laptops, iphone, iPad and any others I could get my hands on – I became obsessed with the idea of automatically delivering the perfect layout for each user based on the device they were using at the time.

As I arrived at The Boston Globe in August, we all became intrigued by really pushing the envelope with this concept.

Then we met Todd Parker and Patty Toland at The Filament Group in Boston, whose team had popularized the concept of Progressive Enhancement (and written the book on it). They also worked closely with Ethan Marcotte, who had written a ground-breaking article in May 2010 that pushed thinking forward around the idea of Responsive Design. (And later wrote the book on that.)

They also had Scott Jehl on their team, who worked extensively on the jQuery and jQuery mobile frameworks used across the Web.

The concept of Responsive Design spoke to us and our strategy of building a newspaper of the future that was truly built for our belief in a mobile future, where more people would be accessing us from a mobile or tablet device than from a traditional desktop.

We also have always found mobile sites, which group devices together and display a “mobile” version of the site, to be inferior and hard-to-manage. Sometimes they look good on your device, sometimes barely passable.

We wanted “one codebase to rule them all”: to allow our editors and producers to build the site once and have the site adapt itself based on what device you had at that moment. We knew that more and more devices would come on the market, and we wanted a site that would take that into account without our having to design for specific brands.

We found an all-star team of designers at Upstatement, who had already been converts to responsive design philosophies and were the perfect partner to execute the design concept and make the Boston Globe.com work visually on all screen sizes. They did the detailed and deep thinking in order to design for 6 different resolutions:

• 1200 px wide - For example, high res desktop browser
• 960 px wide - For example, regular res desktop browser
• 768 px wide - For example, horizontal iPad layout
• 600 px wide - For example, vertical iPad layout
• 480 px wide - For example, horizontal iPhone layout
• 320 px wide - For example, vertical iPhone layout

Through javascript and other methods, the site detects your screen size and the features that you have available, such as a touchscreen and local storage capabilities.

The site then delivers the most appropriate layout and fetches images at a resolution that makes sense. If you’re on a phone, only a small image file is loaded; page components like the section header and navigation morph to leave more room for content; and clickable areas get larger given that you are using your finger instead of a mouse.

We believe that the options this will give us in the future will be limitless – knowing you are on a small screen, perhaps there are different types of content that we should highlight at the top of the page? As mobile advertising continues to grow up, different ads can be targeted to different screen sizes, placed in the optimal position for readability and response rate.

With this smart design, we realized that we were taking full advantage of the most popular app on any device – the Web browser.

So we also built offline reading capabilities into our My Saved feature, which allows users to tag stories to be saved for later reading or just to be able to have for quick access. I like to think of My Saved as a sort of playlist for my content, allowing me to queue it up for reading later, in a quick stream.

Our development team also built My Saved to work across devices, so that you can save stories on a desktop and then open the My Saved app on a phone or tablet. The stories in your queue automatically synchronize to that device, downloading to local storage for offline reading.Our engineering team decided to leverage the high-performance programming language of Erlang and an Mnesia database to handle the volume of calls. Erlang has seen a resurgence since Facebook used it to help power its high-volume chat feature.

With all these capabilities, we saw that we were building a Web app and saw opportunities for building a set of native applications as a lower priority. We still intend to launch native apps and are thinking through the capabilities that a native app would provide that would allow us to create something very targeted at the needs of an app user that does something very different.

We consider this just the beginning of the life of BostonGlobe.com and are already planning to add features over the coming months that will continue to build on our goals of creating a site that does the tremendous journalism of The Boston Globe real justice.

Jeff Moriarty
VP, Digital Products
The Boston Globe
@jeffmoriarty
about.me/jeffmoriarty

blog comments powered by Disqus

Notes