Social media junkies on the turn of the year 2004 surely remember Digg. It was the powerhouse of social news, all the techies would flock to Digg on a daily basis. And it’s been through quite a few changes recently with the v4 redesign. However I fondly remember Digg’s classic appeal running under v3 as the most accepted web interface.
Thus I’ve taken the liberty to re-code the entire front page template into HTML5/CSS3! And in this short tutorial I’ll be introducing you to some of my techniques. Additionally I’ve offered the source code completely free to download for your own usage. Much of the design I’ve had to piece together through the Wayback Machine Internet archives.
Live Demo – Download Source Code
Examining HTML Structure
We should start off the tutorial by glossing over my core HTML page. Inside the source file we’re only working with a couple images and 2 files – index.html and global.css. I’ve included some light jQuery code towards the bottom of our index page as well. We use this to display the dropdown effect in the header menu area.
[html wraplines=”false”]<body>
<div id="w">
<!– @begin header –>
<header>
<h1><a href="#">digg</a></h1>
<a href="#" class="head-linking">Join Digg</a>
<a href="#" class="head-linking side-brdr">About</a>
<a href="#" class="head-linking side-brdr">Login</a>
[/html]
This is the first block entering our root body area. I’ve used the HTML5 header element to properly encase our top bar and navigation. Additionally the Digg logo is inside an h1 tag for clarity. The inner text is removed in the CSS with a negative text-indent property.
Another interesting portion of the home page is our top navigation. These include drop-down submenus where users can browse through the many different categories. I passed over the nav element here to instead use it on the bottom row.
[html wraplines=”false”] <div id="topnav">
<ul id="topmainnav">
<li>
<a href="#">Technology <em id="drop101"> more</em></a>
<ul class="catdrop" id="catdrop101" style="display:none;">
<li><a href="#">Apple</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Industry News</a></li>
<li><a href="#">Linux/Unix</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Mods</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Software</a></li>
</ul>
</li>
[/html]
Inside each of the root list item elements we nest another unordered list. The class .catdrop distinguishes between the dropdown category lists and apply styles accordingly. The additional em tag with an ID of “drop10X” actually displays the small arrow button off to the right. Whenever the user clicks the em tag jQuery will toggle the next unordered list.
[html wraplines=”false”]<div id="topsubnav">
<nav>
<a href="#" class="current" id="popped">Popular</a>
<a href="#" id="upcoming">Upcoming</a>
</nav>
<ul class="media">
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Images</a></li>
<li class="xtra"><a href="#" class="customize">Customize</a></li>
</ul>
</div>
[/html]
Now topsubnav is the last of our header area containing the final bottom bar. Notice that we use CSS3 techniques to add in rounded corners instead of Digg’s old sliding doors with images. The only HTML5 nav element we use holds the popular/upcoming links.
Designing News Articles
Now let’s look into the code I’ve written for each news article. Since the Digg layout needs to expand as the user re-sizes the browser I’ve set the sidebar area first in code. The width is static so our left content area can fluidly move back and forth for readjustments.
I just copied over the first news article content below. We’re using the HTML5 article element with a class of .news-itm for styles. Each article is broken down into a few segments. The first is a side thumbnail which is optional on some articles. Next we have a news body which holds our header, main content, and bottom links such as share and bury.
[html wraplines=”false”]<!– @begin news story –>
<article class="news-itm" id="fp0">
<a href="#" class="thumb"><img src="img/t/bball-001.jpg" /></a>
<div class="news-body">
<h3><a href="#">The 4 Best All-Time Players From Each NBA Franchise</a></h3>
<p><em class="source">sports.espn.go.com -</em> Trying to find four people to represent an NBA franchise’s history is tough. Probably harder than finding four decent presidents that represent what a country stands for… <a href="#" class="more">More</a> <em class="topic">(<a href="#">Basketball</a>)</em></p>
<div class="details">
<a href="#" class="story-comment">6 Comments</a>
<a href="#" class="story-share">Share</a>
<a href="#" class="story-bury">Bury</a>
<span class="user-details">
<a href="#"><img src="img/usr/diggleague.png" alt="diggleague" class="user-ava" />diggleague</a> made popular <em class="d">3 min ago</em>
</span>
</div>
</div>
<ul class="digg-badge">
<li class="counter"><a href="#"><strong>59</strong> diggs</a></li>
<li class="voter"><a href="#">digg it</a></li>
</ul>
</article>
<!– @end story –>
[/html]
Then next to all this we add the digg badge floating left. This is all stored in a single unordered list with the first list item comprising the top yellow portion of the badge. Below it the second list item holds an anchor link with the classic text “digg it”!
As I’ve moved down the page each new article has an updated ID number, along with newer submission times and amount of diggs. If you use this template on your own website most likely you can generate all this content dynamically from the database.
Digg’s Classic Footer
One last area to check out is the footer. Digg v3 had a really cool implementation which I was always in love with. Of course I’ve redefined the area with an HTML5 footer tag to start. Inside is our content div which houses a slew of definition lists. I’ve copied over just one for the sake of this tutorial.
[html wraplines=”false”]<footer>
<div id="footer-contents" class="clearfix">
<dl class="col">
<dt>Site Links</dt>
<dd><a href="#">Home</a></dd>
<dd><a href="#">Search Digg</a></dd>
<dd><a href="#">RSS Feeds</a></dd>
<dd><a href="#">Popular Archive</a></dd>
<dd><a href="#">Terms of Use</a>, <a href="#">Privacy</a></dd>
<dd><a href="#">Report a Website Bug</a></dd>
</dl>
[/html]
Each list is given a class of “col” to stand for column. In my demo I included 5 total columns with the last one appended to the respective class. Notice how this works very similar to an unordered list except we can break up links into headers and content.
The definition terms(dt) are used as global headers within each list column. Some columns actually contain 2 different dt elements, which is what gives this style of footer design such flexibility. The data definitions(dd) act as list items for each of the links, or perhaps some paragraph text. But enough about the static HTML – let’s finish off by checking out some really cool CSS3 effects!
Finalizing CSS Styles
Perhaps Digg v3 was best known for breaking out of the web 2.0 box templates. They did things other websites such as Delicious or MySpace wouldn’t. But what makes it easier to build this time around is how detailed CSS3 has become.
[css wraplines=”false”]/** @group heading **/
#w header { background: #1B5790; color: #fff; float: left; width: 100%; margin-top: -1px; margin-bottom: 20px; position: relative; z-index: 99999; height: 110px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
#w header h1 { font-size: 100%; margin: 0; float: left; }
#w header h1 a { display: block; height: 45px; width: 79px; text-indent: -2000em; z-index: 1000; background: url(‘../img/menu-items.gif’) -116px -733px no-repeat;}
[/css]
Above is the code for our main content wrapper and top heading area. Notice we’re using border-radius and its counterparts for Mozilla and Webkit to create the rounded effects. Digg often used background images in these scenarios – which still would be a fallback option for non-CSS3 compliant browsers. Additionally the h1 logo uses a background image instead of static text.
Also another interesting section is the pagination area. If you noticed on the template page we have a fake set of pagination links underneath the main stories. This was very popular on Digg’s original site and has since ported into other CMS communities. The code uses classes for previous and next links, and also removes styles from items without an anchor.
[css wraplines=”false”]#paginator { padding: 0.5em; margin: 1em 0px; clear: left; font-size: 1.1em; }
#paginator li.prev { border: 1px solid #ddd; color: #999; padding: 0.3em 0.5em; margin-right: 3px; }
#paginator li.next { font-weight: bold; }
#paginator li.current { border: 1px solid #2e6ab1; font-weight: bold; background: #2e6ab1; color: #fff; padding: 0.3em 0.5em; margin-right: 3px; }
#paginator li.sep { margin-right: 3px; }
#paginator li { display: block; float: left; }
#paginator li a { display: block; float: left; padding: 0.3em 0.5em; margin-right: 3px; border: 1px solid #9aafe5;
text-decoration: none; }
#paginator li a:hover { border-color: #176cb2; }
[/css]
This is also very similar to the Digg voting badge you see on each story. The positioning of some elements are set to absolute within a relative container. This just makes the template fall cleaner and much more adaptable for users who resize the window. It seems like such a small detail, but the crowning achievement of Digg v3 was that it just worked properly. I’ve tried to clone that ideology within this template.
[css wraplines=”false”].digg-badge { position: absolute; top: 0.8em; left: 0; text-align: center; font-size: 85%; margin: 0; padding: 0; list-style: none; background: url(‘../img/badge-bg.gif’) no-repeat; }
.digg-badge .counter { }
.digg-badge .counter a { display: block; padding: 10px 0 4px 0; text-decoration: none; width: 50px; min-height: 40px; color: #93883f; text-align: center; }
.digg-badge .counter a:hover, .digg-badge .counter a:hover strong { color: #998d43; }
.digg-badge .counter a strong { font-size: 2.2em; font-weight: normal; letter-spacing: -1px; line-height: 1; display: block; color: #736926; }
.digg-badge .voter { margin-top: 1px; padding: 0px 0px 5px; font-size: 1.3em; }
.digg-badge .voter a { font-weight: bold; display: block; margin-bottom: -5px; padding: 4px 1px 5px; width: 47px; text-decoration: none; text-align: center; border: 1px solid #ddeaf7; border-top-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
.digg-badge .voter a:hover { border-color: #a9caed; }
[/css]
Live Demo – Download Source Code
Conclusion
We touched upon some great talking points for this Digg re-design. Unfortunately the Internet is an ever-changing organism and websites will move on. But thanks to a wonderful community of designers we can relive the nostalgia of our past effortlessly. If you enjoy the template or use it for yourself we would love to check it out! Add your thoughts and ideas (along with any links) into the discussion area below.
