Coding the Digg v4 Layout with HTML5 and CSS3
The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on the system and completely revamped the site layout. This also broke the friends system, allowing big-name publishers to game the front page. This upset many powerhouse users who were furious with the major changes.
Over time the site has slowly moved back towards its roots as a user-powered news community. And although the domain has lost some credibility, their design skills are still impeccable. So in this tutorial I want to explain how we can build a similar layout using static HTML5 and CSS3 properties. I won’t have time to cover every detail but you can download my attached source code and play around on your own.
Building the Header
I’ll tackle major areas in the layout beginning at the top and working down. For starters the heading band has a couple interesting features, namely the navigation links and search form. Here’s the first portion of the code: