New Boston Globe website design

Here is one of the lines of the source code:<p><pre><code> &#60;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"&#62; </code></pre> 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. <a href="http://adactio.com/journal/4470/" rel="nofollow">http://adactio.com/journal/4470/</a><p>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.<p>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.

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

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

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.

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.

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

We did the same thing on my college newspaper this semester (we're still working out bugs ) – <a href="http://spartandaily.com" rel="nofollow">http://spartandaily.com</a>

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.<p>If you want to play with the resizing, you can use this link - <a href="http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-based-timeline-software/" rel="nofollow">http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-bas...</a>

<a href="http://mediaqueri.es/" rel="nofollow">http://mediaqueri.es/</a>, now stop picking examples from certain place, give some background what you want to talk about.

I am IN LOVE! It has been <i>years</i> 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!<p>Thanks, Boston Globe.

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.

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

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

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

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.<p>[0]: <a href="http://cssgrid.net/" rel="nofollow">http://cssgrid.net/</a><p>[1]: <a href="http://etbeancounter.com/" rel="nofollow">http://etbeancounter.com/</a>

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.

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.

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.

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.<p>It may be responsive to my screen size, but it certainly isn't responsive to my data plan.

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.<p>Here's a nice thread on newspaper designs, shamelessly jumping to my head-to-head of above-the-fold comparisons of the top 10<p><a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002nk#above-fold" rel="nofollow">http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...</a>

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.<p>If they're able to convert even a subset of their current audience over, journalists everywhere will rejoice.

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.<p>I then moved my mouse to select a sub-menu item, crossing another top-level menu item which made the menu disapear.<p>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.

I smell filament group(<a href="http://www.filamentgroup.com/" rel="nofollow">http://www.filamentgroup.com/</a>). Anyone know who led the design?

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?

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.

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

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

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?<p><a href="http://news.ycombinator.com/item?id=2987246" rel="nofollow">http://news.ycombinator.com/item?id=2987246</a>

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.

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

This looks similar to the <a href="http://www.news.com.au" rel="nofollow">http://www.news.com.au</a> redesign which was rolled out 2 weeks ago. Lots of white space and thin grey lines.

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

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

Check the site with <a href="http://quirktools.com/screenfly/" rel="nofollow">http://quirktools.com/screenfly/</a><p>Admiration guaranteed.

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.

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.

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

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

This is called an adaptive layout.