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

The first change that irks me is the new Connect screen, which replaces the Mentions tab. Instead of getting a listing of replies or tweets mentioning your username, you get something closer to a Facebook feed. The stream is cluttered with messages along the lines of “Mr. Follower and 6 others are now following you. Isn’t that great?” Oh, and anytime someone retweets one of your updates, it goes in there too. You can still get to the Mentions timeline, but it requires a second click. I imagine it’s even more “useful” if you have a half million followers.

I’m still not sure where they buried the Direct Messages page. I know it must be around here somewhere…

Next on the list is “Brand Pages.” Now the Twitter profiles for large brands get a few extra features that, while I’m sure they find useful, kind of detract from the Twitter experience and remind me of Myspace. (Remember them?)

Brand pages get to have a graphical banner on their profile, right above the timeline. They also get to make a featured tweet “sticky” and pin it to the top of their timeline. Oh, and did I mention any linked photos or videos in those sticky tweets get auto-expanded?

Now for the icing on the cake. Remember Loren Brichter’s excellent iOS app? Formerly known as Tweetie, it won an Apple design award before Twitter bought it and made it the official app. Well, Twitter has completely scrapped that codebase and replaced it with something that reminds me of Facebook’s kludgy app. It’s missing many of the great features of the old app, and feels very watered down in comparison. But it looks and acts more or less the same on Android, which is…good for Android users, I guess.

Gruber nailed it in his review.

…today’s new Twitter, is something else. It’s an attempt at a best way to do Twitter that is as consistent as possible across multiple platforms, ranging from the iPhone to Android to the mobile and desktop web. I don’t want an iPhone app that’s constrained by the restrictions of a mobile web app. The whole reason I prefer native apps is that I like experiences that far exceed what can be done in a web app. This is a native app that looks and feels like it was designed and polished according to the norms of web apps, not other native iPhone apps.

It looks to me like #NewNewTwitter is the new #Dickbar. Fortunately, there are still plenty of third-party apps, which have had an increase in sales since the update. (Tweetbot and Twittelator Neue are a couple of good ones.)

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.

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.

It’s still as ad-heavy as before, but that can be expected. At a glance, the navigational header present in the previous incarnation is bigger and more pronounced, and the search box has been moved there to be more prominent.

The classic “We smash you with the information that will make your life easier. Really,” line has  been removed from under the logo. I’m not sure if there is any significance to this other than making things look a little cleaner, but it will be missed.

Now one of the biggest changes in the redesign is the front page. Smashing Mag’s posts aren’t the only ones displayed there now. “What?” you may ask. Let the folks at Smashing explain it for you:

If you’ve already had a look at the new front page, you would have found some changes there, too: not just recent Smashing Magazine posts, but contributions from other design magazines. That’s because we’ve teamed up with 18 other magazines to house a productive and comprehensive meeting place for designers and developers, showcasing truly the best content around. Among those joining the game are Webdesigner Depot, Noupe, SixRevisions, UX Booth, Hongkiat, ThinkVitamin, Web Designer Wall, Designm.ag, Boagworld and Speckyboy. We call it the Smashing Network.

Two posts are shown in traditional blog-format, followed by a grid showing 18 posts aggregated from the network. Clicking on the headline takes you to the originating site.

Network sites also get their own author profile pages that show all of the syndicated posts as well as Twitter postings from the sites’ accounts.

It seems like a good idea to me. It brings more great content into one place for easy access. It’s like–dare I say it?–a web portal. I’m sure some of you are worrying about the RSS feed; don’t worry, the network content goes into a separate feed from the main Smashing one.

Another neat addition is the “Tag Explorer.” It’s certainly a better way to display tags than in a tag cloud.

Go and check it all out for yourself: SmashingMagazine.com.

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 design feels nice and open, and is very clean overall. I can’t find much wrong with it from a usability standpoint. It has a nice style, but it’s still simple. I like that in a design.

The navigation along the top is good, the link lists in the sidebar have been done well, following several design theories that the author has previously discussed.

The one major addition I would recommend would be Gravatar support. I think there’s room to fit a small avatar under the names and comment dates.

My favorite parts, stylistically are all in the top-right corner.

I like the serrated edge and page curl, I like the RSS subscription bubble, and I’m always a sucker for Apple-style search boxes.

Overall, I like the new design. Keep up the good work, Dmitry.

The new design is a lot less…bland than the previous. At the same time, though, it’s a lot cleaner, or so I’ve tried to make it. The goal was to cut out the clutter and make things look less plain, and I think I’ve done a decent job at it. You can decide for yourself what you think, though.

Let’s look over some of the highlights of the design…

Sidebar Posts Box

If you have a look in the sidebar, you’ll see a tabbed box showing you recent and featured posts on Webmaster-Source. And also posts from the NTugo Network, my little network of blogs that share their recent headlines via a JavaScript widget.

The box uses jQuery to create the dynamic tab effect. You can find a tutorial on how to do just that over at NETTUTS.

Also, while you’re over in my sidebar, you’ll notice that I have reverted back to a normal two-column layout, not the two-and-a-half column one I’d previously had, where the 125×125 ads had their own narrow column to themselves. That brings us to the next part…

Ads

Instead of having a vertical column of five 125×125 ads, there are now six in a 2×3 cluster. This way they are all above the fold on a moderately-sized monitor of 1024×768 (which is the low-end of common use these days). So now pricing will be $25/month for any ad slot, which will hopefully simplify things for potential buyers.

The previous system had the top three ads, which were above the fold, priced at $25/month, and the two below at a reduced rate of $15/month. There were benefits to this, but overall I think the new layout will be more beneficial, putting the ads a bit more front-and-center, but of course not to the point of frustrating readers.

If you are a current advertiser, take note: Your rates will not be going up. Those who currently have ads running on Webmaster-Source will see no increase for as long as they wish to continue their campaigns here. If you’re paying $15/mo for the fifth ad slot, you will continue to pay that.

Then there’s the matter of the new sixth ad slot. It would be priced at $25/month as per the new pricing, but anyone who wants to snap it up right now can have it for $19 for their first month. You’d better hurry if you want it, someone else might beat you to the punch.

Twitter

The sidebar also contains, in addition to a few compact buttons linking to some of my social media profiles, a small space that shows my most recent posting to Twitter. This replaces the old “sideblog” that had previously lived in my sidebar, taking up a lot of space with little point. The sideblog posts live on in the archives, under the guise of “normal” posts.

To show my latest tweet, I used Joost de Valk’s little code snippet, which grabs the data and caches it in the WordPress database for about an hour.

Post Thumbnails

The front page of Webmaster-Source loads a little faster now, and looks a bit cooler. Instead of simply showing ten post excerpts, it shows one post, which will often be shortened with the <!–more–> tag, and nine post titles with an accompanying thumbnail. I recently wrote a post on how to implement this, and have used it on Fantasy Folder since the sites’ launch.

Now, I add a new post here everyday, and some of them are a little on the short side. It would be overkill to do a thumbnail for each one. So I wrote some logic to check to see if a post has a thumbnail, and display it if there is. If there isn’t one, it will check to see what category the post is listed under and display a default thumbnail associated with that category. So I don’t have to create a thumbnail for every post, and it will still look all right.

Obviously it’s very time consuming to go back through the many posts in the archives and create thumbnails for them. So I only did the most recent ones for now, and I will add more over time.

Category Dropdown

What’s that on the homepage, just above the first post? It’s a dropdown menu that allows you to navigate Webmaster-Source’s archives by category. Want posts on domain names? Just open the list and select the Domains category.

The dropdown was done with a bit of JavaScript magic via the mystic jQuery forces. There’s a handy tutorial to follow somewhere, but I misplaced the link. I thought I’d bookmarked it with Del.icio.us, but I must have forgot…

* * *

Now, let me know what you think of the design. If you have any contructive criticism, or suggestions of any sort, please step forward and speak your mind. Obviously the design has just went up today, and I’m still making tweaks and fixes, so things may be broken (and I may not be aware of them). The launch has seemed smooth so far, but I may have missed something.