Sideproject

Building things on the internet

Breaking down the Grantland 3.0 redesign

Bill Simmons' Grantland unveiled its third iteration this week. The long-form sports and pop-culture media site originally launched in June 2011 with top-tier writing talent and a license to be to ESPN what Miramax was to Disney, "a boutique division with more room for creativity."

The site relaunched on Wordpress VIP, practitioned by ESPN and 10up, a company specializing in Wordpress implementations based out of Portland.

Grantland

Taking a look at the evolution of the site's design (the latest, version 3.0 at the top of the graphic above) gives some perspective on where it started and the direction that it is steering toward. However, it is important not to base a critique of a redesigned interface as a direct comparison to its predecessor.

If the old design sets the tone about what’s important, then you may be losing out on an opportunity to make a significant leap forward. A design should never set the tone – ideas should set the tone. Ideas are independent of the design. —Jason Fried, Evaluating a Redesign

So what ideas initiated the redesign?

In an interview with Ad Age at the beginning of 2013, David Cho, Grantland's publisher alluded to the site's direction:

[It's] be about increasing discoverability and promoting pillars that are the next wave of products we'll put out there. Also, Bill [Simmons], myself, Eric [Johnson] and his team are really focused on new and innovative ad executions. We want to be really good at everything, and that doesn't just included writing.

Basically, this redesign positions the site to open up its content, with 30+ discoverable articles on the site's home page up from an average of roughly 15 in version 2.0 . This is done by exposing more of the latest articles and featuring a wider variety of the available podcasts, from The B.S. Report, Grantland Sports and Grantland Pop Culture.

A Quora post picked up by Forbes surmises the purpose of the redesign is to better position the site for ads, establish more pageviews for unique visitors (discoverability), help establish Hollywood Prospectus and The Triangle brands and prioritize social.

A look under the hood

I've always found that looking at code is one of the best ways to learn new things. Since HTML, CSS and javascript are open-source by design, let's dive into some of the techniques the team used to build the site.

Responsiveness

The site is responsive — its media queries are built to target specific site elements based on the flow of the design, rather than approximating based on screen size. The site is also built in Sass, allowing designers to take a more modular approach to its front-end architecture, along with global variables, mixins and extends for re-use.

If I had to guess, looking at the site's CSS, the grids are based off of Brad Frost's Pattern Lab, because its using those 1Up, 2Up, 3Up patterns featured in this demo.

Grantland's team makes use of SVGs for their brand logos to better anticipate scaling images, ems for relative sizing with fonts and spacing and the border-box property for box-sizing. The max-width of the site is in rems, or "root ems", this method of sizing is relative to the root:

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

The site is future-friendly, one indication of that is how it makes use of Scott Jehl's Picturefill,
an approach to responsive media that you can use now that mimics the proposed picture element using spans.

Typography

The headings are using OkayType's Harriet Series a multi-purpose serif font. Its using Harriet Display for page titles and the "workhorse" font, Harriet Text for subheadings and paragraph body text.

Sweating the little things

Google Developer's PageSpeed Insights for mobile product has some interesting findings in its BETA User Experience section, including some undersized tap targets and scrunched line heights. This app tries to find UX issues based on calculations of how large an area is so it's easy to interact. Ultimately inconsequential but interesting nonetheless:

The tap target <a href="http://grantla…sts/bs-report/">The B.S. Report</a> and 2 others are only 2.3mm tall on a typical device (15 CSS pixels).

Hollywood Pros…, and ‘Archer’ and 3 others have a line height of only 100% of the font size.

Conclusions

Two and a half years in, Grantland has continuously iterated on the site, tinkering with what content their audience engages with most and positioning themselves to serve up long-form content on multi-devices. The new redesign is visually and technically impressive, with thoughtful consideration to how their base is interacting with content (context of how users are reading, sharing, etc.) and a future-friendly approach to how the site will be maintained in the long-run.

Want to stay in the loop on what's happening at Sideproject.io? Sign up for the mailing list.

* indicates required