Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Case-Study: Deconstructing Popular Websites

In our past articles, we’ve experimented with better ways to engage users on web pages with CSS31. We love getting into the nuts and bolts of web design by showing off some nifty coding tricks. In this article we’ll take a step back to provide some reasoning for designers to embark on that next redesign.

Great web design happens with sound user needs, solid business goals and focused metrics. Learning how to deconstruct a website is an important step in building a plan that aligns the company vision with the needs of users. A good review will put the focus on the profitability of the business.

We deconstructed a few popular web pages below to stimulate the discussion around specific interaction issues many companies face. We were not part of any of the design decisions and did not have access to the business objectives; our recommendations are based on experience and repeated patterns we observe in web design. And with that, here are five content heavy homepages deconstructed.

Mashable Link

Mashable2 is a huge social media news website. Mashable does a good job fronting up articles — they know their audience. It’s refreshing to see a single focus on the top of the page. They also do a good job of presenting headlines and pumping out regular content to their news-thirsty readers. Advertising, however, seems at odds with their content strategy in many places on the page (this is a common trend in content sites). It may be useful to consider changing the placement of advertisements to encourage more click-through.

Full interactive view4 | Summary view5

  1. Regular readers might understand this statement, but based on the content on the homepage, it’s really hard to understand how these articles tie to social media.
  2. Holy navigation! People read body copy first, so this much navigation on the top probably doesn’t create more clicks into the site.
  3. This is great, but it gets lost and it’s not clear that you can read more by clicking on the ‘+’ symbol.
  4. Good use of the bandwagon technique to get people following Mashable.
  5. Right now these might be good for encouraging participation with the content, but it should be watched closely because of burnout. The homepage is heavily devoted to using these social media tools (which it should eat it’s own dogfood) &mdash as long as the site stays focused on good content, the use of them should only help grow readership.
  6. Butting the headline up against the image actually creates more interest in the summary. It’s a good technique to create a quickly “scannable” headline.
  7. With all the good things the layout does to get you invested in the content, the buttons create a heavy distraction, though the numbers on the buttons are extremely useful to users. The Google Buzz icon shouts for attention.
  8. A Med Rec like this performs better near the top when it’s tied to content. In the stream of information, this type of add will be ignored.
  9. Interesting approach to get people to view the sky scrapper ad. Tying these headlines to the ad probably increases the click through on the ad. $
  10. Square ads this low on the page probably don’t perform well- integrating them between content articles will increase activity. $$$
  11. We called this out on TechCrunch — taking sponsored events like this and putting them into ad space defeats the purpose of a powerful publishing platform.
  12. Where are the benefits? Please sell me on why I need this iPhone app. If it is a money maker, or provides more compelling ways to connect to users, then it makes sense to promote it. $$$
  13. According to usability studies6, clouds like this don’t help users very much.
  14. We assume this is more for SEO than readers- it’s a daunting list of topics to get through at the bottom of a page. Users will click on a high percentage of links if they are focused at the bottom of a page. This list, however, is too long to reap this benefit.
  15. These probably provide a revenue stream or help paying for the services. Not very useful for users.
  16. Interesting placement: this probably does fine in the middle of the page. Is it sponsored? Might be good to call this out.

MSN Link

MSN7‘s current design is a radical departure from their old homepage and a welcome change in a crowded market of news aggregators. MSN has struggled to separate itself from Yahoo and Google – this makeover helps differentiate the service.

Microsoft has struggled to drive profits with their web properties because of their lack of laser-like focus on users. The airy, light feel of the page makes it very approachable and inviting. Users will rejoice. It may be useful to create stronger hierarchies below the fold to encourage more return clicks — the way it is designed now doesn’t make the links look very valuable.

Full interactive view9 | Summary view10

  1. It’s interesting how companies alert people to a new site. Putting a beta or preview label allows a team to deal with failure upfront. But why?
  2. The navigation is simple and easy to drill down to a topic (large clicking area), but the drop down menus get in the way. They’re a bit slow to respond to the rollover.
  3. Great use of a headline. Big and bold. A huge departure from the old MSN homepage.
  4. Now, this is a bold move by one of the most traffic pages on the Web. The white space alone seems like a huge risk for such an advertising dependent page.
  5. This is a new trend by Yahoo as well: cycle more news stories onto a single page. The problem is that these are too small to accurately control.
  6. Incredible discipline to not jam the ad higher on the page. If you compare this design with the old homepage, they’re still able to get the ad higher on the page.
  7. Bummer, unlike the top nav, the clickable area on this subnav is relegated to the words.
  8. Interesting treatment on the search bar. This is a huge departure from the previous Bing search box. Associating the search clicking action with Bing is good, but it’s going to be extremely difficult to get people to say, “just bing it.” All other search filters have been removed: it seems like a smart move.
  9. Very odd placement for a security update! This has to be a business requirement that was thrown into the page.
  10. Amazing amounts of effort and money have been thrown into being with the cool kids, Facebook and Twitter. Microsoft put $250,000,000 into Facebook, so it’s surprising that Twitter gets free advertising.
  11. We are surprised again by the constraints of this redesign. Local, movies, maps and jobs are probably the four most used links (Yahoo on the other hand forces you to choose your links). This was a sound choice by MSN.
  12. Huge effort around local content. Full headlines are important (Yahoo truncates the headlines of local news).
  13. This is a nice addition; local content is going to start growing.
  14. Useful settings, but it’s unclear why this was included as a main nav item. The functionality is different.
  15. Instead of just showing popular searches, contextual information is provided next to the term. Very cool.
  16. Odd placement of “advertisement,” the top ad has this below the ad.
  17. Very sparse. A small call to action might increase use of the search form.
  18. Interesting constraint on this footer nav for a huge business that has hundreds of business units. It will be interesting to see this one playing out.
  19. It’s incredible to see a big white patch here. It gets filled with your information from the social site, but it’s an activity that most people will not do. Anyone in advertising yelling?
  20. Big departure: links are not blue and not distinguished unless you rollover the text.

Smashing Magazine Link

True to its roots, Smashing Magazine11 has a strong focus on content. Over the years it’s added depth to the site through new content and features. With most growing websites, it’s balanced new opportunities with its bread and butter, web design articles.

The number of new visitors that come to the site is staggering (based on referral traffic we seen). This makes it extremely difficult to balance the needs of the new readers with their loyal followers. Staying focused on good content makes this task easier. From a business perspective, it is recommendable to better align revenue streams (ads, jobs, books, etc) with the content. The risk of alienating readers is small; most users will tolerate offers if Smashing Magazine reduces the overall clutter and redundancy on the site.

Full interactive view13 | Summary view14

  1. Good use of different images on each page load. Returning users will find this subtle technique draw them into the graphic. The competition with the top horizontal ad makes this a battle of attention: where do you want me to click?
  2. Integrating content from a network is a great way to encourage cross traffic and it should be balanced with the overall goals of the site. Finding a middle ground between a tab and fully featured posts would help this effort.
  3. The white space around the logo gives it some nice breathing room and focus. To give return users a little more value, tighten up the spacing and bring a little more content above the fold.
  4. Generous size ads for the advertisers, but the wall of ads probably lowers the overall click-through. $$$
  5. The Twitter and RSS numbers provide strong validation of the site. The graphics are nice, but the visual style is not used anywhere else on the page.
  6. This is a great idea, but the value is unclear: why do I want to sign up for the newsletter?
  7. Great use of big images to sell the story. However, a wide gap is created when the ad is placed at the top.
  8. Excellent use of quick links under the header. Too many sites try to hide these in drop downs.
  9. Yes! Simple, big headlines scream: Read our content.
  10. There are some great articles that get lost in this list. This duplicates the tab on the top of the page. It’s a balance between creating traffic and loosing traffic.
  11. This is an odd place to introduce general site content.
  12. This additional list of tweets doesn’t help attract new followers. The text is out of context with replies and the visual style seems out of place.
  13. This is near the headline, so it’s a great benefit to the advertiser… but it also pushes the width of the content much wider.
  14. This is a revenue stream that is hidden down in the sidebar. Integration of jobs into the site will make traffic to this section higher. $$$
  15. Focusing on the headlines and lead-in is a good tactic. The usability doesn’t fall apart with a slower loading image down the page.
  16. Placing this new property on the lower half of the page reduces the exposure this new effort requires. It also suffers from ad blindness.
  17. Popular posts are great, but more context might make the value of the links go up. When sprinkled down the page the impact declines.
  18. The footer has good links. Improving the hierarchy of links will provide more clicks and revenue. People tend to look for launch points after scrolling down a page.
  19. This type of personality goes a long way in building a loyal following.
  20. The addition of pagination doesn’t provide much context for the vast majority of visitors. Focusing on a single call to action will increase the number of clicks.

TechCrunch Link

TechCrunch15 has put a heavy emphasis on providing great, up-to-date content. This is a strategy that will continue to fuel their growth. They have a number of efforts on the page that aren’t presented well, but their focus on content will continue to drive traffic to those initiatives.

Full interactive view17 | Summary view18

  1. Boxing in the ad around a piece of content helps increase click-through. The logo, however, doesn’t offer much in terms of actions and is likely to reduce the click-through.
  2. TechCrunch does a great job of getting feed sign-ups, but these actions get lost in the shuffle. It is very likely that people who subscribe to a feed are more likely to engage in the site. $$$
  3. Good choice: people want content, not navigation. However, the calls to action for these destinations should be stronger within the page.
  4. The downside of a “modular,” boxed in design is that intersecting lines fight for the user’s eye.
  5. The downside of this advertising model is repeated ads- it grabs the attention of a user, but this effort will provide limited value for the advertiser.
  6. In a blog structure like this, content space is valuable: but why treat the event as an ad? Content that supports the event would drive more invested clicks.
  7. Is this an ad? Editorial? Clicking on this graphic takes you to a blog entry, but it appears to be advertising. It’s very misleading.
  8. Good information. It costs money, but why treat this as an ad?
  9. Interesting use of buttons to show popularity of a post. For design consistency it would be nice to right align with the dotted line.
  10. Great use of images and headlines to draw people into the site. This feature is a huge win over most editorial sites. An A/B test might reveal having one big rotating editorial image and headline would actually encourage more clicks down the page and increase advertising click-through rates.
  11. This is great. Showing activity encourages more activity.
  12. Boxing in the ad increases the click-through. Removing the dotted line to the right might increase it even more.
  13. Bold headers are a good choice. Users appreciate the simplicity of a clear call to action. They can choose to read the article or not.
  14. This is where a user would expect to see search, though it feels a tad crammed and the rounded form elements don’t seem to gel with the heavy grid system.
  15. Logos seem odd and out of place. For a site that considers placement of content, these seem to be thrown onto the page.
  16. Eventually the value of these placements will go down as users continue to return for content. Reducing the number of ads and increasing payments might encourage more click-through.
  17. These two ad placements probably don’t get a high click-through rate.
  18. Humor keeps things real. Even if it is for stats.
  19. Content, content, and content. TechCrunch gives users what they want. A long scrolling page of content keeps people coming back.
  20. Considering a better footer might increase traffic and engagement. $$$

CNN Link

CNN19 made a bold move by restructuring the entire website and putting a huge emphasis on video. It’s a very stark contrast from their old website, and while we like the dynamic elements, the three column approach makes it difficult to understand the hierarchy of the information. It could be helpful to reduce the heavy red banner, simplify the columns and use more of the design choices made on the article pages.

Full interactive view21 | Summary view22

  1. This red header competes with the content. It’s a branding effort that fights with the use of the site. Over time people will be influenced more by the quality of the content.
  2. This is a unique branding decision to center align the logo. It certainly creates awareness of the logo, but over time it will get in the way of what users want: content. 84 pixels is a lot of vertical space to highlight a logo.
  3. This is a nice feature. It’s great to know how current the content is. As a large news organization is something that users will appreciate. It’s also a competitive advantage over smaller news outlets.
  4. It’s an interesting technique, but the headline gets lost as white text on black. I’m also conflicted-should I start reading on the left or center image.
  5. Based on our experience, placement of the ad here probably reduces the click-through, especially considering that people are trying to figure out if they need to read the center feature block or left feature block.
  6. This blocky navigation competes with the content. It seems a bit out of place.
  7. This video call to action is nifty, but it creates noise by centering it over the image.
  8. Does the general population understand what beta means? If it’s not ready for everyone, invite people to a private release of the feature.
  9. Clicking on this sign-up link pops up a sign-up form, but it’s unclear why I would want to sign-up. The benefits are not highlighted.
  10. Don’t Miss? If CNN wants clicks it should be a directive, like ‘click on these feature stories’. This will increase the percentage of click-through.
  11. This is surprisingly small text for a feature story. Most older people will have difficulty reading this summary text.
  12. Creating gutters like this only adds more noise. Convergence of lines like this direct the eye in the wrong direction.
  13. Scrolls like this are less neat. Users don’t like these features.
  14. This must have been an organizational fight to put this at the bottom of the page.
  15. Oh, just what I needed at the bottom of my national news page, weather?
  16. Wholly content blocks batman! This seems like an odd choice to put this content in the middle of the page.
  17. Why put this in the middle of the page? Shouldn’t this just be balanced near the top of the page with stories that people want to read? So the ‘confused seal on the side of the road’ is not a hot topic?

Conclusion Link

A grounded, business-focused approach to redesigning a web page will go a long way helping companies understand the value of design. Deconstructing a web page is a great tool to open up the conversation and start a productive dialog. Balancing the needs of users with the business goals is critical to the success of a company.

So, what should you include? Historical examples bring context to the existing web page and provide insights that influence a redesign. Referencing other pages also makes it easier to understand a broader perspective. And let’s not forget, revenue opportunities!

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22

↑ Back to top Tweet itShare on Facebook

ZURB is a close-knit team of interaction designers and strategists that help companies design better products & services through consulting, products, education, books, training and events. Since 1998 ZURB has helped over 75+ clients including: Facebook, eBay, NYSE, Yahoo, Zazzle, Playlist, Britney Spears, among others.

  1. 1

    cool! It is helpful article. I would like to read similar analysis for ecommerce website.

  2. 2

    I agree, this breakdown and analysis of e-commerce sites would be VERY helpful. Whether it’s re-designs or just the big players, some of this doesn’t apply to e-commerce sites since the goals are a little different.

    oh, and yes I understand this wasn’t targeted for e-com, just saying I would love to see one that is as well.

  3. 3

    Fantastic article, more like this please!

    Nice interactive display too.

  4. 4

    maher jilani

    May 12, 2010 9:14 am

    Where can I buy a blog like these!!!??? I REALLY want one! most of what you buy from the net either crush the second day or filled with bugs and not that good!! any one!? HELP.

    • 5

      lewis nyman

      May 12, 2010 11:43 am

      I think that the mashable site andhing redesign were both done by the same company, although the name escapes me

  5. 6

    Very interesting read. Thank you.

  6. 7

    I love this one, it helps me !!! Thanks

  7. 8

    Why so many comments about encouraging clickthroughs? If any of these sites are using PPC ads, they’re doing something majorly wrong. Any site with as many daily pageviews as the ones mentioned should be using CPM-based ads. Banners, particularly those on larger sites, are primarily about brand-awareness, not driving cheap traffic through clicks.

  8. 9

    very helpful – also really liked the “Full interactive view” – was thinking to myself “wouldn’t it be cool if…” and then saw it. great job!

  9. 10

    Great article!

  10. 11

    frederick Luna

    May 12, 2010 10:37 am

    AMAZING im sharing it to ALL my teammates!

  11. 12

    This is very helpful

  12. 13

    Finally some usability! :P – From my POV usability and accessibility are the two main concerns when “developing” a website (I’m a developer, not exactly a designer =P). Of course we sometimes get the “this should be beaultiful or usable?” dilemma. In those cases, this article comes in really handy. And it’s good to keep these comments and analysis in head while designing/developing. Thanks for the great article, and congrats for the good and hard work =)

  13. 14

    Thanks so much for this!

  14. 15

    I’m willing to pay to analyze my website like this!!!

  15. 16

    Most points made in each deconstruction were how to increase your ad revenue and clickthroughs. Um, thanks?

  16. 17

    Carloalberto Fornea

    May 12, 2010 12:37 pm

    Hi guys,
    absolutely great article!

    It has been really helpful… lot of interesting hints… and real accurate analysis, hope to read more soon.

    Just a little question:

    why don’t you make the analysis more “rational”?
    I mean it would be even more easy to navigate trough the points of the inteactive view (absolutely great stuff!) if they follow the scan of the page…

    1. header
    2. navigation
    3. search bar
    … and so on!

    Just a little suggestion ;)

    Thank you so much


  17. 18

    you praised smashingmagazin most :p not fair!!

  18. 19

    FINALLY!!! If I had one criticism of SM it was that it always focused too much on smaller, more design industry sites rather than true commercial giants of the online world. Keep it up.

  19. 20

    This is awesome reading! Great article.

  20. 21

    This is one of the most useful articles I have read on Smashing Magazine to date. This level of scrutiny is what will drive the web design industry to the realization that user interface and user experience is the ultimate goal of any web design.

    Bravo, Smashing Mag, Bravo!

  21. 22

    Great tutorials up there as well about sites interaction. I’d love to see and read more about this topic from any other blog design magazine out there in the future. Fantastic article, more like this please!

  22. 23

    Just wanted to chime in and say that I really enjoyed this article! Great use/plug of notable.

    I’d love to see more critique style posts in the future.

  23. 24

    Extraordinary article. I’d like to see more of these.

  24. 25

    At CNN review, N°13 (Editor’s choice horizontal scroll button) says “Users don’t like these features”. What feature? The horizontal scrolling feature? Or this kind of jquery horizontal slideshow? What is the base for this opinion? I would like to know a little more about it, for my future webistes. Best regards.

  25. 26

    Hastimal Shah

    May 12, 2010 8:01 pm

    Great Analysis article.
    I love to see more articles about Analysis the websites.

  26. 27

    Rajesh Trilokhria

    May 12, 2010 8:56 pm

    Very nice article and even above that very nice way to get a real time design analysis from the actual users of the website.

    I really like the concept and would definitely like to follow for my all designs :)

    thanks for such a useful information.

    Rajesh Trilokhria

  27. 28

    Excellent Information and wide range of analytical points. Very Very Useful. Thanks for the Piost.

  28. 29

    I can’t agree with your opinion about CNN, the Red Banner feels fine.
    It tells me that “Hey, I won’t fill the space up with text. Relax, I already give you the most important.”
    So, I don’t think it competes with the content area.

  29. 31

    Sanika Akerkar

    May 12, 2010 11:07 pm

    Good one!!!
    Thanks so much for this.

  30. 32

    Good one!!!

    Thanks so much for this.

  31. 33

    I liked this article a lot, particularly the screenshots with annotations. However it would be nice to see this applied to other site types, not just rolling news / blog-style sites. What about eCommerce? Banking? Bricks ‘n’ mortar? This would be a really fascinating series.

  32. 34

    wow, this is a wonderful article. i would love to see such analysis for some top Indian websites.

  33. 35

    John Faulds

    May 13, 2010 3:27 am

    On the Techcrunch review you say:

    Showing activity encourages more activity.

    I don’t know that I agree with that. If I see a post that has a lot of comments, I rarely bothering reading any of them and because I haven’t read them I don’t bother commenting in case I repeat something already said.

  34. 36

    Interesting read… can I suggest doing something like this for popular eCommerce sites as a followup article?

  35. 37

    I really liked the number system you used. Good idea!

  36. 38

    Very nice.. this is a much needed article in the industry. I actually wish there were more of these. Instead of saying a site sucks, it’s nice to hear some constructive criticism that is also very educational.

  37. 39

    just what I needed on the day that I needed!, do read the mind too?

    thank you very much

  38. 40

    I left a couple of comments on the annotations. I’d love to see what the person who did the analisys thinks.

    I absolutely loved the article.

  39. 41

    The use of the interactive view using Noteable is a very pleasent way for these kinds of deconstructing. Great article.

    Just one little comment towards Noteable: The commentboxes always float to the right. When viewing in 1024×768, an explanationbox adds width, but I cannot scroll because the popup only shows and adds width on hover.

    Other than that, great way of bringing it.

  40. 42

    Phil Benoit

    May 14, 2010 5:35 am

    I took a lot out of this, a review of e-com would be great

  41. 43

    I guess it doesn’t matter how good/bad your design is.. what’s importart is the “content” you publish.

  42. 44

    Also MSN drop-down menus are bugged in Firefox.

  43. 45

    all looks great but mashable is so slow and hard to navigate bec pages never load and many ads oh boring not same as before

  44. 46

    Vlad @BulkIcon

    May 18, 2010 7:52 am

    Some of the above examples could receive better (especially ad placement) adviced, but for a Case Study it’s more than enough.

    I had followed SmashingMag for a long time for now.. I can say, for me at least, this is the best article untill now, May 2010. Keep up the good content coming.

  45. 47

    great article! Love the display of comments and analysis

  46. 48

    Don’t you think that the TC site is way too long? Personally.. I HATE long pages. I want it fast and informative. TC is too much blabla..

  47. 49

    These articles should be be a constant practice of the SM. Excellent!

  48. 50

    The CNN redesign stripped the site of a lot of useful hierarchy information, the constantly shifting columns and emphasis doesn’t help. The old design, while far from perfect, effectively expressed relative importance and content division. The current site seems almost like an experiment.

    I do like the big red header though, the boldness of it is one of the few things that helps me feel confident about the site. Then of course I get to the content, which just doesn’t carry that through at all.

  49. 51

    Very interesting read. Thank you.

  50. 52

    Anne @ MyJobCentre

    September 9, 2011 5:32 am

    At the end everything depends on design…unfortunately our like or refuse is by the personal matter! That is why would be very interesting to have analysis on some new E-commerce platforms that are enhanced now! Something like new Mojento or completely new Jigoshop platform.
    I would definitely follow up to that kind of analysis!



↑ Back to top