CNN’s New Website Design Deconstructed

Wdd Logo.
November 02, 2009

On Monday, October 26, CNN​.com introduced a new website design, making a number of major changes to their information-heavy layout.

The new design is beautiful, clean, organized and well-structured. It invites the eye to scan and find something interesting with the goal of clicking through to another page.

The previous design was somewhat cluttered and not very inviting; the content looked liked it was being forced into an unstructured space. The new layout is very different and embraces a number of modern web design and usability best practices and trends.

So, let’s look in more detail at not only the notable improvements, but some of the questionable design and usability decisions. new home page

Grid-Inspired Layout

I’m using the phrase grid-inspired” because the new design seems to be based on a grid, but the precision alignment of elements is not exactly there.

Taking a cursory look at their primary stylesheet, they appear to have loosely based their style and grid on the Blueprint CSS framework.

Their CSS reset bears many similarities to the Blueprint framework, and the word blueprint” is included at the top, so this would be a logical assessment based on my own limited knowledge of Blueprint.

After analyzing a screen capture of their home page, I’ve concluded that if they based the new layout on a grid, the specifics of that grid would be: 16 columns, 50px per column, with 12px gutters (the space between columns), totaling 980px in width.

Below is a visual representation of my grid estimate, as a Photoshop mock up: home page grid

Even though the elements on the page do not follow the kind of alignment and balance that would customarily be expected of a grid layout, there is a noticeable improvement in this layout over the previous design, shown below: old design

The new layout keeps all page elements inside the 980px-wide container — unlike the clunky-looking previous design that had a fluid-width header that spanned the entire page above a fixed-width content section.

Also, while the old design couldn’t seem to decide between rounded corners and square, the new design consistently features square corners with subtle bevel effects separating appropriate elements, as shown in the image below. beveled edges

Although the format is grid-like, it is, as mentioned, not a strict grid format, and the sections below the fold stray quite a bit in structure from those above.

Drastically Improved Header Section

One of the most apparent improvements in the new design is the header section.

The horizontal navigation bar is modern, clean, and clear. The search box, signup option and login link are in the top-right corner, where they should be.

And, although it is not customary in modern design to center the site logo, in this case it works. It creates a very dominant, vivid, brand experience that is not easily forgotten. header

Another nice feature of the navigation bar is that it indicates by means of color and graphics which links are primary, which are secondary, and which will open in micro-sites or sister sites. The latter are indicated by right-pointing triangles (“Money” and Sports” — more on this below).

Effective Use of Space

On the right-hand side of the page, below the primary ad unit, they’ve included an accordion-style content switcher, allowing the user to view previews, in a relatively small area, of content related to a number of different topics. accordion content switcher

Emphasis on Video & Story Popularity

In the previous design, video had fairly strong emphasis, featured in a box on the right side. In the new design, video is a major category in the primary navigation bar, given virtually the same visual importance as the Home” link. video link

Video stories are featured throughout the site, and are clearly indicated by the customary play button” link on photos that link to video content, as shown below: video button

Another category given the same importance as Home” and Video”, as shown in the image above, is the NewsPulse” section, which is new and still in beta.

This section displays news stories by popularity (which seems to be calculated by total page views, not comments), and allows the reader to filter the results by category or story type. NewsPulse

Strong Category Pages

The main category pages (“U.S.”, World”, Politics”, etc.), accessed from the primary navigation bar, work similarly to the home page.

In fact, if you didn’t know what page you were on, you might think you were on the home page. The U.S.” category is shown below: category page

Each of these sections conveniently displays top stories, latest news, and other items related to that category.

The black and white captions below images, also featured on the home page and on article pages, are eye-catching and easy to read, without the use of overly-fancy graphics or font styles.

Strong Article Pages

The article pages, for the most part, maintain the vivid branding of the home page. Body text is nicely displayed in 14px Arial with a very readable line-height.

Although some elements on the pages seem somewhat small, I personally like the way the font size of the article body stands out on the page, so the reader can stay focused on it. body copy

Also, on the left side of each story, there is a section called Story Highlights” that summarizes the current story in a few bulleted-list points. This shows that CNN’s designers are aware of the online tendency of users to scan” lengthy material.

Information Overload

Of all the negative aspects of the new design, probably the first problem that is immediately evident is the overload of links and information on the home page — although it is more structured and organized, as discussed earlier.

The home page is about two and a half screens long, and includes sections that duplicate items in the main navigation bar, with about a half dozen sub-links under each category. These sections appear below the fold and are shown in this image: below the fold

Since CNN is one of the most popular sites in the world (38 million unique visitors each month), these sections will receive considerable traffic in comparison to other sites, however, because they appear so far below the fold, and because there are so many links, the relative amount of traffic visiting those links through the home page would likely be quite low.

Important Sections Buried?

As pointed out above, a lot of information on the home page appears well below the fold. And, significantly, it appears that some important content is completely buried at the bottom of the home page, more than two full screens below the header.

For example, a section entitled Hot Topics” appears near the bottom, on the right side, just above some promos and ads. Hot Topics

It seems to make more sense that this section would replace the accordion content switcher, or else be incorporated into the accordion.

The ads and promos that appear below the Hot Topics” also appear to be more important than their location reveals. Again, although such a high traffic website would receive many clicks on these areas, the click-through rate in comparison to the sections and ads above the fold would likely be drastically different.

Of course, CNN’s producers know what content is most important, and they understand their users’ habits better than anyone else — but these layout and usability challenges are helpful to analyze should other developers face similar decisions.

Usability Mysteries

There are a few elements on the new site that may not be designed for optimal usability.

One example is the right-pointing triangle that appears on each of the micro-site links. At first glance, I wasn’t sure what those triangles were for. They appear to indicate some sort of a JavaScript slider section that would pop up.

Some users not paying full attention may even mistaken them for downward-pointing arrows that produce drop-down menus. micro-site links

Is there a better way to indicate a same-window micro-site link? I’m really not sure. Maybe something similar to the well-known Wikipedia icon would have sufficed — but then that would present the problem of users assuming that the links opened in a new window, which in this case is not true.

The accordion content switcher, discussed earlier, also has a few usability problems. First, when JavaScript is disabled, the accordion is rendered useless and doesn’t display any content.

It should expand by default to display all content, or else display one of the items. Also, the hyperlinked headers for the accordion sections should still link to their respective sections, but they don’t.

Another problem with the accordion content is that, since the text it contains is so small, it is not always clear what is clickable inside the accordion. This makes the links less distinct from the rest of the accordion content.

In the image below, the red arrow I’ve drawn is pointing to two bulleted list items. The text in those list items is hyperlinked, but this is not obvious at first glance. accordion links

Some Sections Still Reflect Old Design

As will be the case with any redesign of a site the size of CNN’s, some sections will still reflect the old design until all pages are fully integrated.

This is usually the case with older content that won’t be visited as often, but in the case of CNN, some important sections still have the old skin.

Two examples are the about and contact pages.

Small Typography

One particular design issue that does not conform to modern web design trends is the use of small text and small typographic elements.

The small size of the font in the accordion content was discussed earlier. There’s also the share” toolbar that appears on article and video pages, the Latest News” section on the home page, the Sign up” and Log in” links in the header, and the text links below the fold on the home page, to mention a few. share bar

Would the share” toolbar, shown above, be more effective with bigger typography? What about the recommended” section, shown below, or other sections with smaller type? recommended


The new CNN​.com site has added a number of features not discussed here that relate more to their news services and customized content. The first link below contains a video presented by CNN that discusses some of the new features.

I definitely think the new site presents a much more beautiful and interesting user experience than the old, and aside from the weaknesses in the accordion content switcher, the drawbacks to the new design are not really that significant.

It looks like a lot of time and planning went into the design of the new CNN​.com, and I think web designers and those interested in improving usability on their own sites would do well to consider and try to learn from some of the changes presented on CNN’s new website.

Further Reading

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

What do you like or dislike about CNN’s new site design? Share your comments below.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…