It’s been about four years since this site last had a design refresh, and it’s high time it did! Version five really hasn’t changed much over the four years since its launch, and it’s looking a little stale. So today I bring you, the sixth major revision of Webmaster-Source.
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:
