Wednesday, March 21, 2012

Why is this web site white?

Why is this web site white? Because we wanted it to be! A short answer, but in some sense true.

However, there are numerous best practices, analytics, and data supporting wanting it this way. Let’s jump back to the beginning, though. Way back in June of 2010 I created a strategy document for the construction of a new Roadrunner Records web site. The overarching goal  was to rebuild a marketing platform that could nimbly-serve diverse marketing needs and incorporate rapidly-changing technology. That original document said not a thing about having a white web site background, but a lot of the content presentation goals would eventually lead us to that decision.

In fact, the very first version of the new site to make it to a coded example had a beige background. Sit on that one for a while.

roadrunner records in beige

Many of our design decisions came about through the experience of redesigning our A&R web site, SignMeTo, with the team at RecCenter. That site originally borrowed from older RR.com designs with a black canvas highlighted in blue and red. During SignMeTo’s redesign we junked that, simplified wherever possible, and recreated our A&R portal as a much more intuitive, usable, and visually-appealing web application. We ended up with a white content background there. SignMeTo doesn’t heavily use whitespace, but our designer Sloan definitely brought much more into it than its previous incarnation. With more attention to the presentation and spacing of text and other elements we kept delighting in how fun SignMeTo was to use and how lackluster our label site felt. RR.com had good content and traffic and a powerful CMS, but it lacked elegance, modernity, and a focus on that good content.

Thus began our march away from black, barbed wire, skulls, fire, and dragons. My colleagues and I all generally agree that while we love these and the broader elements of metal artwork old and new, they’ve almost always served up poor experiences when used as the basis of a web site. Here there seemed to be an opportunity to distinguish ourselves from our competitors online and serve our metal fan base in a better way than they were being served elsewhere. 

Roadrunner Records presents another design problem as well. Alongside our exceptional metal roster we represent a slew of great rock bands; often with an entirely different audience. As well, over the last 20 years we have extended our brand into other genres entirely. The so-called metal design aesthetic just serves to turn a lot of these fans off. In essence that second design problem was trying to serve the major constituencies of our fanbase in an elegant way. 

This is where I believe the real breakthrough to a light background came from. In my estimation it was the content we produced that made the site one thing or another; not whether the site looked “metal” enough. Unlike any other label I can think of we have striven to make our web site be a destination for editorial content for the last decade. Next to our stable of artists this editorial focus is the single-largest factor in making ours one of the most-visited label sites in the world. 

Some of our technical goals drove our design aesthetic as well. I’ll likely go into more depth on those in a future entry, but they mostly revolve around customization of content for specific users, A/B testing of content for best effect, and social logins. The short of this is that we can present content to users based on what we know about them (even a little bit) and customize an experience for them we believe they will like. Once you’ve targeted that content properly it’s taken you a great deal of the way towards engaging the audience and the visuals should not get in the way of that. 

From there it was much easier to see that we needed a visually-larger and more readable site that was able to present written text and vibrant photos. In fact, I believe it was a fantastic large image of Slipknot in a comp that made us truly realize you didn’t need a dark theme to make something appealing to our metal fans. You just needed to show metal people in all their glory with metal news about fans’ favourite bands. 

Of course from there it’s a small step to the realization that this was also the path to presenting our non-metal roster properly on a Roadrunner Records-branded site. If the content and its basic presentation were appealing and obvious, the site and its design elements could take much more of a framing role. We began to look to other editorial sites to see what they did. 

We naturally started with metal blogs. I read several sites frequently and, to be honest, most of the time I despise how they look. Even the ones with great content seem to care more about looking metal than being metal. With a couple of notable exceptions (I’m looking at you Metal Insider), we quickly abandoned this line of research for…newspaper sites. 

I’ve always been a big fan of what the Washington Post digital team have done with that paper’s properties over the years, so it was my first stop. Our head of New Media, Jon Satterley, was a fan of the way the Huffington Post presented their news, so it got thrown into the line of research. A subject for another entry is how the Huffington Post influenced our home page design.

If you haven’t looked at those sites before, you should take a look. You’ll see that they and many other news-delivery sites are presented over a white background. They use lots of photos and pay particular attention to the treatment of text and headlines. We’ve incorporated many features from these sites that will be covered in the future, but their influence as far as design is obvious. 

We also ditched a lot of the common cluttery elements they like to use, however. It’s a truism that web design trends over the last couple of years have pointed toward simplified or even minimalist designs geared toward light or white backgrounds. Recently there have been other trends forming as well, if you’re interested. These haven’t influenced our design, but that article is worth reading.  

There’s still that beige-backgrounded comp I showed you, right? Right. We still couldn’t quite get past colours-as-design rather than finding the right presentation for the goals we’d set for ourselves. In some respect we may have felt that going more minimal and cleaner was lazy. Whatever the case was, it took virtually everyone who saw that background hating it for us to try it plain white. And with a simple change to the style sheet, there we were. 

There are numerous usability reasons why we’ve gone with this white background, whitespace, and simplification. We’re all professionals with a long track record, but of course we like what we like, so there are certainly professional opinions as to why we’ve done things the way we have. For instance we’re all sick of clutter on pages, particularly share buttons and such, so have tried to avoid an overabundance of these. 

We’re also fans of minimalism and the growing trend to bring simplicity to web pages. I still believe the new site’s a work in progress in this regard as we try to find the right balance, but we’ve taken a grand step away from what we were doing and from what many record companies and artists continue to do with their web sites and digital marketing. 

The most important reason relevant to our editorial goals, though, was readability. Paragraph text (which is what you’re reading now) has been shown in numerous studies to be much more readable when it’s dark text on a light background. That’s how most books and magazines present text, and with a strong attention toward margins and padding to boot. Once we’d recommitted to wanting people to read a lot on RR.com it helped point us in the direction of a white web site. 

Combine that with the evolution of our thinking on the design and here you are! Cleanliness of presentation, readability, minimalism, and differentiation were all major factors in why you’re now reading a site with a white background. 

Enjoy!


Jeremy Rosen is the Director, Digital Platforms & Emerging Technology for Roadrunner Records. 

Source: http://www.roadrunnerrecords.com/news/why-is-this-web-site-white

Tilly and the Wall Rogue Wave Mystery Jets Final Fantasy

No comments:

Post a Comment