Where the magic is: How the team at SB Nation earned World’s Best honors

Ryan Gantz thinks he’s discovered where the magic is.

Gantz is the Director of User Experience for Vox Media, the company which owns sbnation.com and is still basking in the glow of being named one of the Society of News Design’s World’s Best Designed news sites.

Ryan Gantz, Director of User Experience for Vox Media.

Ryan Gantz, Director of User Experience for Vox Media.

He believes the coordination of many departments’ goals is where the success of sbnation.com emanates from.

“This is where you are getting lot of what made Vox successful, trying to get products and technology and advertising and editorial all to work together, because the overlap is where the magic happens,” Gantz said.

The process, which was hugely collaborative, included writers, designers and developers. “We have a flat organization, and we find that building great products absolutely requires cross-team collaboration,” he said.

Gantz has been with Vox Media for six years, back when SB Nation was known as Sports Blog Inc., which featured about 100-150 independently deployed sports blogs with each operating on its own content management system. SB Nation now features 312 team and sports-focused blogs that embrace the fans’ perspective and run on a single CMS called Chorus.

The vision for the SB Nation that readers see today started in January of 2012. The process began with gathering requirements, followed by the creation of wireframes and designing the visual architecture. Eight months of work came to fruition when the new look launched on September 24, 2012.

SB Nation made responsive design a fundamental building block of its efforts. Gantz said this forced the team to consider mobile as a first-class experience, and it redesigned all screens for different devices at same time. The markup for the desktop and mobile sites are both the same.

Gantz said their mobile readers want to read the text first at the top of the page, so the minimal photos on the mobile site are played further down the page.

“The responsiveness of the sites has been a big deal,” Gantz said. “Lots of people are hopping on the bandwagon but they aren’t thinking through what that means. The responsiveness has been very satisfying.”

The impact of the Hoefler Frere-Jones typefaces is evident upon the first view of the site. Gantz believes the quality of the body copy in particular is greatly improved. The World’s Best judges noted the typography’s impact is evidence of how far web type has come in recent years.

Gantz said a great emphasis was also put on accommodating advertising. “We were respectful of advertising being a key player in this process,” Gantz said.

The advertisements all read clearly at a desktop width, a tablet width and a mobile width. The advertisements are also prominently displayed. For example, an ad for Speed Stick deodorant, which was running on April 11, not only surrounds the editorial content, it also bleeds into the top of the editorial content.

Gantz credits John Fuller, the site’s lead designer, with pushing the team to focus on traditional news design. “We let the design get out of the way so that the content could shine through. We hope that is what caught the eye of the judges.”

Over The Monster is the SB Nation community for fans of the Boston Red Sox.

Over The Monster is the SB Nation community for fans of the Boston Red Sox.

Inevitably, there are lessons to be learned from such a massive project. Gantz said his team’s lessons learned center around how readers used the individual fan pages, and understanding the impact of the changes they made.

“We weren’t necessarily as thoughtful about how this (redesign) would affect some communities as we should have been,” he said. “As we created more cleanliness, we sometimes compromised on tools those communities used and their functionality. The fan pages are like sports bars in some ways, and people like to hang out there. If you come in and re-paint the walls, and move their LCD monitor, they’re going to say, ‘Why are you changing around my dive bar? This is my home.’”