Meet Webmaster-Source 6.0

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:

  • http://www.problogdesign.com Michael Martin

    Congratulations on the redesign Matt! I agree that the new design feels much fresher, but most of all I love the legibility of the posts. I never noticed anything at all on the old site that I didn’t like, but the new one does just seem easier to read off.

    The borders on the images are a nice touch too! We’ve tried introducing that same idea to clients a few times, but most writers just don’t have the interest to keep using it nicely. Very cool to see that you will :D

    The Tweetroll plugin rocks by the way! When I first looked around, I thought it was just a very nifty way to list some of your favorite tweeters (And was a little flattered to see myself! ;) )

    Ego-kick aside, I like it even more now that I know how it works. That’s a really cool idea, and keeping that section dynamic is always going to be more interesting than a static list. Any plans to open the plugin up to everyone?

    Last of all; the only little thing that bugs me; any reason that there’s no spacing between the wider banner ad at the top of the sidebar and the ones beneath it?

    • http://www.webmaster-source.com Matt

      I had image borders in the previous design as well, though I fine-tuned them a little in this one. I just apply an extra class to the images, so I can still have ones that bleed into the background. (Like on this post.)

      I will probably release the Tweetroll plugin sometime in the future, though I haven’t quite decided whether I want to do it for free or commercially yet. I’m leaning toward free at the moment.

      The banner ad does have spacing, it’s just a bit narrow. It just looks a bit wonky because I’m experiencing a drought of advertisers at the moment. If you take a look at this image, where I used FireBug to insert some more ads, you can see it a little better.

      • http://www.problogdesign.com Michael Martin

        Ah, that’s cool about the Tweetroll plugin. Either way, I can see it going down well. It’s a very nice twist on a feature a lot of people like to have on their sites.

        Thanks for the ad pic, it does look a lot neater there! :)

        Only remaining thought; I like the “Subscribe” dropdowns, but you wouldn’t know that they’re there unless you were looking to click the RSS button (I was doing it because I was curious to see the hover effect on the nice one in the header). I’d wonder if it’s putting your Twitter or email lists at a disadvantage?

        (btw – The little icons in the comment fields are a nice touch too :) )

        • http://www.webmaster-source.com Matt

          That’s a good point about the header dropdown. I may have to come up with a way to make it more obvious. I had actually thought about having it say “Follow” initially, since people tend to associate that word with Twitter. I’ll probably work something out, maybe an arrow indicator of some kind.

          • http://www.problogdesign.com Michael Martin

            The arrow could definitely work well. At least there would be a good indicator that there is something more there.

          • http://www.webmaster-source.com Matt

            I just added some indicators, using the Unicode “down-pointing small triangle” symbol. No additional images FTW.

          • http://www.problogdesign.com Michael Martin

            Ah, much better! And nice touch on the arrow character! :D