posted on:August 15, 2007

Digg Homepage Improved


This article is analysis of a markup structure of digg’s homepage and an attempt to improve it. First of all, I wish to point out that Digg’s markup and semantics are not badly done. I just wanted to take a well known site as an example and make improvements on certain elements to demonstrate even better ways of applying standards.

For the purpose of this article I have removed all javascript actions and advertising elements from the digg’s homepage.

Analysis

The simplest (and best) way to evaluate site’s markup structure is removing all styles and seeing the site “naked”. If what you see makes sense, then it is structured well. There needs to be a logical “flow” of the content. The sections should be ordered by their significance, proper use of heading tags determines the hierarchy of sections and choice of html elements applied should fit the type of content that we’re presenting.
If you take a look at the digg’s homepage without styles you will notice that most of it is done well but you will also notice few things that could be improved.

Sections

Many sites consists of header, body with few columns and a footer. We can call that content sections. The most important section should be as near to the top of the page as possible. Since the header with site navigation usually comes at the very top all we can talk about is organizing the structure of the body area. On most sites “About” and similar texts are considered important. They are placed at the beginning of the page because they tell visitors (and Google) what the site is all about. But in digg’s case my opinion is that news are far more important than intro text. So I would definitely put main column before the side column putting the fresh digg news in focus.

Logical Flow

As mentioned earlier, logical flow is a crucial element of well organized markup structure. Largest error I can see on this site is the relation between main title “All News” and actual all news items. Between those two you can find entire side column and several navigation elements, making it clear that this was a presentation related compromise.

Choice of html elements

Most section elements of the digg’s homepage are presented with usual and standard html tags for the type of content. The one place where I would definitely take a different road then digg creators are the news lists. Using unordered list for both main and side news list would decrease a number of divs used and it would define content for what it is: a list.

Classes

Very often we can find a situation where developers use div with class=”side” and a child div with class=”side-content”. Using descendant selectors we can have cleaner markup and avoid inventing class names.

So instead of


<div class="sidebar">

<div class="side-container"></div>

</div>

we can have

<div class="sidebar">
<div class="container"></div>

</div>

and select it in css with


.sidebar .container

We can use class .container in the main div


.main .container

Examples

Other than elements mentioned in this post, there is a number of small stuff that I changed on my example but I must point out that I haven’t made a complete recode. Every developer has his/her own style in coding and I am sure we would all find a thing or two to change to match our preferences.

Changelog

At the end, for those of you who wish to analyze, here’s a list of changes applied to original code

  • .main and .sidebar – moved sidebar after main in the markup structure. Both containers have float left with variable sizes. I used paging navigation as an element that clears the floats.
  • main title – placed title “All News” right before the news list and used position:absolute to get it above the sub navigation.
  • #headerPrimary – used line-height property instead of paddings to define height of the menu. Moved link “sumbit new story” outside of the list.
  • .side-header – created a div with class name .side and put both login links and search form in it.
  • .sub-menu – instead of having it all in one line I have used unordered list. Removed class names and targeted elements with descendant selectors.
  • #login-form – used fieldset instead of div. This demands further styling though…
  • #announce-invite – instead of 2 nested divs I have used a paragraph with nested span that I made a block level element with display:block
  • #probdrop – instead of having one item list I put this into paragraph.
  • news lists – created unordered lists with class name .news in both main and side column.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (7 Comments)

  1. VidiMonkey
    August 28, 2007

    Also in making it more semantic, your changes make the page faster to load.
  2. Digg User
    August 28, 2007

    Great suggestions! I guess if Digg is hurting on bandwidth, this could help! DiggUser http://www.chancechat.com
  3. pedantic1
    August 28, 2007

    Would be good to clean up your own site and make it readable by the widescreen-challenged. Text hits left bar, and content is scrolled on right, in my viewport.
  4. Skimboard
    April 12, 2008

    There are som many ways to do things in, but one is the correct. And nobody knows about the correct structure. =)
  5. Manoj Gulati
    April 16, 2008

    Hi Alen it's really a great job dear... i have read all the examples and they are very usefull.... good job buddy.. keep it up...
  6. rounak
    May 16, 2008

    hey hope you are fine there this is an very useful article :-) thanks for this cheers
  7. Alex from Hexcity
    June 14, 2008

    Thank you very much, this solution really works!

Sorry, the comment form is closed at this time.