Yesterday I ranted on Twitter about CNN’s redesign:
Sorry, @CNN, but the new site is horrid. Overly huge imagery is not needed; I want news, not photos. Time to find a new source. Sigh.
— Rob Griffiths (@rgriff) January 3, 2015
This led to an exchange with a CNN staffer, and a couple people saying “me too!” But it felt it a bit unfair to criticize without specific data. So this morning, I gathered the data, and can now quantify my distaste for the new design.
I compared the current CNN homepage to the latest available on the Internet Archive, calculating how the space was used for each version of the site. The results were eye opening in many ways.
tl;dr summary: The new CNN design displays half as many clickable stories in the same space, with an image that takes 20% of the available screen, and sucks down over 20% of my CPU just to display its home page. Read on for the gory details.
Note: This follow-up entry details my post-CNN news sources and reading methods.
Thanks to Raymond for posting this address in the comments.
I opened a window that was 1,148 x 1,186 pixels in size, and loaded both the new and old CNN sites in tabs that window (with an ad blocker running, so I saw only content). I then grabbed screenshots, cropped to the visible page area, and started marking sections using color overlays in Acorn. I was most interested in what appears “above the fold,” that is, that can be seen without scrolling in either direction.
I split each version of the site into four different area definitions: Content, Images, Navigation, and Admin. (The split between the last two is somewhat arbitrary, but I used the same methodology on both versions of the site.)
Here’s how the two sites looked, mapped out into those area definitions (click either page for a much larger version).
Once the page was mapped out, I created a simple spreadsheet that calculated the area of each type of content, based on its pixel dimensions. Here’s how the two versions of the site compare:
|White space areas||38%||33%||-13%|
At first glance, this doesn’t look so bad—the content areas’ size is actually a bit larger than before, while the image areas’ growth has come from reductions in the navigation, admin, and white space areas. If that were the full story, I’d be fine—I still think it’s too much big imagery, but the content areas are actually larger than before.
Look beyond the summary, though, and things are really ugly:
|Visible clickable stories||41||19||-54%|
|Average CPU usage||3%||20%||+567%|
|Page length, pixels||3,770||10,452||+177%|
The content areas—despite being larger than before—display less than half the previous number of stories. If you compare the screenshots above, you can see the cause: huge text with large gaps between story headlines. And then there’s that image, pushing everything down the page.
About that image…it’s now massive, sucking up a full 20% of the visible space on the page. 20% of 1.36 million pixels—that’s insane!
Why do we need to see such a massive image? “But an image is worth 1,000 words!” you say? Not when said image replaces words that used to lead to many stories; now the one massive image leads to but one story.
The other eye opener was the CPU usage; cycling amongst four of those large images (and providing a scrolling news ticker?) is apparently a hard thing to do. While the old site barely moved the CPU usage meter, the new site is consistently over 20% on my 2014 Core i7 Retina iMac—and that’s while it’s just sitting there; I’m not interacting with it in any way. If I were on a laptop, this kind of CPU usage would drive me crazy. 20% of my CPU to view a news page?
Finally, as you can see, the new page is nearly three times as long as the old page. That means lots of scrolling if you want to get to the bottom of the page (where, as it turns out, you can see yet more massive imagery). Ugh.
To summarize, the new CNN site (at least, the “use without scrolling” portion of the site) contains half the data as before, with an image that takes up nearly three times as much of the page. The site now takes 20% of the CPU on a brand-new Core i7 iMac just to display and sit, and it’s incredibly long, making it tedious to scroll through.
This is not what I would call a successful redesign. Pretty? Sure. Usable? No.