6 ms·

New Boston Globe website design

424 points by ra88it 15y ago

ra88it 15y ago
Resize the window to see how gracefully the site accomodates a wide range of window sizes (from a phone to a desktop monitor). [edit: After further reflection, I'm stunned by how well they pulled this off. Huge leap forward.]
- jgavris 15y ago
  gracefully is subjective. media queries feel abrupt, even on my 'fast' machine.
  - iKnowKungFoo 15y ago
    Abrupt in what browser? Chrome doesn't feel abrupt.
    - sixothree 15y ago
      For me it doesn't render properly in firefox. It never seems to make it into the single column mode. Chromium on the other hand, smooth like butter.
    - jgavris 15y ago
      yikes, bad karma, i was half joking with the negativity. good iOS apps have nice animated transitions between portrait and landscape.
      - eropple 15y ago
        I don't think media queries offer you that functionality, and I can't think of a way to do it within JavaScript. How would you do it?
        jgavris 15y ago
        I don't know much about javascript, I've just seen stuff like this -> http://masonry.desandro.com/demos/animating-jquery.html http://masonry.desandro.com/demos/animating-jquery.html Resize that page.
        eropple 15y ago
        Interesting trick, but I don't think (could be wrong) that's applicable in this instance. I noticed immediately that this doesn't work in the place where you're most likely to see a resize/dimensions-change event: a tablet or phone. When you switch orientation on either, it just resizes the entire page itself. So it's not super useful in the place that most needs it. Also, though this is much more subjective, I think that really looks terrible. Too much stuff is moving.
  - Firehed 15y ago
    Yes, but it's purpose isn't to resize on the fly as you change your browser window. It's to have one set of HTML that reflows to your device correctly depending on the viewport width. I just checked it on an iPhone 4 and iPad (both portrait and landscape) in addition to a desktop, and it works astonishingly well across screens sized from 3.5" to 27". Are the media queries a little laggy? Sure. I'll tolerate that over having to hunt down a stupid "view full version"/"view mobile version" link (and I'm sure some optimizations can be done). I think this will set a new standard for the term "mobile-friendly"
  - okalex 15y ago
    It's not the transition from one layout to another that is graceful. Under normal circumstances, you're not resizing your browser to use a site. What's graceful is the fact that the layout is well suited for each and every resolution you throw at it, whether you're on a full-screen desktop or a mobile phone.
    - goatforce5 15y ago
      The Globe developed (and released!) an incredibly neat piece of software to let them preview changes on 10+ devices simultaneously. https://github.com/marstall/shim https://github.com/marstall/shim You can see it in use very briefly from 1m 18s in: http://www.boston.com/video/viral_page/?/services/player/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001 http://www.boston.com/video/viral_page/?/services/player/bcp... They should release a video of shim in action. A video explains it much better than words can. (I was lucky enough to get a sneak peak of all their new stuff a little while ago.)
- blahedo 15y ago
  Yes, it's not just the flowed columns. Notice also: the masthead logo, the weather bug, the section menus (which switch to collapsed "Sections" at narrow width), the photo sizes. Actually, it's the weather bug and the logo that really do it for me. There's a lot of love that went into this design.
- Isofarro 15y ago
  I'm seeing the right hand adverts chopped off on the right hand side. Both of them. That's not good business if you are relying on advertising revenue to support the financial costs of running a site. That's one of the drawbacks of this responsive design drive, they don't take into account content that needs to be at a fixed and known size. When an advert gets chopped off or disappears from above the fold - that pushes down the value of advertising on that site. Too much of that and the revenue generated this way drops. There's no point having the surprised face on declaring that I don't understand the web and it wasn't designed for pixel-specific rectangular spaces. That requirement drives the sustainability of a large number of organisations, there's no point pretending it doesn't exist.
joshmlewis 15y ago
It is worth checking out. Really neat how well it does go from big to small. Was this done with Javascript/jQuery?
- 1m27d 15y ago
  It looks like they're using HTML5 Boilerplate.
- nek4life 15y ago
  I'm guessing a combination of javascript and css media queries. http://twitter.com/#!/beep http://twitter.com/#!/beep and http://twitter.com/#!/scottjehl http://twitter.com/#!/scottjehl were both part of this project. Ethan Marcotte has a responsive web design book that recently came out. http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/responsive-web-design I think there's 20% off today with the code BOSTON for the launch of the Globe's site as well.
- regularfry 15y ago
  In principle it's doable with just CSS properties, but I don't know quite how good the browser support is.
- dorian-graph 15y ago
  Nope, by what I can see. Basically all CSS[3]. The JS they have seems to be for libraries like Modernzr (HTML5 related) and some other things. Basically, in the CSS there is code like "@media screen and (min-width: 480px) {}" where everything within the curly braces is ONLY for browser windows that are > 480px. So, you can do all sorts of combinations like max-width: AND min-width:. When the window is resized it uses new rules. AFAIK people refer to this as 'Responsive web design' and thankfully is being picked up by a lot of designers/developers. There's a ton of ready-made CSS frameworks and the like available for people to use. (People, feel free to correct/clarify my explanation)
naed 15y ago
wow thats a really slick and usable design. the call to action page if you click to a story is really fresh to.
alexkearns 15y ago
I used a similar technique on my web-based timeline-software. The aim was for the timeline to work at almost any size. Not quite perfected it but getting close. If you want to play with the resizing, you can use this link - http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-based-timeline-software/ http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-bas...
- alttab 15y ago
  That app would be really cool if you could visualize data that imports from other sources. Imagine documenting your facebook pictures instantly through time via the site's meta data and links to the pictures themselves, etc. Well done. I noticed that the navigation gets borked when the screen gets really small. I think the choice here is to show a different navigation menu (rollover menus?).
  - toyg 15y ago
    It could also benefit from better copy. "Everything from a timeline's colour scheme and date range to its background image and intro text can be changed in the Settings tab." -- a wall of badly-punctuated text, really unappealing. Kudos for the app though, it does look nice. More auto-importing and some iPhone action please :)
    - alexkearns 15y ago
      Not wanting to be confrontational but what are you talking about. There is nothing wrong with the punctuation of that text. It might not be Dostoyevskian in its elegance but it is grammatically correct.
      - toyg 15y ago
        I've lost my breath trying to read it... would use a comma or two. It's also completely useless and out of context -- that's a help box, not a sales pitch.
  - brackin 15y ago
ForrestN 15y ago
I assume they are testing the waters for something similar for the NYT. I think it's very successful visually, and certainly a nice use of this new technology. My only nitpick is that I wish there was more letter spacing on the headlines. I don't know why the type has to be so squished.
T_S_ 15y ago
Great job making the font size respond to Cmd+. Many sites seem to drop the ball on this important feature (ahem LinkedIn, NYTimes mobile).
roopeshv 15y ago
http://mediaqueri.es/ http://mediaqueri.es/, now stop picking examples from certain place, give some background what you want to talk about.
guywithabike 15y ago
Keep in mind that the point isn't to be flashy when you resize your window, it's that the site will work just as well on tiny mobile screens, medium tablet screens, and large computer screens without separate domains, crappy shim layers (I'm looking at you, wp-touch), etc.
- ugh 15y ago
  Or for people who like to not have their browser be fullscreen all the time.
  - georgemcbay 15y ago
    Or for people with high resolution monitors who dislike the fact that a lot of web pages have more white space on the sides than they do content in the middle when their browser is fullscreen or close to it. Granted, I realize that making any specific column of text too wide hurts readability, but most sites could benefit from being more multi-column (size permitting) and getting some of the ads and other non-text elements out to the sides more. Going to a website and seeing one fixed bit of content at 1024px or whatever in the middle is so very lame. I am glad to see some websites starting to move away from this, and now that working examples can be seen hopefully other sites will be shamed into following suit.
beatpanda 15y ago
We did the same thing on my college newspaper this semester (we're still working out bugs ) – http://spartandaily.com http://spartandaily.com
- pixelcort 15y ago
  As an SJSU alumnus, I'm glad to see this.
elliottkember 15y ago
I think responsive design that changes when resized like this is a bit annoying and unexpected. When I'm using the page and I resize it, I lose my place on the page and all the content reflows. There's nothing in traditional media that works that way.
- ra88it 15y ago
  That's just it - for me, it seems like they achieved responsive design without being broken and annoying. But some of it is subjective, and I only saw the new design today. It might not hold up so well to heavy use.
- rhodimus 15y ago
  >> There's nothing in traditional media that works that way. And that is exactly the point - it feels like we are finally waking up to what the web can really do that traditional media cannot. I'm sure in a few years having the content reflow will be something users expect of every website (not that it is something people do all the time - see the comment that guywithabike made).
- rimantas 15y ago
  Just curious: how do you resize "traditional media"?
  - elliottkember 15y ago
    Well, you can fold a newspaper up so you're reading one part of it at a time, for example.
- rorrr 15y ago
  Why would you resize your browser while reading a page?
  - omaranto 15y ago
    To answer your question: to make the page more readable, if resizing changes column width. But your question is the wrong question. The reason to have a fluid layout is to have a single version of the page that looks good on screens of all sizes, computers, tablets, and phones.
chrismealy 15y ago
It's weird, when a layout is too clean it feels like the site is fake somehow.
- tsunamifury 15y ago
  Very true. I've done layouts for newspapers before and I've noticed a few things: 1) White space looks wonderful, but for some reason we lend more 'serious creedance' to text that is small and crammed together. 2) Design is good to a point, but then drops off when it begins to feel 'commercial' I think after a hundred years of reading sloppily put together papers chalk full of the latest news, we sort of associate bad design with its 'genuineness' and overly clean design with something desceptive.
  - Angostura 15y ago
    In the late 1980s there was a nice study that was produced with the advent of the then nwe-fangled laser printers. It showed that journalists were less likely to read a press release if produced in a neat, attractive sans-serif font, and more likely to read it for news content if produced in slightly distressed Courier.
- markmccraw 15y ago
  I kind of get that feel too, and I think it might be related to the fact that many spammy/scraper news sites and amateur operations use designs off of themeforest or popular free WP themes, which tend to be fairly minimalist and white space heavy. Whereas pretty much all high end news outlets have extremely busy designs, and we have been conditioned to associate that with trustworthiness.
  - nikcub 15y ago
    It is very strange how that works in our minds. You associate sites and immediately discriminate against the content because they look or 'feel' like other sites with less substantial content. For eg. the padding in Google+ gives me a feeling of amateur content (which it is). Same with sans-serif fonts - I got huge push-back at Techcrunch when I wanted to change the default reading font to a serif font, the feedback internally was that the site feels 'too serious' The business of sites like NYTimes and WSJ make them feel 'authentic' for some reason. I have known this for a long time but couldn't really put my finger on what it was. I remember one of the first client websites I did back in 97 - we laid out absolutely everything that we needed on the page, but there was a lot of space, the client said that the site doesn't feel 'authentic' and I spent a lot of time simply thinking of things to throw onto the page to make it look busier. I think this is something that a lot of developers and web designers know about, but for some reason I can't recall ever reading anything about it. If anybody knows if this phenomenon has a name or has any more information about it, please share. I have been reading a lot of design books this year and none have made mention of the link between a site being 'busy' and feeling professional
voidfiles 15y ago
I smell filament group(http://www.filamentgroup.com/ http://www.filamentgroup.com/). Anyone know who led the design?
- cwe 15y ago
  This redesign is all over filament's home page, so it looks like they indeed were. EDIT: http://filamentgroup.com/lab/introducing_the_new_responsive_designed_bostonglobecom/ http://filamentgroup.com/lab/introducing_the_new_responsive_...
  - twog 15y ago
    I believe Ethan Marcotte was involved as well as one other group. He spoke almost entirely about the redesign at front end conference this year.
  - asimeqi 15y ago
    I think it is worth pointing out that this is not a redesign but an entirely new site. That probably made the website easier to develop. The old site, boston.com, hasn't changed.
  - goatforce5 15y ago
    A video with some Filament guys talking about the project (on boston.com, ironically enough): http://www.boston.com/video/viral_page/?/services/player/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001 http://www.boston.com/video/viral_page/?/services/player/bcp... Video says the site was by Globe staffers, Filament and Upstatement.
roshanr 15y ago
Seems to compare favorably to the Andy Rutledge redesign (http://andyrutledge.com/news-redux.php http://andyrutledge.com/news-redux.php) save for the ads. The ads on the story pages don't work as well resulting in horizontal scrolling.
blake213 15y ago
This is called an adaptive layout.
Adaptive 15y ago
The real success here is not the fluid design (which is awesome). It's getting it through inside a traditional media company. I'd love to read a frank overview of that process as well as the design itself.
- freddealmeida 15y ago
  I agree. Responsive design itself is not difficult. But the sell must have been a difficult one. I'd love to hear it as well. My guess is it was based on a prototype. Seems everyone these days expects you to build one :-S
  - joshuamerrill 15y ago
    Having designed www.mogotix.com, which is completely responsive, I can say that fluid layouts absolutely create challenges that fixed layouts do not. That said, they're not insurmountable, and the benefits are substantial.
    - joshuamerrill 15y ago
      Elaborating: some things that are simple in a fixed layout can become very difficult in fluid ones. Two brief examples: 1. Try embedding a YouTube video into a fluid layout. You'll need a JavaScript solution to remove the ugly black bands that will appear above and below your video. 2. IE 6-8 do not support media queries, which form the basis for fluid layouts. When we relaunched MogoTix in March 2011, I had to include a jQuery script to get IE to understand media queries (that script is now included by default in the 1140px grid at cssgrid.net). If anyone has questions about implementing a fluid layout, feel free to ask.
      - matthewbuchanan 15y ago
        Paravel and Chris Coyier released fitvids.js last week which solves the fluid video embeds issue pretty nicely (fitvidsjs.com).
    - 15y ago
deleted 15y ago
[deleted]
ChuckMcM 15y ago
That is very nicely done. I am glad they didn't go for the temptation to put the display add in the laft column so that as the page shrinks it re-flows to putting only ads above the fold.
niels_olson 15y ago
I would have liked to see the resize use additional space by bringup an additional column of headlines instead of just expanding the already useless picture. Here's a nice thread on newspaper designs, shamelessly jumping to my head-to-head of above-the-fold comparisons of the top 10 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002nk#above-fold http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...
3dFlatLander 15y ago
I have terrible vision, and utilize the browsers zoom function a lot. On their new site, I can zoom without having to do a lot of horizontal scrolling (just in Firefox though, doesn't seem to work as well in Chrome). So, aside from the aesthetic for the masses, there's an element of accessibility here that shouldn't be overlooked.
- jacquesgt 15y ago
  I agree, except that they totally break zooming on mobile devices (or at least iPhone). I hate it when I rotate my phone and the text reflows at the same size instead of zooming to fill the wider viewport. On the plus side, you don't have the issue of links breaking because they send iOS devices to their mobile ghetto that ignores everything in the URL after the domain name.
kanetrain 15y ago
This is a great responsive design. This works, in part, because it is a news site with predictable image sizes, headline sizes, and very limited GUI. If you want to build something that is more graphically intensive, with more focus on visual appeal in traditional browser sizes, it gets more and more complicated. I'm working on a project now actually, and it's pain. I'm not saying it can't be done (it can with a lot of work). It's just more difficult and time-intensive the more graphics you use.
abredow 15y ago
This looks great. It's awesome that we can make sites like this that theoretically allow us to serve the same pages to desktop and mobile browsers. I'm curious though, is there any significant overhead to having mobile clients parse 1600+ lines of HTML, or is that a non-issue these days? Anyone have any data points on this?
bstar 15y ago
Screw the layout, whoever came up with the dependency manager is a friggin' genius. <script src="/js/lib/rwd-images.js,lib/respond.min.js,lib/modernizr.custom.min.js,globe-define.js,globe-controller.js"></script>
- mark242 15y ago
  What, a servlet that does a split and a concat?
  - bstar 15y ago
    Did you actually play with the url? It pulls in the dependencies in one file, in any order. The genius part is that it's creating cached custom dependencies for each page that could potentially be shared by other pages. This is the most efficient dependency management approach I've seen. For sites that could have hundreds to thousands of pages, css/js asset & dependency management is so critical. Something doesn't need to be difficult to implement to be extremely useful.
    - xentronium 15y ago
      <shameless plug> If you like that idea, you might want to take a look at library I am developing in my free time. The idea is that you specify things you need (for example Mootools:Core and Mootools:More:FormValidation) and dependency manager pulls the required code with dependencies in correct order. It is in ruby, though (rack middleware + standalone packager). http://xentronium.me/jsus/demo/ http://xentronium.me/jsus/demo/ http://xentronium.me/posts/jsus-demo-packager http://xentronium.me/posts/jsus-demo-packager -- some explanation </shameless plug>
xelfer 15y ago
This looks similar to the http://www.news.com.au http://www.news.com.au redesign which was rolled out 2 weeks ago. Lots of white space and thin grey lines.
adeaver 15y ago
Make sure you check out the online crossword. It's 'responsive' as well. And quite cool. (Have to register to access it)
keeperofdakeys 15y ago
Here is one of the lines of the source code: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> For those who don't know, this disables user scrolling on every standards-compliant mobile device. The reason is a bug on iOS, that causes test to flow off screen when changing orientation on non-default zoom levels. http://adactio.com/journal/4470/ http://adactio.com/journal/4470/ I really wish more sites would enable it by default, then use javascript to disable it for iOS devices. I have come across many sites with small text that I want to zoom, but can't (this is especially bad for people with poor eyesight). Disabling it for everyone reminds me of the days of IE5 and 6, when other browsers were hampered by IE's bugs; we are only starting to see what having no bug-ridden, dominant browser on the Desktop can bring. Before anyone says that browsers shouldn't implement this feature, they should. For better or worse, it is a part of the standard. Using browsers that don't implement parts of the standard would bring about situations even worse then this.
- jannes 15y ago
  A few weeks ago I made a bookmarklet for iOS that re-enables zooming and also sets the viewport width to the device-width (this is useful for pages that use the whole width, which leads to small fonts. E.g. Hacker News). It works quite well. javascript:(function()%20%7Bvar%20meta%20=%20document.createElement(%22meta%22);%20meta.name%20=%20%22viewport%22; meta.content%20=%20%22width=device-width,user-scalable=yes,maximum-scale=10%22;%20document.head.appendChild(meta);%7D)()
andymboyle 15y ago
Thanks for posting this link. I'm kind of wondering why my post from hours earlier didn't pop up. Did I just write a crappy headline? http://news.ycombinator.com/item?id=2987246 http://news.ycombinator.com/item?id=2987246
blahedo 15y ago
I am IN LOVE! It has been years since I've seen a mainstream site that didn't force itself wider than my default window (usually 600-800px, a bit less than half my screen). A lot of the sites that "try" to "address" the issue of multiple resolutions still focus on two targets: mobiles, and full-screen 1024+ monitors. Some of us are in between! Thanks, Boston Globe.
RegEx 15y ago
You don't have to be a huge web design shop to successfully build fluid websites. A good place to start building sites like this is the 1140 grid[0]. We've knocked out a couple of client sites with it [1]. Getting the basic layout to resize is super easy...it's the positioning details for the media queries that can take hours. [0]: http://cssgrid.net/ http://cssgrid.net/ [1]: http://etbeancounter.com/ http://etbeancounter.com/
Titanous 15y ago
Great design, but they have a registration wall in front of every single article.
pauljonas 15y ago
Looks good, but line-height gets messed up when using the menu dropdown to select a bigger (i.e., "bigger", "biggest") text size. See screenshot: https://img.skitch.com/20110913-qpbjnmcr2cjqcgwtfahen878sp.png https://img.skitch.com/20110913-qpbjnmcr2cjqcgwtfahen878sp.p...
sailfast 15y ago
Nice design and a layout that I'm sure will be mimicked by a number of other traditional paper outlets - if they're smart. Now to figure out how to do it myself! hehe
linhir 15y ago
The Boston Globe is owned by the NYTimes company, I wonder if this design might be a preface to a more fluid design of that site.
sogrady 15y ago
The real success here - if it is successful - will be convincing readers that have previously had free (for registered users) access to Boston Globe content at Boston.com to pay $208/yr simply for the new interface. It will be the same content, with a few exceptions, simply rehosted at a new site with a new URL. If they're able to convert even a subset of their current audience over, journalists everywhere will rejoice.
- maigret 15y ago
  Definitely. Still I am not sure if subscription is adapted on the net - do they also offer single issues? As a buyer, I rather pay single issues. At the time where there were only paper issues, we used to take a subscription for the local or national newspapers. Now that the net has so much diversity, I want to multiply my sources. The single issue order that many iPad apps offer seem more comfortable to me.
- ghc 15y ago
  I'll certainly pay. It's a lot cheaper than the paper subscription and Boston.com has a horribly design.
MadMikeyB 15y ago
Very well executed, and everything I've read about it is positive. Good job PR team? Or good job social web :) Oh, the site is pretty good too ;)
maigret 15y ago
Still needs some bug fixes though - the site is not showing at all on Chrome for me. May be due to one of my many privacy extensions.
frankiewarren 15y ago
I loaded this and thought, "What's the big deal?" I'm sure many people, on many different browsers/platforms/resolutions, thought the same exact thing, which is what makes it so brilliant.
Angostura 15y ago
There's a bit of UX failure here though. The first ting I did was click the left hand top navigation element which displayed the submenu. I then moved my mouse to select a sub-menu item, crossing another top-level menu item which made the menu disapear. Granny's not giong to like that, and I personally dislike having to be careful to move my mouse vertically down before crossing to a submenu item.
- karipatila 15y ago
  Where do you have to click to display a submenu? At least for me it all works on hover, while clicking will open another page.
  - Angostura 15y ago
    Apologies, I posted before drinking my coffee. You're absolutely right. What I meant to comment on was the fact that the menu displays when you hover, and then you have to be extremely careful to move your mouse vertically first, lest you accidentally hover over another top-level menu. It's a question of ease of content-browing v ease of navigability. Having to click on a top level menu item would make the former slower, but would speed up the latter, personally I find the hovver-bother quite annoying.
rglover 15y ago
Aside from having a great design, what's excellent about this is that they're working with new design concepts and implementing them well. Responsive web design is huge for newspapers and other sites with lots of text and images. The Boston Globe is hopefully the first of many great redesigns using this method.
AbyCodes 15y ago
Check the site with http://quirktools.com/screenfly/ http://quirktools.com/screenfly/ Admiration guaranteed.
gjg 15y ago
This is great stuff for adapting to different screen sizes, but it's hard to see it as the perfect solution to the varying needs of different devices. It works reasonably well on mobile, but still results in a fair amount of wasted bandwidth. And some pages (looking at you, registration interstitial) serve up 150kb+ images that aren't displayed at all on mobile devices. It may be responsive to my screen size, but it certainly isn't responsive to my data plan.

424 points by ra88it 15y ago

Resize the window to see how gracefully the site accomodates a wide range of window sizes (from a phone to a desktop monitor). [edit: After further reflection, I'm stunned by how well they pulled this off. Huge leap forward.]

jgavris 15y ago
gracefully is subjective. media queries feel abrupt, even on my 'fast' machine.
- iKnowKungFoo 15y ago
  Abrupt in what browser? Chrome doesn't feel abrupt.
  - sixothree 15y ago
    For me it doesn't render properly in firefox. It never seems to make it into the single column mode. Chromium on the other hand, smooth like butter.
  - jgavris 15y ago
    yikes, bad karma, i was half joking with the negativity. good iOS apps have nice animated transitions between portrait and landscape.
    - eropple 15y ago
      I don't think media queries offer you that functionality, and I can't think of a way to do it within JavaScript. How would you do it?
      - jgavris 15y ago
        I don't know much about javascript, I've just seen stuff like this -> http://masonry.desandro.com/demos/animating-jquery.html http://masonry.desandro.com/demos/animating-jquery.html Resize that page.
        eropple 15y ago
        Interesting trick, but I don't think (could be wrong) that's applicable in this instance. I noticed immediately that this doesn't work in the place where you're most likely to see a resize/dimensions-change event: a tablet or phone. When you switch orientation on either, it just resizes the entire page itself. So it's not super useful in the place that most needs it. Also, though this is much more subjective, I think that really looks terrible. Too much stuff is moving.
- Firehed 15y ago
  Yes, but it's purpose isn't to resize on the fly as you change your browser window. It's to have one set of HTML that reflows to your device correctly depending on the viewport width. I just checked it on an iPhone 4 and iPad (both portrait and landscape) in addition to a desktop, and it works astonishingly well across screens sized from 3.5" to 27". Are the media queries a little laggy? Sure. I'll tolerate that over having to hunt down a stupid "view full version"/"view mobile version" link (and I'm sure some optimizations can be done). I think this will set a new standard for the term "mobile-friendly"
- okalex 15y ago
  It's not the transition from one layout to another that is graceful. Under normal circumstances, you're not resizing your browser to use a site. What's graceful is the fact that the layout is well suited for each and every resolution you throw at it, whether you're on a full-screen desktop or a mobile phone.
  - goatforce5 15y ago
    The Globe developed (and released!) an incredibly neat piece of software to let them preview changes on 10+ devices simultaneously. https://github.com/marstall/shim https://github.com/marstall/shim You can see it in use very briefly from 1m 18s in: http://www.boston.com/video/viral_page/?/services/player/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001 http://www.boston.com/video/viral_page/?/services/player/bcp... They should release a video of shim in action. A video explains it much better than words can. (I was lucky enough to get a sneak peak of all their new stuff a little while ago.)
blahedo 15y ago
Yes, it's not just the flowed columns. Notice also: the masthead logo, the weather bug, the section menus (which switch to collapsed "Sections" at narrow width), the photo sizes. Actually, it's the weather bug and the logo that really do it for me. There's a lot of love that went into this design.
Isofarro 15y ago
I'm seeing the right hand adverts chopped off on the right hand side. Both of them. That's not good business if you are relying on advertising revenue to support the financial costs of running a site. That's one of the drawbacks of this responsive design drive, they don't take into account content that needs to be at a fixed and known size. When an advert gets chopped off or disappears from above the fold - that pushes down the value of advertising on that site. Too much of that and the revenue generated this way drops. There's no point having the surprised face on declaring that I don't understand the web and it wasn't designed for pixel-specific rectangular spaces. That requirement drives the sustainability of a large number of organisations, there's no point pretending it doesn't exist.

joshmlewis 15y ago

It is worth checking out. Really neat how well it does go from big to small. Was this done with Javascript/jQuery?

1m27d 15y ago
It looks like they're using HTML5 Boilerplate.
nek4life 15y ago
I'm guessing a combination of javascript and css media queries. http://twitter.com/#!/beep http://twitter.com/#!/beep and http://twitter.com/#!/scottjehl http://twitter.com/#!/scottjehl were both part of this project. Ethan Marcotte has a responsive web design book that recently came out. http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/responsive-web-design I think there's 20% off today with the code BOSTON for the launch of the Globe's site as well.
regularfry 15y ago
In principle it's doable with just CSS properties, but I don't know quite how good the browser support is.
dorian-graph 15y ago
Nope, by what I can see. Basically all CSS[3]. The JS they have seems to be for libraries like Modernzr (HTML5 related) and some other things. Basically, in the CSS there is code like "@media screen and (min-width: 480px) {}" where everything within the curly braces is ONLY for browser windows that are > 480px. So, you can do all sorts of combinations like max-width: AND min-width:. When the window is resized it uses new rules. AFAIK people refer to this as 'Responsive web design' and thankfully is being picked up by a lot of designers/developers. There's a ton of ready-made CSS frameworks and the like available for people to use. (People, feel free to correct/clarify my explanation)

naed 15y ago

wow thats a really slick and usable design. the call to action page if you click to a story is really fresh to.

alexkearns 15y ago

I used a similar technique on my web-based timeline-software. The aim was for the timeline to work at almost any size. Not quite perfected it but getting close. If you want to play with the resizing, you can use this link - http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-based-timeline-software/ http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-bas...

alttab 15y ago
That app would be really cool if you could visualize data that imports from other sources. Imagine documenting your facebook pictures instantly through time via the site's meta data and links to the pictures themselves, etc. Well done. I noticed that the navigation gets borked when the screen gets really small. I think the choice here is to show a different navigation menu (rollover menus?).
- toyg 15y ago
  It could also benefit from better copy. "Everything from a timeline's colour scheme and date range to its background image and intro text can be changed in the Settings tab." -- a wall of badly-punctuated text, really unappealing. Kudos for the app though, it does look nice. More auto-importing and some iPhone action please :)
  - alexkearns 15y ago
    Not wanting to be confrontational but what are you talking about. There is nothing wrong with the punctuation of that text. It might not be Dostoyevskian in its elegance but it is grammatically correct.
    - toyg 15y ago
      I've lost my breath trying to read it... would use a comma or two. It's also completely useless and out of context -- that's a help box, not a sales pitch.
- brackin 15y ago

ForrestN 15y ago

I assume they are testing the waters for something similar for the NYT. I think it's very successful visually, and certainly a nice use of this new technology. My only nitpick is that I wish there was more letter spacing on the headlines. I don't know why the type has to be so squished.

T_S_ 15y ago

Great job making the font size respond to Cmd+. Many sites seem to drop the ball on this important feature (ahem LinkedIn, NYTimes mobile).

roopeshv 15y ago

http://mediaqueri.es/ http://mediaqueri.es/, now stop picking examples from certain place, give some background what you want to talk about.

guywithabike 15y ago

Keep in mind that the point isn't to be flashy when you resize your window, it's that the site will work just as well on tiny mobile screens, medium tablet screens, and large computer screens without separate domains, crappy shim layers (I'm looking at you, wp-touch), etc.

ugh 15y ago
Or for people who like to not have their browser be fullscreen all the time.
- georgemcbay 15y ago
  Or for people with high resolution monitors who dislike the fact that a lot of web pages have more white space on the sides than they do content in the middle when their browser is fullscreen or close to it. Granted, I realize that making any specific column of text too wide hurts readability, but most sites could benefit from being more multi-column (size permitting) and getting some of the ads and other non-text elements out to the sides more. Going to a website and seeing one fixed bit of content at 1024px or whatever in the middle is so very lame. I am glad to see some websites starting to move away from this, and now that working examples can be seen hopefully other sites will be shamed into following suit.

beatpanda 15y ago

We did the same thing on my college newspaper this semester (we're still working out bugs ) – http://spartandaily.com http://spartandaily.com

pixelcort 15y ago
As an SJSU alumnus, I'm glad to see this.

elliottkember 15y ago

I think responsive design that changes when resized like this is a bit annoying and unexpected. When I'm using the page and I resize it, I lose my place on the page and all the content reflows. There's nothing in traditional media that works that way.

ra88it 15y ago
That's just it - for me, it seems like they achieved responsive design without being broken and annoying. But some of it is subjective, and I only saw the new design today. It might not hold up so well to heavy use.
rhodimus 15y ago
>> There's nothing in traditional media that works that way. And that is exactly the point - it feels like we are finally waking up to what the web can really do that traditional media cannot. I'm sure in a few years having the content reflow will be something users expect of every website (not that it is something people do all the time - see the comment that guywithabike made).
rimantas 15y ago
Just curious: how do you resize "traditional media"?
- elliottkember 15y ago
  Well, you can fold a newspaper up so you're reading one part of it at a time, for example.
rorrr 15y ago
Why would you resize your browser while reading a page?
- omaranto 15y ago
  To answer your question: to make the page more readable, if resizing changes column width. But your question is the wrong question. The reason to have a fluid layout is to have a single version of the page that looks good on screens of all sizes, computers, tablets, and phones.

chrismealy 15y ago

It's weird, when a layout is too clean it feels like the site is fake somehow.

tsunamifury 15y ago
Very true. I've done layouts for newspapers before and I've noticed a few things: 1) White space looks wonderful, but for some reason we lend more 'serious creedance' to text that is small and crammed together. 2) Design is good to a point, but then drops off when it begins to feel 'commercial' I think after a hundred years of reading sloppily put together papers chalk full of the latest news, we sort of associate bad design with its 'genuineness' and overly clean design with something desceptive.
- Angostura 15y ago
  In the late 1980s there was a nice study that was produced with the advent of the then nwe-fangled laser printers. It showed that journalists were less likely to read a press release if produced in a neat, attractive sans-serif font, and more likely to read it for news content if produced in slightly distressed Courier.
markmccraw 15y ago
I kind of get that feel too, and I think it might be related to the fact that many spammy/scraper news sites and amateur operations use designs off of themeforest or popular free WP themes, which tend to be fairly minimalist and white space heavy. Whereas pretty much all high end news outlets have extremely busy designs, and we have been conditioned to associate that with trustworthiness.
- nikcub 15y ago
  It is very strange how that works in our minds. You associate sites and immediately discriminate against the content because they look or 'feel' like other sites with less substantial content. For eg. the padding in Google+ gives me a feeling of amateur content (which it is). Same with sans-serif fonts - I got huge push-back at Techcrunch when I wanted to change the default reading font to a serif font, the feedback internally was that the site feels 'too serious' The business of sites like NYTimes and WSJ make them feel 'authentic' for some reason. I have known this for a long time but couldn't really put my finger on what it was. I remember one of the first client websites I did back in 97 - we laid out absolutely everything that we needed on the page, but there was a lot of space, the client said that the site doesn't feel 'authentic' and I spent a lot of time simply thinking of things to throw onto the page to make it look busier. I think this is something that a lot of developers and web designers know about, but for some reason I can't recall ever reading anything about it. If anybody knows if this phenomenon has a name or has any more information about it, please share. I have been reading a lot of design books this year and none have made mention of the link between a site being 'busy' and feeling professional

voidfiles 15y ago

I smell filament group(http://www.filamentgroup.com/ http://www.filamentgroup.com/). Anyone know who led the design?

cwe 15y ago
This redesign is all over filament's home page, so it looks like they indeed were. EDIT: http://filamentgroup.com/lab/introducing_the_new_responsive_designed_bostonglobecom/ http://filamentgroup.com/lab/introducing_the_new_responsive_...
- twog 15y ago
  I believe Ethan Marcotte was involved as well as one other group. He spoke almost entirely about the redesign at front end conference this year.
- asimeqi 15y ago
  I think it is worth pointing out that this is not a redesign but an entirely new site. That probably made the website easier to develop. The old site, boston.com, hasn't changed.
- goatforce5 15y ago
  A video with some Filament guys talking about the project (on boston.com, ironically enough): http://www.boston.com/video/viral_page/?/services/player/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001 http://www.boston.com/video/viral_page/?/services/player/bcp... Video says the site was by Globe staffers, Filament and Upstatement.

roshanr 15y ago

Seems to compare favorably to the Andy Rutledge redesign (http://andyrutledge.com/news-redux.php http://andyrutledge.com/news-redux.php) save for the ads. The ads on the story pages don't work as well resulting in horizontal scrolling.

blake213 15y ago

This is called an adaptive layout.

Adaptive 15y ago

The real success here is not the fluid design (which is awesome). It's getting it through inside a traditional media company. I'd love to read a frank overview of that process as well as the design itself.

freddealmeida 15y ago
I agree. Responsive design itself is not difficult. But the sell must have been a difficult one. I'd love to hear it as well. My guess is it was based on a prototype. Seems everyone these days expects you to build one :-S
- joshuamerrill 15y ago
  Having designed www.mogotix.com, which is completely responsive, I can say that fluid layouts absolutely create challenges that fixed layouts do not. That said, they're not insurmountable, and the benefits are substantial.
  - joshuamerrill 15y ago
    Elaborating: some things that are simple in a fixed layout can become very difficult in fluid ones. Two brief examples: 1. Try embedding a YouTube video into a fluid layout. You'll need a JavaScript solution to remove the ugly black bands that will appear above and below your video. 2. IE 6-8 do not support media queries, which form the basis for fluid layouts. When we relaunched MogoTix in March 2011, I had to include a jQuery script to get IE to understand media queries (that script is now included by default in the 1140px grid at cssgrid.net). If anyone has questions about implementing a fluid layout, feel free to ask.
    - matthewbuchanan 15y ago
      Paravel and Chris Coyier released fitvids.js last week which solves the fluid video embeds issue pretty nicely (fitvidsjs.com).
  - 15y ago

deleted 15y ago

[deleted]

ChuckMcM 15y ago

That is very nicely done. I am glad they didn't go for the temptation to put the display add in the laft column so that as the page shrinks it re-flows to putting only ads above the fold.

niels_olson 15y ago

I would have liked to see the resize use additional space by bringup an additional column of headlines instead of just expanding the already useless picture. Here's a nice thread on newspaper designs, shamelessly jumping to my head-to-head of above-the-fold comparisons of the top 10 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002nk#above-fold http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...

3dFlatLander 15y ago

I have terrible vision, and utilize the browsers zoom function a lot. On their new site, I can zoom without having to do a lot of horizontal scrolling (just in Firefox though, doesn't seem to work as well in Chrome). So, aside from the aesthetic for the masses, there's an element of accessibility here that shouldn't be overlooked.

jacquesgt 15y ago
I agree, except that they totally break zooming on mobile devices (or at least iPhone). I hate it when I rotate my phone and the text reflows at the same size instead of zooming to fill the wider viewport. On the plus side, you don't have the issue of links breaking because they send iOS devices to their mobile ghetto that ignores everything in the URL after the domain name.

kanetrain 15y ago

This is a great responsive design. This works, in part, because it is a news site with predictable image sizes, headline sizes, and very limited GUI. If you want to build something that is more graphically intensive, with more focus on visual appeal in traditional browser sizes, it gets more and more complicated. I'm working on a project now actually, and it's pain. I'm not saying it can't be done (it can with a lot of work). It's just more difficult and time-intensive the more graphics you use.

abredow 15y ago

This looks great. It's awesome that we can make sites like this that theoretically allow us to serve the same pages to desktop and mobile browsers. I'm curious though, is there any significant overhead to having mobile clients parse 1600+ lines of HTML, or is that a non-issue these days? Anyone have any data points on this?

bstar 15y ago

Screw the layout, whoever came up with the dependency manager is a friggin' genius. <script src="/js/lib/rwd-images.js,lib/respond.min.js,lib/modernizr.custom.min.js,globe-define.js,globe-controller.js"></script>

mark242 15y ago
What, a servlet that does a split and a concat?
- bstar 15y ago
  Did you actually play with the url? It pulls in the dependencies in one file, in any order. The genius part is that it's creating cached custom dependencies for each page that could potentially be shared by other pages. This is the most efficient dependency management approach I've seen. For sites that could have hundreds to thousands of pages, css/js asset & dependency management is so critical. Something doesn't need to be difficult to implement to be extremely useful.
  - xentronium 15y ago
    <shameless plug> If you like that idea, you might want to take a look at library I am developing in my free time. The idea is that you specify things you need (for example Mootools:Core and Mootools:More:FormValidation) and dependency manager pulls the required code with dependencies in correct order. It is in ruby, though (rack middleware + standalone packager). http://xentronium.me/jsus/demo/ http://xentronium.me/jsus/demo/ http://xentronium.me/posts/jsus-demo-packager http://xentronium.me/posts/jsus-demo-packager -- some explanation </shameless plug>

xelfer 15y ago

This looks similar to the http://www.news.com.au http://www.news.com.au redesign which was rolled out 2 weeks ago. Lots of white space and thin grey lines.

adeaver 15y ago

Make sure you check out the online crossword. It's 'responsive' as well. And quite cool. (Have to register to access it)

keeperofdakeys 15y ago

Here is one of the lines of the source code: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> For those who don't know, this disables user scrolling on every standards-compliant mobile device. The reason is a bug on iOS, that causes test to flow off screen when changing orientation on non-default zoom levels. http://adactio.com/journal/4470/ http://adactio.com/journal/4470/ I really wish more sites would enable it by default, then use javascript to disable it for iOS devices. I have come across many sites with small text that I want to zoom, but can't (this is especially bad for people with poor eyesight). Disabling it for everyone reminds me of the days of IE5 and 6, when other browsers were hampered by IE's bugs; we are only starting to see what having no bug-ridden, dominant browser on the Desktop can bring. Before anyone says that browsers shouldn't implement this feature, they should. For better or worse, it is a part of the standard. Using browsers that don't implement parts of the standard would bring about situations even worse then this.

jannes 15y ago
A few weeks ago I made a bookmarklet for iOS that re-enables zooming and also sets the viewport width to the device-width (this is useful for pages that use the whole width, which leads to small fonts. E.g. Hacker News). It works quite well. javascript:(function()%20%7Bvar%20meta%20=%20document.createElement(%22meta%22);%20meta.name%20=%20%22viewport%22; meta.content%20=%20%22width=device-width,user-scalable=yes,maximum-scale=10%22;%20document.head.appendChild(meta);%7D)()

andymboyle 15y ago

Thanks for posting this link. I'm kind of wondering why my post from hours earlier didn't pop up. Did I just write a crappy headline? http://news.ycombinator.com/item?id=2987246 http://news.ycombinator.com/item?id=2987246

blahedo 15y ago

I am IN LOVE! It has been years since I've seen a mainstream site that didn't force itself wider than my default window (usually 600-800px, a bit less than half my screen). A lot of the sites that "try" to "address" the issue of multiple resolutions still focus on two targets: mobiles, and full-screen 1024+ monitors. Some of us are in between! Thanks, Boston Globe.

RegEx 15y ago

You don't have to be a huge web design shop to successfully build fluid websites. A good place to start building sites like this is the 1140 grid[0]. We've knocked out a couple of client sites with it [1]. Getting the basic layout to resize is super easy...it's the positioning details for the media queries that can take hours. [0]: http://cssgrid.net/ http://cssgrid.net/ [1]: http://etbeancounter.com/ http://etbeancounter.com/

Titanous 15y ago

Great design, but they have a registration wall in front of every single article.

pauljonas 15y ago

Looks good, but line-height gets messed up when using the menu dropdown to select a bigger (i.e., "bigger", "biggest") text size. See screenshot: https://img.skitch.com/20110913-qpbjnmcr2cjqcgwtfahen878sp.png https://img.skitch.com/20110913-qpbjnmcr2cjqcgwtfahen878sp.p...

sailfast 15y ago

Nice design and a layout that I'm sure will be mimicked by a number of other traditional paper outlets - if they're smart. Now to figure out how to do it myself! hehe

linhir 15y ago

The Boston Globe is owned by the NYTimes company, I wonder if this design might be a preface to a more fluid design of that site.

sogrady 15y ago

The real success here - if it is successful - will be convincing readers that have previously had free (for registered users) access to Boston Globe content at Boston.com to pay $208/yr simply for the new interface. It will be the same content, with a few exceptions, simply rehosted at a new site with a new URL. If they're able to convert even a subset of their current audience over, journalists everywhere will rejoice.

maigret 15y ago
Definitely. Still I am not sure if subscription is adapted on the net - do they also offer single issues? As a buyer, I rather pay single issues. At the time where there were only paper issues, we used to take a subscription for the local or national newspapers. Now that the net has so much diversity, I want to multiply my sources. The single issue order that many iPad apps offer seem more comfortable to me.
ghc 15y ago
I'll certainly pay. It's a lot cheaper than the paper subscription and Boston.com has a horribly design.

MadMikeyB 15y ago

Very well executed, and everything I've read about it is positive. Good job PR team? Or good job social web :) Oh, the site is pretty good too ;)

maigret 15y ago

Still needs some bug fixes though - the site is not showing at all on Chrome for me. May be due to one of my many privacy extensions.

frankiewarren 15y ago

I loaded this and thought, "What's the big deal?" I'm sure many people, on many different browsers/platforms/resolutions, thought the same exact thing, which is what makes it so brilliant.

Angostura 15y ago

There's a bit of UX failure here though. The first ting I did was click the left hand top navigation element which displayed the submenu. I then moved my mouse to select a sub-menu item, crossing another top-level menu item which made the menu disapear. Granny's not giong to like that, and I personally dislike having to be careful to move my mouse vertically down before crossing to a submenu item.

karipatila 15y ago
Where do you have to click to display a submenu? At least for me it all works on hover, while clicking will open another page.
- Angostura 15y ago
  Apologies, I posted before drinking my coffee. You're absolutely right. What I meant to comment on was the fact that the menu displays when you hover, and then you have to be extremely careful to move your mouse vertically first, lest you accidentally hover over another top-level menu. It's a question of ease of content-browing v ease of navigability. Having to click on a top level menu item would make the former slower, but would speed up the latter, personally I find the hovver-bother quite annoying.

rglover 15y ago

Aside from having a great design, what's excellent about this is that they're working with new design concepts and implementing them well. Responsive web design is huge for newspapers and other sites with lots of text and images. The Boston Globe is hopefully the first of many great redesigns using this method.

AbyCodes 15y ago

Check the site with http://quirktools.com/screenfly/ http://quirktools.com/screenfly/ Admiration guaranteed.

gjg 15y ago

This is great stuff for adapting to different screen sizes, but it's hard to see it as the perfect solution to the varying needs of different devices. It works reasonably well on mobile, but still results in a fair amount of wasted bandwidth. And some pages (looking at you, registration interstitial) serve up 150kb+ images that aren't displayed at all on mobile devices. It may be responsive to my screen size, but it certainly isn't responsive to my data plan.