Lots to learn from Engadget's new design
When the sixth most popular blog on the Web completely overhauls its Web site, there are lessons to learn for every publisher.
Engadget, a blog covering - you guessed it - gadgets, just released a new design that it claims to have been working on for a year.
Naturally, blogs can afford to be more cutting edge than traditional news outlets, but we have seen blogs set design trends for larger news sites for years. The gadget blog's new design features a handful of experimental features that are sure to be creeping into content sites everywhere.
Here are some features worth “borrowing”:
The most constant theme across the site's redesign is the replacing traditional text elements with visual ones using CSS.
The archive system has been simplified into a calendar where the panels are color-coded based the frequency of posting:
Engadget also spruced up the most commented stories widget in similar style. Each bar is not an image, but a CSS "div" likely fed a width variable using XML, keeping the page size low while still presenting an image-like graphic. The "On Twitter" and "On Digg" widgets are composed similarly.
The archive page also features a break-down of the day's posts displayed according to most commented:
Using stats to drive traffic to old stories:
The site borrows from magazines by including a large pullquote-style statistic that is a link to an older Engadget story, allowing for a creative and visually appealing way to drive traffic to old posts.
The stats seem to randomly rotate.
Follow the saga:
Adding to the visualizations, the site also makes placing news stories in context much easier.
Gadgets typically follow a predictable cycle: announcement, leaked images, press images, launch, un-boxing and then a hands-on review. Engadget took advantage of this predictable cycle by turning “tags” into flexible pages that allow the reader to “follow the saga” of the entire lifespan of the device or event they are covering. For example, below is the page for the popular smartphone the Motorola Droid.
The bold top story
Instead of having a flash "carousel" Engadget places its top story boldly just above the navigation. The top story has half of the picture and the headline that can either be expanded or linked to the story page.
When clicked, the story expands:
When writing about the design, editor-in-chief Joshua Topolsky told his readers, "we want to not just be a source for news, but a resource as well."
The majority of main navigation buttons are to links that encourage exploration of Engadgets vast vault of gadget pictures and news stories. The typical list archive has been replaced with a system that allows each visitor to explore archived stories in context.
For example on the site's "hubs" page, it is easy to see the major events and gadgets that are making headlines. When each one is clicked it takes the reader to a page containing the "follow the saga" graphic as well as featured posts, posts by editor and other related posts.
The site's "topic" page also allows readers to sort article by a point on the gadget release timeline:
Of course, not every publisher needs to give content the gadget treatment. But Engadget's innovative use of CSS, archive structure and content management all deserve a look for some inspiration when planning your next redesign.