News Sites Genre Analysis_CBS Seattle, Seattlepi, Huffington Post

By Ting Kang and Rachael Boyer

Web Site Genre Analysis: News Media

Sites evaluated:


CBS Seattle


Huffington Post

Similarities in visual design:

  • All three websites have top navigation.
  • They all use white as the background color and cool accent colors (blue, dark green) for navigation.
  • They all use large images to navigate top news on the home page.
  • They place their “log in” access on the top right corner.
  • All three basically use a three-column layout to organize home page content.
  • They all have a search bar placed above the navigation bar.
  • All three sites have banner ads on the right column, below the navigation.

Differences in visual design:

  • Though they both use white as background color, SeattlePI uses dark grey  as underlay color.
  • Huffington Post uses thin lines to separate the columns, SeattlePI uses thick lines, and CBS Seattle doesn’t have lines between columns.
  • SeattlePI and CBS Seattle have weather and traffic information link on the top right, while Huffington Post doesn’t provide this service.
  • Huffington Post and CBS Seattle put links to their social media sites on the top of the home page, while SeattlePI place these links half way down, on the right column of the home page.
  • To display the latest local or national news, SeattlePI uses the middle column on the first half of the home page, and Huffington uses a rolling bar on the top, but CBS Seattle puts the latest news section below the local events and deals (Watch & Listen, Best) sections.
  • Huffington Post use larger and high-quality feature images and video thumbnails in the middle and right columns, but the other two sites don’t give as much real estate to images that aren’t banner ads.
  • SeattlePI has more prominently displayed banner ads, in addition to the standard ads in the right hand column. They have ads above the navigation, and below the navigation.

Effectiveness of Visual Design:

CBS Seattle – Top navigation is simple and clean, with additional “quick links” navigation down the left hand side. This makes it easy to find information by topic.
SeattlePI – Having banner ads both above and below the navigation, and even ads that expand to take over the site above the fold are off-putting and disorienting. These visual distractions make it harder for visitors to zero in on what they are coming to the site to find.
Huffington Post – The header design is reminiscent of newspaper mastheads, which is appealing, however the mass of topics, links, and options in the top navigation are overwhelming.


Sheldon is a 23-year-old college student majoring in Aircraft Engineering. He is fanatically interested in this topic. It is his passion, obsession, and only hobby. He barely goes online to find local or national news unless he needs to find information about aircraft.
The launch of the Boeing 787 Dreamliner is a huge deal to Sheldon. He’s been working on a project related to this topic for school and he needs to collect some highlight reports about it from local and national news media. Sheldon finally picks three news websites: CBS Seattle, Seattlepi and Huffington Post. He wants to find some valuable information about the first delivery of Boeing 787 Dreamliner from these sites, and it’s better to have some images go with the reports.
He assumed that the Seattle-based news sites might have a better angle on the event, because Boeing’s headquarters are based there. As an engineering major, Sheldon expects a straightforward, clearly navigable site that has a powerful and efficient search functionality. He doesn’t pay much attention to the aesthetic taste. He wants information. Here’s what he has experienced on the three websites.
CBS Seattle:
1) Sheldon easily finds the search bar. He enters “Boeing 787 delivery” in and ends up with a message that says: “Your search – Boeing 787 delivery – did not match any documents. ”

2) Sheldon is a little disappointed and then tries more general keywords “Boeing 787”. Again, he gets the same message.

3) Sheldon tries one last time and puts “787” in the search bar. He finally gets a list. However, all of the results have nothing to do with 787 Dreamliner.

4) Sheldon doesn’t understand why he can’t find anything about this big event in a mainstream Seattle local news web site. He’s not willing to invest more time on this site.


1) Sheldon now goes to Like CBS Seattle, he doesn’t have any problem in finding the search bar on the home page. Then he puts in the keywords “Boeing 787 delivery” and searches.

2) Great! There are 524 results in the list. Sheldon skims over the results to make sure they are all related to the first delivery of the aircraft, and they are not. The list is too broad.

3) Sheldon wants to narrow down the search results. Then he notices more filters on the left side and above the banner, such as date, topic, people, article, blog, picture, etc.

4) Sheldon then clicks on “picture” and “last 90 days,” since he wants news images and he knows the first delivery happened just a couple months ago, in September.

5) Immediately, a list of news reports with thumbnail pictures are displayed on the page. Sheldon finds all of them are themed with the exact information he wants: First 787 Dreamliner delivered to All Nippon Airways.

6) With satisfaction, Sheldon selects five of them with different photos for his project.

Huffington Post:

1) Just to see what’s there, Sheldon hovers over the “Tech” link in the top navigation, but doesn’t see anything he wants to click on. Instead he decides to use the search bar.

2) He enters “Boeing 787” into the search bar, hits “enter,” and is happy to see a list of over 1,400 relevant article search results and even several “related topics” on the left hand side.

3) But the search results are too broad, and there isn’t a way to narrow them. He decides to search again, this time using a more specific phrase: “Boeing 787 dreamliner delivery.”

4) Success! The second article title in the new search results listing is exactly what he was looking for – an article from Sept. 26, 2011, entitled “Boeing 787 delivered to Nippon Airways…”

5) He clicks on the article link and is taken to a simple article page, which includes a 12-photo gallery of Getty Images of the Dreamliner, which is perfect for his assignment.

Do’s and Don’t’s:   

CBS Seattle
  • DO have clean, simple navigation.
  • DO have an easy to find search bar.
  • DO have a clean, easy to navigate design.
  • Don’t miss out on covering such a major local and national event.
  • Don’t let irrelevant search results frustrate visitors.
  • Don’t let search results show up in a long list with no filters.
  • Do provide a powerful and efficient search feature.
  • Do provide enough relevant results under a single search.
  • Do allow visitors to filter results to be able to find exactly what they’re looking for.
  • Don’t allow distracting banner ads to block all of your content on your homepage.
Huffington Post
  • Do provide an easy way for visitors to search your site.
  • Do provide lots of relevant search results with great content and articles.
  • Don’t miss out on providing a way for visitors to filter those search results.
  • Don’t feel obligated to have every topic you cover as part of your top navigation. General categories are perfectly appropriate.

2 responses to “News Sites Genre Analysis_CBS Seattle, Seattlepi, Huffington Post”

  1. Kathy E. Gill says :

    Realistic scenario, but give us more details about the assignment. When I conduct this search, the results are so varied that I can’t tell what would have been what Sheldon wanted.

    After the step-by-step, a paragraph summary helps us “see” the comparison. Also, it might be useful to note what is powering these searches: both HuffPo and CBS are powered by Google.

    Also, my “no results” screen at CBS doesn’t match — — this is why screen captures that supplement walk-throughs are useful.

    When you’re analyzing something like search, it’s useful to compare the experience with regular web search, since that is what we will be using to compare the experience.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: