Pages

Translate this blog to many language

Wednesday, April 24, 2013

RW10: How An Influential Tech Site's Design Evolved Alongside The Web


RW10: How An Influential Tech Site's Design Evolved Alongside The WebRW10: How An Influential Tech Site's Design Evolved Alongside The Web

ReadWrite celebrates its 10th anniversary on Saturday, April 20, 2013. For the occasion, we're running a series of articles  looking back—and looking forward.
Ten years ago, many of ReadWrite's first readers first viewed the site on a CRT display attached to a desktop with a wired Ethernet connection, or via a clunky laptop perched across their knees near an early Wi-Fi router. The Web, then roughly a decade old, was still largely static and flat, excepting the occasional Java applet or Flash animation.
Unsurprisingly, ReadWrite's original design was itself also sort of static and flat, just like the rest of the then-nascent blogosphere. But the same way today's technology now allows our readers to pull up our posts and videos on hi-res tablets or smartphones with 4G wireless data connections, so has ReadWrite's design also evolved in line with changing Web aesthetics and the needs of our diverse audience of developers and technophiles.
What follows is a recap of how ReadWrite's design has evolved along with the Web through the years, via screenshots courtesy of the Internet Archive's Wayback Machine. (You can also check out a more personal tour ReadWrite founder Richard MacManus authored last year for our ninth anniversary.) Click on any of the images for a larger version.
Of course, ReadWrite's not done evolving. Check back regularly to catch the latest chapter in ReadWrite's visual design.

Year One: 2003, Part 1

Richard started his blog using a borrowed template from Dave Winer's Radio Userland, an early blogging service. Here's what a page from August 2003 looked like:

Year One: 2003, Part 2 

Richard soon followed up with a template of his own design—one that opted for a, shall we say, particular shade of institutional green. That design debuted in September 2003 and looked like this:

Year Two: 2004

By the following year, ReadWrite had added a right-hand column and a header bar that was, if anything, even greener than the previous design. Richard got top billing as producer, arranger, composer and designer of the site—fittingly, as it was still a one-man show at that point: 

Year Three: 2005

This design featured the first graphic element in the site's header—a thumbnail image of a work by conceptual artist John Baldessari, from his exhibition READ/WRITE/THINK/DREAM. Which, oddly enough, was not the inspiration behind ReadWrite's name (a story Richard tells here). The artwork suggests a rather literal interpretation of the "Write" portion—it basically consists of giant pencils.

Year Four: 2006

This design added the yin-yang symbol that would grace the site's header for the next five or so years, eliminated the left-hand column and introduced the red-and-white theme that has been a ReadWrite hallmark ever since.

Year Five: 2007

A further iteration of the previous template doubled down on the red theme and gave prominent placement to the site's sponsors in the right-hand column.

Year Six: 2008

A redesigned logo eliminated the slash between "Read" and "Write," while the design shrank down the text to a narrower left-hand column to make room for a central "Popular Posts" section.
 

Years Seven & Eight: 2009-2010

Mostly cosmetic changes included the introduction of share buttons in the header and a "Featured Posts" section following the first item on the page:

Year Nine: 2011

Additional minor tweaks expanded the "top story" across what had been a middle column and revised and enlarged the "featured posts" images and headlines.

Year Ten: 2012

Following the site's acquisition by Say Media, a full redesign introduced a much more visually oriented and editorially curated front page of top posts, followed by a reverse chronological listing of recent posts.
 

Year Eleven: 2013

Stay tuned — our next redesign is on its way.


No comments:

Post a Comment

Search