The new design makes use of fun new CSS3 features, like linear gradients, box shadows, and variable opacities. I also worked a bit to improve the legibility of the main content, which really stands out when you compare the two revisions. I think I achieved a greater level of polish overall, though there’s still room for improvement.

Let’s take a look at some of the new features added in the redesign.

The “Tweetroll”

I spent a few hours putting together a custom WordPress plugin for one of my more interesting ideas this revision: the “Tweetroll.”

Instead of being a static blogroll, it’s a dynamic listing of people who have recently interacted with me on Twitter. Once a day, the plugin crawls my Twitter account via the API and counts the number of times a user has mentioned or retweeted me, and how many times I have done the same to them. The top ones get their avatars listed, linking to their profile, and I added Hovercards as a finishing touch.

It can behave a little…oddly at times, but it’s good enough. I tend to retweetpeople a lot, so that feed of information from the API changes more frequently than the list of my recent mentions. So the EFF was on the list for a little while, as I was retweeting some things they were live-blogging, but has since fallen off the list as other actions have pushed them off. Meanwhile, Michael Martin has replied to me a couple of times in the past month or so, and his profile remains on the list. It can be a little wonky, but it’s good enough for something that’s more of an amusement than anything.

AJAX Search Form

The search box in the sidebar, besides looking incredibly stylish, automatically searches when your typing pauses. The relevant results, up to a maximum of six, appear in a dropdown below the field. You can select the “more results” option to go to the classic WordPress search page, if you can’t find what you’re looking for.

You can also use the keyboard to navigate the list. The arrow keys will cycle through the options, and pressing enter will activate the links.

I used the jQuery UI autocomplete library in conjunction with the JSON API plugin as the basis of the feature.

Nifty CSS Menus

The dropdown menus you see around the site are 100% CSS, with the exception of hoverIntent, which merely improves the experience by keeping the menus from closing abruptly if you accidentally mouse off the element.

It’s all CSS, other than that. The pointy triangle is CSS. Even the icons are, sort of, since they’re a part of a sprite.

Smart Homepage

The front page of Webmaster-Source now uses a bit of custom logic behind the display of posts. Like in the previous revision, the latest post is rendered as it would be on its permalink page, and only abridged if the More Tag is used. Now, the other posts have some new intelligence behind their display.

• Instead of being only the headline, like in revision five, the posts now have a blurb from the post content. It’s the first x words of the post content, pretty much. I was originally going to make it “fuzzy,” so it wouldn’t cut off a sentence, but decided against it. The size varied too much, so I stuck to truncating at the word level.
• Posts in some categories, like BlogBuzz posts, which are primarily lists of links, don’t get an excerpt. It just looks better that way.
• If a post has a thumbnail attached, it will be displayed. If not, the space is left empty.
• The thumbnail function checks too places for an image, for compatibility. If it can’t find an image using the Featured Image API added to WordPress a few versions back, it checks a custom field.

Twitter Widget

I made my own Twitter widget for the footer. It bears a slight similarity to the “official” one, but I’m just pulling statuses in with the search API and dumping it into the HTML. Then it was just a matter of adding Web Intents to reproduce the interactive functionality.

The normal widget didn’t really fit too well, and it was taking too much re-styling, so I just made my own.

On a related note, I think I have succeeded in making everything asynchronous. I have one minified script that W3 Total Cache serves through my CDN, and everything else happens asynchronously. External scripts, like BuySellAds’ ad serving code and Google Analytics, use async loaders.

Conclusion

That’s about it. The new design looks a bit less dated, it has some spiffy new features, and I’m trying out a new logo. The JPEG artifact-filled one from before was majorly in need of an upgrade.

Oh, and there’s a fresh 404 page, can’t forget that.

For posterity, here’s a before and after:

• Version 5.0 – home page
• Version 5.0 – post page
• Version 6.0 – home page
• Version 6.0 – post page

I really like the texturing and color palette. They’re subtle, but still eye-catching. Legibility has been improved as well, thanks to Michael’s efforts to improve the typography. The new title font is much easier on the eyes than the blocky one from the previous theme, and he seems to be using TypeKit now, which doesn’t have the side effect of making the text difficult to select. (That was a problem with the previous theme, though I think it may have been fixed later on.)

Anyway, go check it out for yourself.

The bar floating at the top is statically positioned, so it’s visible as you scroll. This is handy, as you always have a button to post a new tweet within easy reach. Clicking it launches a pseudo-window overlay. It’s nice to have when you’re off looking at someone’s profile or putting together a List.

Profile pages look nice, but the wider page layout hides most of the background image on smaller monitors now. True, there are more people running around the internet with 27″ LCDs than there were five years ago, but there are also plenty (like me) using 13″ laptops. It’s perfectly usable with a 1280×800 screen resolution, but most of the background image ends up underneath the content area. The partially transparent right-side pane is a nice touch, though.

What did making the page wider gain in trade for the background issue? Nifty (and useful) sliding panes. When you click on a tweet in the timeline, a panel slides out to cover the now-wider right sidebar. It shows the tweet along with the conversation it’s part of, replies to the message as well as the post it was in reply to itself. The pane is also used to preview linked images or video right on the page.

If you click on a username, the sliding pane shows a miniature profile page, which seems to replace the “Hover Cards” seen in the previous incarnation of Twitter. A “view full profile” link takes you to the full profile page.

The panes remind me a little bit of the screenshots I’ve seen from Tweetie for iPad.

The new Twitter is much more AJAX-y. The data in the panes is all loaded via AJAX requests, tweets are loaded dynamically with an “infinite scroll” feature, and the page constantly polls for new tweets. When new ones show up, a little message bubble appears (and the page title updates, like GMail, with a little count) and prompts you to load them.

This is actually good for Twitter. It takes less server resources to generate and serve a tiny JSON response than an entire web page. If you multiply the savings over the millions of daily page requests the Twitter servers have to handle, the load has to have lifted significantly.

Rule.fm is a web application with a spiffy design that a few noteworthy designers have commented on. It’s simple, it makes good use of whitespace, and the texturing looks great. I particularly like the large blue buttons and the footer. (Lean in and give your screen a close look!)

One of the first things I noticed was that the sites’ advertisement strategy seems to have been rethought. There are no more large leaderboard or 250×250 banners; instead, there are only 125×125 banners. They sit at the top of the narrow sidebar and run down the side of the page in a single column. It actually looks pretty good. They’re out of the way, yet still visible enough to be sought after by potential advertisers.

Overall the UI has been cleaned up, particularly the post footers and comment functions. I particularly like the icon-based “Related Posts” section, with the word bubbles that display the titles when you mouse over them. The “fold” effect on the premium membership box is kind of neat too, despite the fact that it’s becoming too much of a trend lately.

Overall, I would say the new design turned out very well, as is usual for Envato.

Perhaps more than the redesign, I am interested in one of their announcements: “Mobiletuts+,” which will be a tutorial blog “all about mobile development.” If that means it will include iPhone application development tutorials, I will be impatiently monitoring Twitter for the launch.

Anyway, to the design.

Simple, visually interesting, and functional. It also has one of those big, in your face search boxes that are in vogue with “Web 2.0″ sites. The front page has a Google-esque simplicity that leaves no doubt what your next step should be: to search.

When you perform a search, you are taken to the following screen, which serves as a results page and portal to play songs or perform other actions. (You can also add songs to the queue to be played, get Flash embed code to put songs on a website, share songs, etc.)

The results page is displayed as a nifty iPod-style menu, easily sortable by Songs, Artists, Albums, or Genres. You can drill down through the menus to peruse the available tracks.

The breadcrumbs and still-accessible search bar are nice touches.

The styling strikes me as slightly Mac-like, but not quite. The interface seems fairly polished, and easy enough to navigate. Pretty good overall.

The new design looks a bit more polished and modern, and seems to be a little wider too. It also has a lot of neat touches. Some of my favorites include the ability to change the “view” of a list page between a flat list and a grid setting, the expanding search box that lets you narrow down search criteria, and the “site switcher” that lets you toggle between marketplace sites.

Oh, and those page headings? They’re rendered in MgOpen Modata using HTML5 Canvases with Cufon.

Go and have a look for yourself. The Envato redesigns are very well-crafted, and definitely worth looking at. (And be sure to have a look at some of their products while you’re there?)

The new color scheme is bolder, the revamped logo is eye-catching, and the new background is subtly attractive. The header looks good, with it’s prominent icons for following the site’s updates, and it’s interesting navigation. The huge tabs certainly are unusual, but they seem to work quite well. The categorical navigation is good.

I like the box that appears at the end of posts, with the bio and links to share the post on social media sites. It’s uncluttered and it looks good.

The dropdown blogroll is nice (something I’ve been considering adding here), especially since there’s a link to Webmaster-Source in it… I also like the interesting comment styling. The way box with the username subtly overlaps the Gravatar is especially nice.

Overall the design is very good. There are just a couple things about it that bother me. The first is the way the hover tooltips that appear on some links (such as those in the header) sometimes appear half-offscreen if the link you’re hovering over is near the edge. This might be possible to fix with some collision-detecting AI. The second is that the image-replacement script makes it impossible to select the article headline, though it does make them look nice. Using something like sIFR might improve things. All in all, though, it’s a good design.

Defining a “tweet” for the uninitiated and explaining how to create an account doesn’t resonate with everyone. “Why would I want to do that?” is a common reaction. However, demonstrating the power of Twitter as a discovery engine for what is happening right now through our Search and Trends often awakens a sense of wonder which inevitably leads to a much more compelling question, “How do I get involved?”

I think the new design is pretty good. It’s clean, the color scheme is nice, and the imagery looks a lot more polished than in the previous design.

There are still some rough edges, like with the trending topics. If you try to click one of the links on the immediate right, where they’re half-faded, you have to do some pixel hunting to find the tiny area that will respond correctly to your click.

Other than that, my only major complaint is that the login form is hidden in a dropdown, while the register button is shown so prominently. While this makes sense from a stylistic and business standpoint, it’s a bit of a pain for existing users.

The new Yoast design is colorful and attention-grabbing, with some interesting touches, such as the way the Subscribe and Search boxes appear as strips wrapped around the main part of the page.

The background illustration is done really well, artfully and technically. I couldn’t find a way to “break” it by resizing the browser window. Shrinking the window didn’t jumble anything up, and the background seems to be constructed to degrade gracefully on larger monitors.

The redesign is very well made, and it’s apparent that a lot of time was put into it. Go check it out at Yoast.com for the full effect.