The hardest thing about the re-design was integrating the tableless CSS design into Radio Userland. I had to do some jiggery-pokery with the Radio Userland templates and macros, and the CSS implementation is not yet complete. I've had to temporarily remove my blogroll and topicroll, along with some other links, due to a kink in the design. Also my permalink icons aren't working properly. So there are a few little things to iron out yet. Bear with me and please let me know, either in comments or by email, if you spot anything that needs fixing. I'll write some more notes on my CSS/XHTML transformation over the next few days.

All in all, I don't think my CSS efforts will make Zeldman's hit parade - but at least I've made my debut in the CSS charts ;-)

From what we were able to see in the short time the design was up, Twitter is mostly trying to streamline its interface with this new design - we did not spot any new features. The latest tweet a user made has been moved from the profile on the top right to directly underneath the text entry box. The 'reply' and 'favorite' shortcuts have been moved out of the interface and now only show when you hover over a message. The search box has also been moved and the empty space between the updates and the profile information on the right has been removed.

While the new design keeps the general feel of the old Twitter page, the new design is decisively more minimalist and clean. As Twitter is preparing to integrate Summize into its site, chances are that if they want to integrate Summize's real-time updates, they would also have to redesign their front-end to be able to display those updates.

Interestingly, the redesign looks exactly like the sketch Twitter used in its post about the Summize acquisition. Judging from this, the integration with Summize might already be quite far along.

Marc Hedlund from O'Reilly wrote a post entitled Web Development 2.0. Despite the YA2.0N title (Yet Another 2.0 Name, pronounced "YAWN"), the article is a useful overview of software development practices that Marc has been seeing in the current era of Web startups.

This extract is quite ironic -- and Marc agrees with me:

"Ship timestamps, not versions: Gone are the days of 1.0, 1.1, and 1.3.17b6. They have been replaced by the '20060210-1808:32 push'. For nearly all of these companies, a version number above 1.0 just isn't meaningful any more. If you are making revisions to your site and pushing them live, then doing it again a half hour later, what does a version number really mean?"

Another great post is The Agile Web Design Manifesto, by Emily Chang and Max Kiesler of Ideacodes. They have come up with some core principles for this:

- Design the system not the surface
- Design as evolutionary and user-driven
- There is no page, only pathways
- Rapid and iterative over final
- Simplicity over complexity
- Collaborative and open design 

The first and third principles - 'Design the system not the surface' and 'There is no page, only pathways' - are especially relevant to me right now. I'm currently writing a chapter about my Design for Data theory, in the O'Reilly book I'm co-writing with Josh Porter, and it's very much about going beyond the Page metaphor on the Web. More on that soon, because I have a feeling I'm going to need feedback on this chapter from my blog readers...

The reason for the content tabs is to provide topical ways to navigate through R/WW's content - and also to help focus our writing on those topics. One inspiration for the tabs was Gigaom.com, who implemented them last year in their re-design.

Let us know what you think, bearing in mind that we haven't 100% finished it yet.

It's all about the whitespace and I've tried to make that more prominent. The homepage has been modified along those lines - I now use excerpts so people can easily scan the content. That's allowed me to include more links to previous posts on the homepage. I've cut back on the content in the menu too - the blogroll and references now have their own pages.

I've reverted to traditional link colours in the body text, as a nod to the oldstyle Web. The only exception is the linkblog content on the right-hand side of the homepage, which needed to blend in more so I used underlined black text.

Regarding the vertical lines, I think I originally had those mainly to show off my table-less CSS design ;-) Well, that and there were (and still are) 3 distinct columns in my design. But now I've gotten rid of the vertical lines, I think because I wanted to free myself from the box-like constrictions they conveyed. A subtle and psychological change, and my reason for it is a bit artsy-fartsy, but hey it works for me.

There are some other minor mods and I will probably do some more tinkering, but then that's the beauty of style sheets. All it takes to change the design of a whole website is some spanner work on the CSS.

Update: I've gone to a centered layout (boooring!). This new design is All About The Whitespace, so it works better if it's centered. I think I'm done now... maybe a bit more tinkering with the header.

From a design pov:
- They've toned down the blue colour of the links.
- News sources are now highlighted more - AP will be pleased, as they're gung-ho on branding their content.
- Tabs are now used for the section menu, enabling them to go from 3 columns to 2 and so free up white space.

[nb just as I finish that last sentence, Yahoo has flicked the switch and made the new design live on http://news.yahoo.com].

The things I like the best though are the increased focus on RSS and search, and the integration with My Yahoo. From the intro page:

Not only does the new design allow users to subscribe to non-traditional news sources, but the "dive deeper into topics" buttons are a fantastic example of topic search n' subscribe applied to a major media website. Congrats to the Yahoo News team! I know that I have some Yahoo staff subscribed to my blog, so perhaps my RSS and Topic-based Search evangelism is paying off in some small way :-)

p.s. Google, please sit up and take notice - instead of spending your time rejecting fantastic news sources.

As noted in our previous review, last.fm has had many navigation issues in the past. The new design is supposedly simpler, but the navigation issues aren't completely resolved - for example now a drop-down list has been added to the top right, but I'm not sure that's going to be intuitive enough for many users. Still, the new navigation is an improvement on the old one. Although it couldn't be much worse, in all honesty.

Here's a quick visual look at the evolution of last.fm's new design:

Current (new) design - the 'Lick of paint' design

Beta design circa June 08 - the 'Facebook design'

Old design

A reminder that last.fm is an online music service, which can be enjoyed via a desktop software app or within the browser. Last.fm is built on top of a very impressive music recommendation database called AudioScrobbler. See our February '08 post about last.fm for full details on how last.fm works.

Also last.fm recently released a new version of their public API, which allows any application or device to achieve deep integration with the Last.fm platform. Perhaps this is one of the reasons behind media player VLC's new support of last.fm, announced today too. Overall, it appears that the now CBS-owned online music service is keeping pace in the fast-moving web 2.0 world. Let us know your thoughts in the comments.

It's been a year or so since our last major re-design. And this is the first RWW design where I haven't been involved in the coding myself.

First up, you will notice that we have a new logo. We've kept the yin-yang symbol, as that to me has always represented 'read/write' and the harmony of that concept - but the symbol has been modernized. The logo type is bolder and emphasizes the letters RWW. And can you spot the subtle thing that's been removed from the logo? The '/' between Read and Write is now gone. Although I have always thought that the slash was meaningful (or maybe I just thought it was cool!), in practical terms it was a slight hindrance - in terms of spelling our name and perhaps even making it difficult to type the URL. So from now on we'll be calling ourselves ReadWriteWeb, or RWW for short.

Finally on the logo, the design buffs among you will appreciate me telling you that the font is univers. For the body text, the font is Arial - a cleaner, more modern and readable font than the Lucinda Grande/Verdana we previously used there.

The other major change is that the site now has a white background, with a distinctive red header. Over the past year I had felt the red background of our old design was overwhelming for some readers. On the other hand the red is closely associated with ReadWriteWeb and lots of people like it, so I was keen to keep it in some form. The new header, I hope you'll agree, is distinctive and the bold splash of red makes our brand stand out.

Personally I love the new logo and header, but I am certain they will provoke different opinions. Why? Because that was the case with the ReadWriteWeb authors during the design process! That's good though - I'd much rather have a bold design that gets different reactions, than a bland one that gets no reaction ;-)

Other new features you will see on the new ReadWriteWeb:

• Popular Posts; this list at the top of the page is automatic and right now is based on the most commented posts.
• Popular Tags; a list of the tags we're using in Movable Type.
• More prominent and bigger RWW Readers section, via MyBlogLog.
• Search in the header (a much requested feature!)
• New main categories, which we think better describe what RWW is about content-wise.
• Shorter post extracts on the homepage, for better scannability.

Plus of course we've kept and enhanced features such as 'Featured Posts', 'Recent Jobs', the swicki search and more.

We have more new features in the works, so keep an eye out for those over the next month or so.

A huge thanks to Ideacodes for their inspiring vision and hard work. I want to also thank our web hosts Media Temple, who worked beyond the call of duty to help us get the new site up and running. Also thank you to Six Apart for their help and advice regarding Movable Type 4.

Let us know what you think of the new design in the comments. As with any new design rollout, there may be a few little bugs to be cleaned up, bits to tweak, things to align, etc. The OpenID login for example isn't quite ready. So the new design is still a bit of a 'Work in Progress'.

We're keen to hear your feedback and any suggestions! And shout out if you come across things that need fixing.

Here's how it works. I keep 100% ownership and control of my blog, which is very important to me. But I get to join a community of quality websites, which has opportunities for network advertising. It also gives my blog wider coverage, especially in the design community. Best of all, the network members help each other out - e.g. I could use some design help and in return I'm happy to give writing advice and tips.

The 9rules community is very strong in web design - there are a lot of beautifully designed websites in the network. I'm hoping to learn a lot from the community in that respect, because to be frank my blog design looks plain in comparison. On the other hand, I pride myself on writing top quality and original content on the topic of Web Technology. So I hope that my content inspires others and that I introduce some of the 9rules community to my niche interests (Web 2.0, Social Media). I think there'll be a lot of quid pro quo.

"Right now, if you want images, you have two options. You could hire an artist (expensive, difficult, and time-consuming) or you could surf microstock sites (cheap, but frustrating and time-consuming). Pixish seeks to be a middle path," writes Pixish founder and CEO Powazek.

Powazek compares Pixish to Threadless, which uses the wisdom of crowds to design t-shirts, with the key difference being that Pixish members can create open submission calls for any visual product or need. But a better parallel would be design contest sites. There are a number of them, but one of the biggest and most well-known is SitePoint's Contest area (which is in the process of being spun off and rebranded as 99Designs.com).

Similar to Pixish, SitePoint facilitates open calls for design jobs where designers submit work. Unlike Pixish, SitePoint requires that winning designers are compensated with cash. Which approach will work? I know from experience as a volunteer moderator at SitePoint that the design contest approach is often the target of criticism from people who believe that spec work is detrimental to designers. I personally disagree, and know plenty of designers who use spec work like design contests to gain real world experience, build their portfolios, and have also found long term clients by participating in sites like SitePoint's Contest area... but I digress.

I think it is likely that sites like SitePoint's will likely attract more professional designers, while Pixish will attract people who do art and design for fun. For someone who is trying to pay the bills with design work, competing for copies of a magazine might not be the best way to spend their time. But for someone who does design as a hobby, it might be a fun way to hone their craft.

Full disclosure: I recently sold a design contest site that I co-founded in 2005 called GFXContests.com and remain a volunteer moderator on SitePoint's forums (moderators of which also moderate the contests area).

Also a note about my goals for R/WW. These days I'm attempting to cover the high-level of web20 - market segments, product positioning, Web theory, industry insights, etc. My goal is to provide high quality analysis, while also producing a regular supply of posts. It's possibly ambitious to try and provide high quality posts and at least some of the quantity that other more news-focused web20 blogs pump out. So that's why I'm also on the look-out for more guest bloggers, to help me write insightful and instructive posts about the New Web. Contact me if you're interested!

btw if you missed it, I recommend reading my post on Rhapsody Web Services - in which I interviewed RealNetworks and Rhapsody execs. Also check out PeopleAggregator and Open Social Network Systems for a look at the future of social networks. Finally New Netscape = New Coke? is a story making waves right now.

The first thing that struck me was how spare and non-colourful Jason's re-design is. The distinctive yellow-green Kottke 'brand' that used to cover the screen like wallpaper, has now been condensed into a very thin yellow-green banner right at the top of the screen. The new design is very white-space heavy, reminiscent of the designs of Dave Winer, Mark Pilgrim, Robert Scoble and others. Now to me, this is not a bad thing. I like that 'minimalist' type of design, more so than the colourful Simple Bits-like designs that most of the web design community have. A personal preference.

Back to the Thin Yellow-Green Banner. Jason has named this a "tag". He explains:

Like the red tag on Levi's jeans or even the red stripe on Prada shoes. It's small, out of the way, but when you see it on something, you know exactly what you're holding in your hands.

My guess is we'll see a lot of these tags suddenly sprout up across the blogosphere over the next few weeks. But that'll be a sign of what a great little innovation this is, because I really like the idea of having my own Levi's-like tag. It also has Kottke's main links in it, so it's functional as well as fashionable. It would perhaps be one way around my current dilemma of not being able to design a logo for Read/Write Web. I've been doodling away in my notebooks, trying to think of a compact and utterly original logo to stick in the top-left corner of my site. But inspiration is hard to come by for me when it comes to graphical things... Also my header currently is very, well, green and doesn't have much utility - other than housing my search box. But the search could easily be shifted elsewhere. I've also been thinking of sticking a photo in the header as background - aka Scripting News, but my favourite example of this is jill/text. Hmm, it's good to have options.

Overall, I like Kottke's re-design. It's clean and functional, and that yellow-green tag is a deceptively simple but highly distinctive touch. And yes the font looks gorgeous in a Mac (I have both a PC and Mac on my work desk at this point in time, lucky me!).

I'll finish by mentioning my own humble efforts at incrementally improving my weblog design. Over the past week I've tampered with the CSS in the left and right columns and changed the font (to a serif - Georgia). Now the left and right columns match each other in style and so are more balanced. Thanks to my friend Code is Mandatory for giving me the feedback I needed to hear in order to make those changes. The other change I've done is swap to MT comments. For now they're pop-up, not inline. I'll probably change to inline later, when I get around to styling it. And by then, hopefully I'll have thought of a way to re-design my header.

It's a fun site to play with and some really nice pages get voted up allong the way. CommandShift3 is the keystroke combination to grab a full screen capture on a Mac.

A javascript bookmarklet makes it easy to add any page around the web to CS3 and submitters are encouraged to credit page designers when they are able. I've added ReadWriteWeb to the site already. We'll see how well the new design can hold its own in head-to-head contests.

And here is the new beta sidebar:

The new version has specific sections for 'Related Videos' and 'Promoted Videos' (a.k.a. popular ones). The 'Director' videos have been cut, perhaps reflecting that popular videos aren't necessarily professionally made by a director. At first glance it seems odd to cut the 'More from this user' section, but I think this has been integrated into 'Related Videos' (as with 'Playlists'). So YouTube has reduced the number of clickable options, by consolidating them into one section. Also the embed code has been moved to below the video (see below).

Note the added use of Ajax, in the 'more info/less info' toggle:

The other design changes are seen directly below the video. Here is the old version:

And here is the new version:

Once again, the links appear to have been consolidated and made bolder (with less words). The main change though is that the embed options have been added directly below the video - in the old version the embed options are in the sidebar.

Conclusion

So this isn't a major re-design, mostly small improvements to the usability and a touch of Ajax. YouTube could do a lot more - e.g. the comments could be threaded and other social networking features added. But still it is good to see YouTube try out new design improvements.

Note that I tried to check the YouTube blog for more details, but as of writing it is experiencing a 500 Internal Server Error. But not to worry, "a team of highly trained monkeys has been dispatched to deal with this situation" according to the error message :-)