Introducing A New Article Design | Hacker News Reader

Introducing A New Article Design

nytimes.com

181 pointsdonohoe53 comments

I think we're at the tipping point for a new era of long-form content that's designed natively for the web, and I, for one, am very, very excited about it. There's a whole crop of sites and apps (Svbtle, Medium, Quartz, The Magazine) that were born on the web and are dedicated to long form content, but now with initiatives like this we're seeing the old guard finally come around to the fact that the web is not print made digital, it's a whole new medium with a whole new set of possibilities.

I think there is plenty of appetite for real journalism, thoughtful opinion, and gasp long form content subscriptions, but the implementations have lagged behind the technology, while opportunistic content farms like HuffPo and short form (but tech savvy) sites like Buzzfeed have moved more quickly to capitalize on the true potential of the web. Hopefully projects like this can turn the tide and prove that content on great content can be a great business on the web.

I really like the redesign, but fixed headers are driving me nuts. When I read my eyes fix on the top portion of the webpage, when a fixed header is there I feel like I must retrain myself to start reading a little bit below the header.

I've noticed I don't mind fixed footers, they are not within my natural reading area.

This is interesting... I always read at the bottom of the page vs. the top of the page. I wonder if the style of fixed border elements really will train us to read more near the center?

I wonder why that is- after all, we've gotten used to tab bars, menu bars, etc being fixed at the top of windows.

I think the difference is that those are truly fixed. They never move. "Fixed" top menus on web pages, in my experience, always stutter at least a little bit. I find it distracting.

They do? I agree that fixed headers that are repositioned on scroll events shudder noticeably, but when headers have a fixed positioned via CSS I haven't seen this (e.g. Facebook and Twitter's implementations).

My major problem is if I hit the space bar or Page Down button, the first lines of text are hidden behind the banner.

I wrote a brief comment on this issue (and a proposed solution) a few weeks ago: http://gist.io/4950242

Fixed headers are terrible. I once asked a whole room of designers if any of them could think of a single design they liked that used a fixed header, and none could.

I think fixed web site headers are one of those things that looked cool/new/snazzy so they were adopted as a matter of fashion rather than usability. I should go look and see if there are any studies done on them...

Fixed "anything" is driving me nuts. In my opinion nothing fixed should be on the page.

Congratulations on the engaging and thoughtful redesign - this is a huge improvement on the current article pages, which are so cluttered the article feels like an afterthought - squeezed in between social sharing boxes and the related column on the left. Reading that first paragraph has always upset me on articles - where you have to follow a narrow river of text down to the body of the article to continue reading, and ignore all the distractions on the way.

Making the content the star of the show fits far better with what I value in the NYTimes, and what made me a subscriber. Now fix the home page please, it still has that same old cluttered feel!

PS It would be great to see a blog post in future about the work that went into this redesign.

It looks beautiful, but, as a daily reader of the Times, there's one thing that's holding me back from signing up: it's designed (like the iPhone app) to show you other content from the same section.

Here's the thing: When was the last time you gave a damn about the section?

I understand caring about Fashion vs the Science Times. But while the number of sections the Times has makes sense in print, on the web, the differences between the Metropolitan, New York, Business Day, International, National... it all seems fairly artificial. Is the war in Afghanistan national, or international news? Does education reform go under politics or education? The answer is, of course, both, but the Times has to choose. Sure, it makes sense to group them on paper, because it's the best way to help you find things that are like what you're reading. But digitally, without the ability to quickly flip through, there's a lot that just gets hidden from the reader.

As someone who spent five hours yesterday laying out a newspaper, I have a lot of respect for the designers at the Times. Here's to hoping they find a better way to move their IA to the web than in hundred-year-old silos.

As a frequent user of both the iPhone and iPad apps, I can tell you that I appreciate having articles categorized in various sections. Mostly I like browsing the metaphorical paper while skipping sections that I know rarely have articles I care about (hello Style section!).

As for articles that could belong under multiple sections, they are often actually just cross-posted in both. For instance, today there was an article about Harvard searching through staff emails that ended up in the U.S. section and in the Tech section.

One of the best things about sections is the ability they give you to 'finish' a newspaper. That doesn't mean read every article - it means the ability to pick it up, look through it, and decide when you've seen enough to be done with it.

I hate the feeling of tumbling down a rabbit hole that most online news gives me. I miss the feeling of satisfaction I used to get from leafing through the Times section by section. I'm hopeful this redesign will bring back some of the best bits of the experience afforded by dead trees.

I totally agree with your thoughts on 'finishing' a newspaper. That said, the large number of sections, and having no way to see whether I've seen the new articles in them, leaves me unable to do so.

Perhaps it's my wide range of interests, but with 28 sections in the app, of which over 20 I'll glance through on paper and occasionally read an article from, I can't possibly check all of them every day for interesting articles. Sure, some only update weekly, but am I supposed to just remember off the top of my head which day the science section is, and then only check it then? (Tuesdays.) And then there are all the blogs, which I'd also like to read... get the picture?

I don't have a GOMS analysis for you or anything, but with the time it takes to go to sections, see if there's anything new and interesting, the attention just doesn't feel worth the effort, and I give up after going through the front page and 20 most emailed articles.

This looks like an excellent step in the right direction, but I do have one worry here: native apps.

The New York Times has had several experiments over the last year that indicate a desire to move everyone on to the web and out of native apps. They had an experimental website aimed at tablets that they marketed to NYTimes iPad app users and, while nice, it was a definite step down from a native app. And the iPad app has been increasingly sluggish, despite occasional updates — seemingly a sign of disrepair.

I design and program for the web, so I definitely understand the allure, but mobile web apps are, at best, an approximation of the experience provided by mobile native apps. Just ask 37 Signals, arguably one of the biggest proponents of web apps. Maybe mobile web apps will catch up, but we're not there yet, and I would strongly argue that we won't be there very soon.

I have an inkling that this redesign will be accompanied by a renewed push away from native apps. I just hope that The New York Times doesn't stop development of their native apps.

As tablet and phone hardware matures, they should get faster processing power and additional memory that will make these web apps Good Enough (tm). Until that time, like you, I hope the NY Times and others keep making native apps.

That's what they said about running Flash.

Good Flash performance on mobile required both better hardware and efficiently programmed software from Adobe. Adobe is seems to have been a pretty big bottleneck. Flash still works pretty poorly on my desktops and laptops with gobs more power than my phones and tablets.

However, in the case of web apps, we're almost there on performance and we have Google, Apple, Mozilla and Microsoft all working to improve mobile browsers and browser speed.

That typography is beautiful! Looking at the source, they seemed to have created their own version of Cheltenham called "NYT Cheltenham".

  font-family: nyt-cheltenham, Georgia, serif;

Good stuff!

It's beautiful on a high-dpi screen. on a 24" 1920x1200 screen it's rather ugly.

Caution --

"Request access to the prototype" yielded an immediate email: "Thank you for signing up for a New York Times newsletter!"

Hi, designer here. Sorry about that, you haven't actually been subscribed to a newsletter - you've been put on the waiting list, but we haven't updated the message in the confirmation email. Fixing this now.

Looks interesting, a lot of similarities with android app (I don't own other mobile devices so can't tell if they are all they same).

Question. How long did it take you guys to come up with this design from start to finish?

I can't really say – I joined back in August and the project was already underway.

Also take a peek at:

http://www.nytimes.com/skimmer/#/Top+News

This is still my favourite example of long-form done right for the web (also NYT)...

https://www.nytimes.com/projects/2012/snow-fall/

Previous HN discussion: https://news.ycombinator.com/item?id=4950054

You're (probably) not on Chrome (which blocks mixed content by default) because that https page is broken.

http://www.nytimes.com/projects/2012/snow-fall/

You are correct. Using Firefox 19 w/ HTTPS Everywhere extension.

It looks nice, but I'm still waiting for someone to figure out how to do multiple columns well online -- I'd like to use more than a 6 inch wide column of my laptop or desktop screen if possible.

The new layout looks like it is based around a concept I always liked about msnbc.com's article layout--it divides the page into a series of horizontal "screens", with the article text connecting them.

See how, as you move down the page, different elements like pictures, boxes on the right, and graphics divide the long article text into a series of stacked "sections", each of which fits into a horizontal screen orientation.

This makes better use of the (now) more prevalent widescreen 16:9 screen orientation, which normally would be considered poor for reading long articles.

I guess it's pretty but the linked demo(?) page is quite confusing. The top article scrolls uncontrollably fast; at first I thought I had some input, thought I causing it to go up/down but couldn't figure out the UI. Why the bleep wouldn't it stop so I could read? Finally realized it must be a canned demo scrolling on its own, but a disorienting experience.

As one of a handful of product guys on HN, I'd love to hear about the research and decision making that went into this redesign.

Handful? Citation please?

Obviously, he was being ambiguous.

Bingo. Nothing gets past some guys.

Handful? Do you mean dedicated product guys? Otherwise, I'd make a wild guess there's much more than a handful. Almost every one running a small business selling their own product has to be the product guy.

There's a ton of product manager, designers, and researchers on Hacker News. But looking at his profile seems to indicate that Mr. Clarks a pretty humble guy.

So is there anything going on differently on the backend? The article display shows images embedded in the body layout, as opposed to just the standard lede image spot (and sidebar embeds). Does the CMS have features allowing online producers to easily intermix words and multimedia, in the way that Verge and Polygon do?

From what I've seen of the design and know of the CMS I would say this can be done without minimal changes on the backend (though you never know - simple things can have complex repercussions....

The big change is that the embedded Video is traditionally off to the left-side of the page. In this redesign the question is how to determine where within the text they're spread out.

Compare the design to the original article to see what I mean.

http://graphics8.nytimes.com/marketing/prototypeSignUp/media...

http://www.nytimes.com/2012/12/09/magazine/hollywoods-year-o...

The big question in my mind is where the ads will go?

Yes, and related to that, I wonder if single-page view will now be the default? And if so, if the backend has a way to manage the allocation of ads for the extra-long rails in indepth stories.

I suspect it will not (I hope it is) be single-page.

If there is any ad management I suspect it will be handled client-side based on interaction. Definitely lots of potential to do justice to both ads and content (and ultimately the user).

Right now single page view is the default and I believe that is the plan.

(From an NYT employee who has access to the prototype but did not work on it at all.)

Seems like mobile-first is one of the design principles. I wonder if people read NYT more on mobile now than desktop.

Did it make anybody feel weird when the browser started scrolling? Almost made me nauseated.

Yeah. That tripped me up too.

I know HN's patron saint Jeremy Ashkenas does a lot of the interactive features for the Times. Any idea if he was involved?

Do animated gifs still make webkit browsers hiccup for anybody else? (known old bug, I'm surprised it is still happening)

There are no GIFs for me, only videos (but with a transparent div on top).

I don't care about the design at all, frankly, but I think the comment format is excellent.

Didn't we kill horizontal scroll in the 90s?

Looks like they're channeling The Verge.

Reply on news.ycombinator.com