Boston Globe’s Responsive Redesign. Discuss.

AS EVERY WEB DESIGNER not living under a rock hopefully already knows, The Boston Globe has had a responsive redesign at the hands of some of today’s best designers and developers:

The spare Globe website has a responsive design that adapts to different window sizes, browsers and devices, and it has a built-in Instapaper-type feature that saves articles for reading off various devices on the subway. 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.—New York Observer

As the first responsive redesign of a “real” website (i.e. a large, corporately financed, widely read newspaper site rather than some designer’s blog), the site has the potential to raise public awareness of this flexible, standards-based, multi-platform and user-focused web design approach, and deepen perceptions of its legitimacy, much as Mike Davidson’s standards-based redesign of ESPN.com in 2003 helped convince nonbelievers to take a second look at designing with web standards:

In a major step in the evolution of website design, the Boston Globe relaunched their site today using a Responsive Design approach. For a consistent experience across mobile and desktop browsers, they redesigned the site to add and remove columns to the layout based on the width of your browser window.

This marks the first major, high-traffic, content-heavy website to adopt a responsive design. The lead consultant behind the project is none other than Ethan Marcotte, the designer who wrote the book on responsive design. Much as ESPN changed the way we worked by being one of the first to launch a fully CSS driven site a decade ago, the Boston Globe’s redesign has the potential to completely alter the way we approach web design.—Beaconfire Wire

More work remains to be done. Some sections of the paper have not yet converted, and some site architecture has yet to be refreshed, so it is too early to call the overhaul a complete success. But it is clear that Ethan Marcotte, author of Responsive Web Design and creator of responsive design, together with the geniuses at Filament Group, Upstatement, and the Globe’s internal design/development team have managed to work beautifully together and to solve design problems some of us don’t even know exist.

Congratulations to the Globe for its vision and these designers and developers for their brilliant work.

46 thoughts on “Boston Globe’s Responsive Redesign. Discuss.”

  1. Jess: I’m hoping someone on the team has written about that, or will soon. I’m fairly sure they took a “mobile first” approach, so as not to overwhelm small screens and lower-bandwidth devices with stuff they don’t need. Beep and his bride are on their long-delayed honeymoon, so he won’t be able to enlighten us on that point at this time.

  2. The design is really, really great. But I think putting up that paywall/register free for 30 days thing on every article is killing the site. Give people a chance to experience it and play for a few weeks before doing this. Most people will just leave when that pops up. It’s sad, but I think this is destined to fail. I’m not convinced people will pay for news they can get elsewhere for free.

  3. The design is really, really great. But I think putting up that paywall/register free for 30 days thing on every article is killing the site.

    I understand why they’re doing it—and I think The New York Times is doing all right with their pay-wall experiment—but I agree that even with a free 30-day preview, that form will turn off a lot of business people and designers who aren’t necessarily interested in the Globe but have heard about the responsive redesign and are curious to check it out. The timing makes sense: the redesign was part of the newspaper’s corporate strategy to improve their product and increase their income, so it’s natural that the pay-wall would coincide with the launch. But, still, yeah, it feels a tad ooky.

  4. The new design itself is quite good-looking, and that is responds to a host of devices and sizes is of course way cool. But like Mark said, there’s a paywall. It’s everywhere. Almost every single link you click leads you to the paywall page, with no visual indication at all. You can’t read articles, you can’t go to section homepages, you can’t do anything really until you fork over your name, email address, and eventually, cash.

    As a site, if you expect to make money off paying readers, why have ads? And if you expect to make ad income off people who just stop by, why have a paywall? It doesn’t make sense.

    So yeah, the HTML5 crosswords probably are great, but we, the web at large, won’t have a chance to see them.

  5. Did you check out the dead sexy crossword puzzle? Holy cow, I think that’s the first time “dead sexy” & “crossword puzzle” have been put in the same sentence.

  6. This is a great web experience! I remember talking to Ethan about this at the Minneapolis Event A Part, trying to get an idea out of when it would launch. The experience on the desktop, mobile and iPad is superb, I hope we see more and more of this on the web soon. Noticed that the link at the top for “Traffic” goes to the old design, that must still be in production. Kind of nice to still be able to view what it used to look like for purposes of comparison.

  7. I sure would love to see how they solved the “liquid images” problem. Probably Javascript. They indicated that they solved a BUSLOAD of problems with JQuery.

  8. Like you said Jeffrey, the really important thing here is that a major website has taken the plunge and committed to a responsive approach. There are a lot of skeptics who think responsive design is fine for your blog but won’t work for “real” sites, so hopefully they’ll take it more seriously now.

  9. These are exciting times alright, this will be a benchmark for responsive design for a long time to come. I am delighted to see such a utilitarian site taking the limelight, rather than (as noted) a showcase for an individual designer or agency.

    Many of us have to work with content elements such as advertising, as is the case here, and feeling somewhat hobbled by the fact. There are elements of this design which demonstrate the realities of working with such constraints, and I sincerely hope this brings some attention to the real world of designing for the web; one where “cool” = “effective”.

  10. While I applaud The Globe for doing this, it still troubles me that the overall page-weight is somewhere in the region of 850K (uncached – figure from YSlow). Half of that is made up of images which are then % scaled to the right size. I’m not sure 850K is going to make for a very snappy website over a flaky 3G connection. If there were an (reliable) equivalent of media queries available at the server side to filter what’s delivered to the end device to only what’s required to display the layout at its current scale, I’d be much happier with the whole ‘responsive’ movement.

  11. I think this post was intended to encourage discussion of RWD rather than why the BG website has chosen to put up a paywall and lose readers.
    So, a little bit about my wife.
    My attitude in most situations is: if it ain’t broke, don’t fix it. My wife equates that with me being a lazy bastard. And she’s probably right. Our kitchen door is hanging off its hinges. But, as I keep telling her, it opens and closes fine.
    I sit in front of a 22in iMac all day. If I come across a website that looks great: fantastic. If I pick up my iPad in the evening and it still looks great: fabulous. If I’m waiting for my daughter to come out of school and it works on my iPhone: respect. That’s all I understood RWD to be about.
    Then I saw the Globe site. First off, I’m not a fan of fluid web pages (if that’s the right way to describe them). That’s probably a lot to do with the fact that I’ve worked in print media all my life, where everything has its place on the page and if anything moves, it’s the printer’s fault.
    But the Globe site has made me reconsider. There’s more to RWD than fluidity; it’s also about rebuilding web pages on the fly, so they ‘work’ in whatever browser window they’re served in. That’s clever. And for the 99.99% of internet users who don’t sit in front of a 22in iMac all day, that can only be a good thing. Thank you, Marcotte et al.

  12. Jeffrey,
    Thanks so much for this thoughtful recap. It’s been an honor for us at Filament to play a small part in what the Globe has done here, to extend the concepts of responsive design to interaction behavior and asset delivery, and to try and build an experience that’s in many ways “mobile-first” without making any experience feel “second.” We’ll be blogging many of the implementation details in our “lab” in the coming weeks; hopefully the examples will foster some discussion around some of the responsive patterns we employed: what’s working well, what could be improved, etc.

    As for the details of how and when the paywall comes into play, and how well this plan will play out for the Globe, we’ll be watching with curiosity. Here’s hoping that the idea of paying a little for quality journalism and a focused reading experience will resonate with people.

    I think it’s inspiring to see the Globe betting on the web in such a big way.

    Scott

  13. Thanks to everyone for all the kind words, we’re really excited about the dialog this project has sparked and look forward to what others build on this work.

    @Chris Hill – A quick note that if you’re inspecting the site on a desktop machine, you will get a different JS, CSS, HTML and image payload than on mobile. Since we’re using a mobile-first approach here, a phone sized device will get a much smaller, mobile-appropriate image. On desktop, we incept that request and server those beautiful full-screen images. We also dynamically load assets based on capabilities so, for example, only devices that support touch events will download the scripts to support those additional interaction behaviors. We have a lot of ongoing optimization and compression work happening now with the Glove team, but we’re trying to be as responsible as we can.

  14. A quick note on filesize and performance comments: images and CSS/JS assets are delivered differently depending on screen size, capabilities, template type, and other constraints. In other words, the desktop weight is not the same as a smartphone’s weight, and both are far heavier than the experience delivered to a device running something like BlackBerry 4.6.

    We’re still rolling in some of the optimizations (JS and CSS minification didn’t make it in for launch, for example), so this will improve a lot in the coming weeks. Also, some 3rd party content is out of our control, such as ads or video, so the best we could do is try and prevent those assets from blocking the content from loading.

    We’ll blog about this delivery soon as well, but check out my presentation PDF Jeffrey linked above if you’re interested in an overview of some of the details.

  15. Wow, this calls for a celebratory sushi lunch at Upstatement. Thanks a lot Jeffrey.

    @Jeff Porter: glad you like it. We really tried to draw heavily from the print aesthetic of the Globe while making something surprising and new. As for RWD on the big stage, we’re hoping that more large publishers adopt this approach. But it’s definitely an uphill fight. There are a lot of external dependencies like ad serving (and selling) that’ll need to be updated. Once a few big ones do it though, it should help drag the others into the future.

  16. Jeffrey, will all the respect, I understand you’re the publisher of Ethan’s book, but I think four links towards it and one ”creator” of responsive design is a bit too much – unless it’s the “marketing” Jeffrey talking. The Boston Globe looks nice, but CSS3 media queries module -which is what actually responsive web design is- was edited/written with the contribution of these four people (Håkon, Tantek, Daniel Glazman, Anne van Kesteren) who shouldn’t be ‘omitted’ just like that, right?

  17. CSS3 media queries module -which is what actually responsive web design is

    Responsive design is not CSS3 media queries, any more than “Hamlet” can be reduced to English grammar. (Yet without English grammar, there is no Hamlet.)

    CSS3 media queries are a vital component of responsive design. Without that technology, the practice couldn’t exist. And its framers must surely be pleased by the way the web design community has taken up their breakthrough and incorporated it into a new series of best practices conceived and successfully evangelized by Evan Marcotte. I wouldn’t dream of denying credit to the brilliance of my friends Håkon Lie and Tantek Çelik and my friends-I-haven’t-met-yet Daniel Glazman and Anne van Kesteren.

    Responsive design also relies on a flexible grid and an image matrix. The ALA article acknowledges many people’s contributions to the idea, beginning with John Allsopp’s seminal article from the 1990s, The Tao of Web Design. ;)

    I link to Ethan’s article, book, and homepage for the same reason I link to the Boston Globe, the New York Observer’s article, and Beaconfire Wire’s article. One word: hypertext. Links in hypertext provide additional context for those who seek it. I’m certainly not ashamed of publishing Ethan’s article at ALA or his book via A Book Apart, but to not link to the article or book would be bizarre, wouldn’t it?

  18. My Five Second Test – The site is nicely designed and each section/article/feature holds there individual space well, it’s clear to read. The content is what I’m not liking… it’s all too much text which isn’t engaging enough for a news site.

    Love your work Jeffrey

  19. Frankly, I think this is extraordinarily refreshing. Finally, a great reason to get back ‘into’ the art/science of modern web design and refresh my skills.

    Thank you, Mr. Zeldman – again.

    And certainly thanks to forward thinkers who are blazing this trail. The last time I had felt this intrigued was like 2003. I saw it then; I see this now.

    RD provides a great reason for us older dudes (40+) to update our skills.

    Finally, I think it will be interesting to watch at what speed this gets embraced. Things seem to move much, much faster.

  20. First off, congratulations to all the people involved in making this site come together – it’s inspiring to see how people are solving problems in this area.

    However, the pay wall is the elephant in the room. I work for a corporate and I’m currently putting a case together to get some budget to do a responsive redesign of our site and, whilst the Globe’s redesign is technically very accomplished, I’m not even going to try to hold this up as an example to show that responsive design is ready for prime time commercial sites. The people I need to convince are commercial, not designers or techies, and when they visit the site, the first thing they are going to do isn’t re-size the browser – they’re going to click on a link and see the pay wall. Like it or not, from that point on I’m going to be on the defensive fighting to explain that responsive design doesn’t necessarily mean having a pay wall.

    I’m not making a judgement about the pay wall but, for all the excellent design and technical work that has gone into this site, I don’t see it becoming the popular poster child for responsive design that people are looking for. (That said, it’s not like I’ve never been wrong before and I wouldn’t be disappointed if I turned out to be wrong on this point.)

  21. @Todd Parker / @Scott Jehl

    Thanks for taking the time to comment and answer some of the points I raised.

    I’d be very interested to read about how you’re selectively serving scripts/images on the server side before the content hits the page – If I understand your slides correctly, you’re using a version of the script talked about here (http://blog.andyhume.net/content-aware-responsive-images) to deliver first a 1x1px image, then a ‘proper’ image of the appropriate scale? Are you using a combination of user agent and screen size detection to control when that script gets triggered?

    My main issue with RWD is that most techniques deliver all the content to the browser, then juggle it to fit the space available. If you guys can shed light on a robust and (almost!) foolproof way of delivering only the required content, you’ll have a convert on your hands :)

  22. Responsive design is not CSS3 media queries, any more than “Hamlet” can be reduced to English grammar. (Yet without English grammar, there is no Hamlet.)

    touché. Indeed, Ethan coined the term “responsive”, and without his memorable ALA article CSS Media Queries adoption wouldn’t be where it is today. Same for many other ALA articles that I religiously read when starting my career.
    My reaction is a result of my recently (past year) formed impression that there are more and more posts that circle around the AxA ecosystem. I just think it’s a bit too much, and that it may get these 234,589 followers a bit tired. Don’t get this wrong, it’s more advice than criticism. I just keep recalling this remarkable The Oatmeal comic every time this comes up.

  23. We launched a very real (i.e. a large, public service financed, widely read investigative journalism site rather than some designer’s blog) responsive site (http://svt.se/ug), on the 30 august, some weeks before the Boston Globe. And what we launched is not just one site, it’s also the the foundation of a platform to build sites and services for SVT.se and SVT Play on.

    It began in Boston when me and another front-end developer from our team attended An Event Apart 2010. This was just before the procurement process for the purchase of a new CMS, which would replace all our existing systems, was initialised.

    We were very enthused on the flight home. Inspired by Ethan, Nicole, Andy, Dan, Luke etc. We would soon start to rebuild every system and template we had. A huge project! After the conference we realized that we had a golden opportunity to really build something new, a framework for the new CMS with HTML5 and object-oriented CSS3, in a way that made it suitable for different screen sizes and devices.

    But we also got pretty nervous. Would our bosses even let us try? And if they did, would we be able to deliver this unproven and experimental technology (this was may 2010) across key systems in a timely fashion?

    Well we’re out there with one site and now it’s “just” a matter of Continuous Delivery…

  24. With all due respect, as someone who plays around a lot with the width of his browser in one single browsing session, I find the design switches distracting at best. At worst, whole sections are reflowed when I’m working in another tab and I don’t even see the same content when I return to the original tab.

    Responsive design has its benefits, but not when simply resizing a browser in a desktop environment. To quote myself: I don’t think it’s a good idea to change the design of a single site on a single device during a single browser session. (full article: http://www.onderhond.com/blog/work/responsive-design-problems-and-issues)

    To me the site feels over-engineered, over-shooting its initial goals and ending up with somethings that’s counter-productive and distracting. Web dev’s will love it though, but those aren’t the people we should be listening to.

  25. With all due respect, as someone who plays around a lot with the width of his browser in one single browsing session,

    Niels, is that normal consumer behavior, or web dev behavior? :)

  26. I’m learning with all of you guys and I think that RWD is really a great approach.
    And I would like to ask something about it.

    Many people are talking about serving content (and images) based on screen size, but I haven’t read yet about considering speed connection to serve content. You can be using an 21″ iMac in a very poor connection, or your router is not working out and you’re using an open wi-fi connection from the neighbourhood.

    My question is: is it possible to detect a slow connection and to serve a lighter content to them? There are studies on this?

    thank you

  27. Im still in kindergarten in regards to Response Web Design (RWD) but here are some thoughts . . .

    First the site is great to watch when I resize my screen and they way it shift its design about and the delivery of its content.

    It would be interesting to know the behaviors of what content people view on smaller devices and does that content type change according to the screen size?, what are the stats of users viewing news sites on smaller device?

    In saying that, does someone want to try and read The Boston Globe on a smaller screen? With the RWD I dont think it becomes that user friendly as opposed to the designs (or for that matter the Globe on a desktop screen at full size) you see coming out as an app, eg check out http://www.sbs.com.au/news/ and their app, the app makes their content findable, navigable and readable, I dont think if they made their site response it would be as user friendly way to pass on the info by any means, its an interesting start though.

    Does a RWD try and cover all devices?

    Once you open your browser do you leave it as it is? I dont change my screen size when viewing news sites and if I do, just to watch the Boston Globe do it thing, its beautiful to watch though I need to rethink it to some degree again on how to navigate around it, its making me think : ) so I take it RWD isn’t for the purpose of resizing your screen once you start to view the site?

    Anyway this is just thoughts to add to the discussion, I better get a copy of Ethan’s book and read up a bit more on the benefits to a site being responsive and the type of site its best suited for.

    Thanks once again.

  28. Niels, is that normal consumer behavior, or web dev behavior? :)
    Well, as a normal consumer. I’m not saying I’m your typical desktop user, but I often prefer to place multiple windows next to each other. Watch some streaming video, chat, content lists to feed to search engines of sites … for whatever reason I often resize my browser to make it easier to stack other windows next to it.

    Also, I’m on Windows, which makes it a lot easier to resize windows ;)

  29. When Ethan’s article was published, there were many reactions from the mobile web camp (as “Not a mobile web merely a 320px wide one” for example ). Today, one year later, seems that none of these worries were taken seriously. RWD is presented not as a practice but as a BEST practice. And I have a feeling this is because the Mobile Web Market is a big pie everyone wants a piece of. Up until RWD was written and promoted (A LOT), traditional web agencies, were desktop-focused and far from doing anything “mobile”. Today, everyone can claim they can make a mobile website.
    PS: Regarding the problem mentioned by Niels, FYI I had similar user complaints when I used RWD to a redesign recently: Many users resize their windows – apparently – and between switching tabs/re-sizing, they often lose information, are confused from the layout changes and so on.
    Even though media queries and the whole responsive mantra seems very easy & attractive, I’m just not persuaded that its the answer to the problem of multiple devices (one web etc).
    Who knows, maybe in 5 years time we’ll be hired to clean a conditional CSS media query mess – kind of like as we cleaned tables for layout some years ago.

  30. The only problem I have when resizing the browser on a RWD layout is that, when changing column sizes, dropping/adding columns and stuff… the document length changes, so does the page scroll, so the content that use to be visible on the screen goes above or below the fold and I lose it…

    Now I’m trying to fix this in js, and for a grid view with a stable cell height layout it’s something fairly easy to achieve, but I’d like to find a more general approach, has someone hacked something up?

    (And yes… I am aware that I have a web designer’s behavior)

  31. Hopefully this cuts down on the common idea that the best way to make a website is to have a graphic designer create a mockup in PhotoShop and then have the web developer “cut it up” and on top of that to “make it pixel-perfect and make it look exactly the same in every browser!!”

    I do think media queries could use some fine tuning. They are good overall but not as tight as they could be.

    BTW, I was making RWD sites years ago, back when few people had a clue about it.

  32. For those unhappy with resized windows: I can’t believe you love scrolling back and forth all the time just to read stuff. Ug! If I’m getting scrollbars, it had better be for a good reason, like a video or a map that shouldn’t be resized.

Comments are closed.