CSS in The Upshot

I decided to examine The Upshot — the New York Times’ data visualization/explain-the-news arm— this week. Its layout is simple and almost blog style, but it’s that minimalist aesthetic that makes it an appealing mindless scrolling experience, at least compared to the more cluttered front page of the NYT or competitors like FiveThirtyEight.

Screen Shot 2015-03-04 at 9.27.40 AM

Most posts actually sort of resemble the style of our cat blog example in class. But the centered body text, coupled with a left float on author bylines/pictures/contact info is clean and easily readable. I liked that the design includes pictures that float right instead of making you click through to see them. The pictures add more visual interest to a page that is otherwise pretty heavy on black and white (plus occasional lime green) and might entice some readers to give headlines and preview body text a second glance.

Screen Shot 2015-03-04 at 9.27.57 AMThere are a couple of infinite scroll stylesheets tucked into the CSS for the page, and I’m iffy about that as a technique in general, but it works in The Upshot’s case. It’s also not true infinite scroll because every 5 blog posts or so, the reader can click a more button that will produce another five. Infinite scroll should be used sparingly because it’s kind of exhausting, particularly for a casual viewer, but can be effective for sites that have a lot of content.

Screen Shot 2015-03-04 at 9.28.26 AM

One of my favorite CSS techniques on the site was The Upshot’s incorporation of the “Best of” feature. Instead of going the snoozefest route of sticking a “most visited” or “popular” column in the right sidebar, the developers decided to highlight some of the best data vizs on the site by sticking them smack in the middle of the page, below the most recent blog posts but before the more section. It has its own container, and thumbnails are centered with right floating text and a decent amount of margin space. You’re going to have to scroll a bit to get them, but the way the section stretches across the bottom of the page makes it hard to ignore and the little thumbnails of the visualizations help draw a reader in. The one-line explanations help add context and are snappy. This approach to popular content could definitely be good for a visuals-heavy site.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s