Case Study: Bleacher Report

Not too long ago I made a blog post about how Fantasy Sports sites need to be faster.  For those of you unfamiliar with me, I run my own fantasy sports start-up called FantasySP.  It is a simple yet effective way to keep tabs on your fantasy teams.

I tend to write articles detailing things I don’t like, but it’s time for a change of pace. Its time to go in the opposite direction and breakdown one particular site called Bleacher Report that is quickly becoming a leader in the sports industry.  Bleacher Report is a sports site where its users create the articles that can range from stat driven geekiness to Hollywood type entertainment.  These guys do a lot of things right and this article is going to showcase what makes Bleacher Report (b/r) so special.  From the outside looking in, it looks like there is great balance and understanding between the content/business people and the technical aspect of things.  I emphasis this because this is a rarity in today’s world of startups.

Before I get to praising Bleacher Report, let’s take a moment to see what the critics are saying. Specifically Sports Pickle.  As you can see by their graphic, they are mocking content choices, their target audience, usage of slideshows, and their attempts at driving traffic by loosely basing stories around sports.

Is what they say valid criticism?

Of course it is. I agree with a lot of their points.  Like any website, you want to broaden the audience to reach as many people as possible to generate more pageviews, better time on site, and more revenue.  b/r is playing the game that every other website out there plays.  Look at Profootballtalk or bigleadsports, because both of those sites report about rumors and gossip because it drives traffic.  b/r is giving the people what they want and they do a good job at delivering it. Not only that, but they manage to achieve this with arguably less paid writers and editors than most other sites.

Does some of their content stink? Of course.  But overall, the best stories are the most visible and the rest are kind of just – there.

Enough with the business side of things, lets talk tech.

Design

I should preface this by saying that I am NOT a designer, though I pretend to be one.  Now that you are confident what I have to say should be taken with a grain of salt, lets move on.

The latest redesign of b/r is very clean and unique.   I’ve talked a lot in the past about how 2nd tier sports site’s in general lack polish and attention to detail in their designs. 2nd tier websites are often bloated in design and confusing messes.  Obviously ESPN is in a league of their own, but b/r is one of the best designed sports site out there. (b/r has a killer mobile design as well.)  In fact, their design reminds me a lot of c|net’s latest design.

One of the best ways to evaluate a design (at least to me) is to compare it to the competition.  As far as I know, their direct competition is yardbarker.  Take a moment to look at yardbarker and b/r from strictly a design perspective.  There is no question that you would prefer b/r: It’s more inviting, cleaner, more organized, and feels modern.  Does it surprise anyone that b/r has about twice as much traffic as yardbarker? (source: alexa.com).

Advertisements

The guys at b/r use advertisements as a revenue source.  I am sure it’s not their only source of revenue, but its probably a critical piece to their revenue goals.  These guys understand ad placement and they understand where to draw the line.

The number of ads per page range from 3 to 5.  Sizes include 300×250, 728×90, 970×66 and background takeover ads.  None of their ads are inline with their content.  None of their ads are popups or intrusive in any way.  (I could be wrong, but based on browsing for a day, this is what I can go on).

Their ad placement alone is well done and it can be found in the usual places.  A lot of sites throw advertisements in-line with the content because it has a higher CTR, but b/r has decided not to.  On some pages, they opted to include their 728×90 ad next to the logo which is pretty much an industry standard.  Their takeover ad is somewhat obtrusive but it is done very well and does not hurt the end-user’s browsing experience.  The entire background ad is clickable, which should produce some very nice CTR’s and a bulk of their ad money.

Overall, the quality of the ads and their placement is about as good as it gets.

Readability

b/r does a great job at making sure their site is very readable.  Their main body of text on an article page has a font-size of 16.  The only time their font-size reaches 11px or lower is at the very bottom of the footer. There is plenty of whitespace inside the main article and their usage of social buttons are done in good taste (as opposed to mashable and huffington post’s dreadful examples).

If you take a closer look at their fonts, you’ll notice that they are custom fonts including: droid-sans and francois-one.  Judging by their source-code it looks like they are using font squirrel for custom font implementation.  Thankfully they are NOT using cufon which uses javascript to render font changes after the page is loaded. Their font choices add a certain flair to the site that would not be obtainable with regular font choices such as Arial.

Technology

The technology behind b/r is equally as impressive as their front-end.  According to their about page, their lead developer is Sam Parnell and I am going to assume he gets a lot of credit for their current direction of the site. (If the guys at b/r would like to clarify this then be sure and comment so I can fix it.)

Caution, things are about to get geeky. The site uses Ruby on Rails for the backend paired with nginx+mod_rails to serve requests.  As far as I can tell, this is a custom built CMS built from the ground up.  It is obvious that the tech team behind b/r is a very knowledgeable bunch. This is a far cry from the average LAMP stack that we often see.

They utilize Amazon Cloudfront for their CDN and jQuery for their javascript library of choice.  To monitor server performance they are using NewRelic.  It goes without saying that these guys must spend a lot of time on improving site performance.  They also utilize the standard practices of website optimization by gziping, caching, and minifying stylesheets/javascript etc.

I also want to make mention of their use of Ajax, specifically how their article pages will load content via ajax without reloading the entire page.  I imagine the point of this is to encourage users to load more pages per visit and this tends to save on server resources as well.  To see this in action load any single article and click on one of the “recommended stories” on the top right.  If you notice, the href links point to their actual URL (Finally a site that does not use the “twitter” method by including a # in the url).  This is the BEST way to handle ajax content because the failsafe url is there for the user to load if the javascript is broke and googlebot can easily crawl these pages as well.

Areas to Improve

Even some of the best sites have ways they can improve and b/r is no different.  Their facebook implementation is a bit wonky (technical term).  I used their facebook connect and their popup was initially blocked, then when it did go through it asks for my email and then a bunch of other follow-up questions.  As a developer I understand how shitty it is to use facebook connect, but its even shitter for the end user to have to enter their email address when you already have access to that information in the API.  Furthermore, once I close my browser and go back to the site I have to click the “sign-in” button for facebook to re-authenticate.  Not cool.

Either fix the facebook implementation or drop it all-together.  Don’t get me wrong, this isn’t the worst I’ve seen (cough: huffington post).

Another questionable decision is the whitespace above their 970px advertisement (shown in the above screenshot).  That is a huge waste of space and is pretty pointless.  I’m not very religious, but I do follow the rule of “Thou shall cherish their above-the-fold space“.

Finally, the pages are a bit on the hefty side, some approaching nearly 2mb in size.  This has a lot to do with the amount of images on the page and it might be a good idea to lazy-load some of those to improve load times and lower CDN bills.

Wrap Up

Hopefully this case study has proved useful to some of you guys out there on best practices and a good example of company appearing to make the right decisions. I am sure I missed plenty of other aspects of the site, but this article has gone on long enough.  In fact, two other things I didn’t have time to go into full detail are their great implementation of the search box and mobile site.  Both are top notch, especially their mobile site.  Anyone out there who is looking to design their mobile site should use b/r’s as a template.

I am extremely pleased to see that some startups have the right people behind the wheel.

Agree? Disagree?  Let me know in the comments. I’m new at this case-study stuff.