

New Boston Globe website design - ra88it
http://www.bostonglobe.com/

======
keeperofdakeys
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/>

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
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)()

------
Adaptive
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.

~~~
spdy
<http://www.alistapart.com/articles/responsive-web-design/>

This looks like a good start to get the basic idea with examples on this
space.

Today is the first time i saw something like this and im really interested on
learning it.

~~~
lurker17
Why does alistapart, which appears to focus on usable web design, have these
features?:

* A tiny font * huge spacing between lines * excessively wide columns * that cannot be resized

 _

~~~
ugh
The fundamentals are solid (the line height is perfectly alright, about one
hundred characters per line are within the range of empirical results on
optimal readability).

I suspect the font is so small because the design is so old. As far as I know
it hasn’t been updated in ages. It’s old but by no means bad design.

------
ra88it
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
gracefully is subjective. media queries feel abrupt, even on my 'fast'
machine.

~~~
iKnowKungFoo
Abrupt in what browser? Chrome doesn't feel abrupt.

~~~
jgavris
yikes, bad karma, i was half joking with the negativity. good iOS apps have
nice animated transitions between portrait and landscape.

~~~
eropple
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
I don't know much about javascript, I've just seen stuff like this ->
<http://masonry.desandro.com/demos/animating-jquery.html>

Resize that page.

~~~
eropple
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.

------
3dFlatLander
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
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.

------
guywithabike
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
Or for people who like to not have their browser be fullscreen all the time.

~~~
georgemcbay
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.

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

~~~
tsunamifury
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
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.

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

~~~
pixelcort
As an SJSU alumnus, I'm glad to see this.

------
alexkearns
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-
bas...](http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-based-
timeline-software/)

~~~
alttab
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?).

~~~
brackin
This exists, look up MemoLane. They're a startup which is exactly like this
but for your social network postings.

~~~
alexkearns
Of course, I am aware of Memolane. Significantly different product than ours.
They are aimed at creating a timeline-based life history by importing all your
social media.

We're aimed at allowing people create highly-customisable timelines on any
subject for presentations. embedding on websites etc. We 're much more like
TimeGlider, Preceden and BeeDoc's Timeline 3D than Memoland.

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

------
blahedo
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.

------
frankiewarren
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.

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

------
bstar
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
What, a servlet that does a split and a concat?

~~~
bstar
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
<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/posts/jsus-demo-packager> \-- some explanation

</shameless plug>

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

~~~
dorian-graph
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)

------
RegEx
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/>

[1]: <http://etbeancounter.com/>

------
ForrestN
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.

------
ChuckMcM
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.

------
kanetrain
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.

------
gjg
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.

------
niels_olson
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=0...](http://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0002nk#above-fold)

------
sogrady
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
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.

------
Angostura
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
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
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.

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

~~~
cwe
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_...](http://filamentgroup.com/lab/introducing_the_new_responsive_designed_bostonglobecom/)

~~~
goatforce5
A video with some Filament guys talking about the project (on boston.com,
ironically enough):

[http://www.boston.com/video/viral_page/?/services/player/bcp...](http://www.boston.com/video/viral_page/?/services/player/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001)

Video says the site was by Globe staffers, Filament and Upstatement.

------
abredow
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?

------
rglover
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.

------
pauljonas
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.p...](https://img.skitch.com/20110913-qpbjnmcr2cjqcgwtfahen878sp.png)

------
roshanr
Seems to compare favorably to the Andy Rutledge redesign
(<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.

------
andymboyle
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>

------
elliottkember
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.

~~~
rimantas
Just curious: how do you resize "traditional media"?

~~~
elliottkember
Well, you can fold a newspaper up so you're reading one part of it at a time,
for example.

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

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

------
sailfast
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

------
MadMikeyB
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 ;)

------
AbyCodes
Check the site with <http://quirktools.com/screenfly/>

Admiration guaranteed.

------
maigret
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.

------
linhir
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.

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

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

------
blake213
This is called an adaptive layout.

