Welcome to the fifth iteration of Webmaster-Source.com! As you may have noticed, the latest redesign has been completed and is now up for everyone to see.

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.

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.

Related Posts

the new theme look absolutely great! are you going to change the logo? i reckon you can do a better logo that that. its great to see some ajax stuff, ajax is always great.

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

Thanks. I’ve wanted to redo the logo for a long time, but never managed to come up with something that looked right. I’d like to put something better there, but I just haven’t been able to create something that looked good enough in my eyes, so I’ve left it. I’ll replace it sometime…

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

It looks great Matt!

The sidebar is perfect. I love the design of the tabbed content area (Right down to the faint little gradient on the tabs, perfect!). And the social media buttons work perfectly with the background and I love the Twitter bird you found.

Great work, big thumbs up here!

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

Thanks, Michael.

I spent a lot of time on the sidebar in particular. It was one area that got out of hand the last time around, so I wanted to make sure I could make the best use of it from the start.

I kind of borrowed the design of the tabbed area from yet another NETTUTS tutorial (one of the earliest ones), but I made a lot of subtle changes to it that really made it work well with the rest of the design. It came out pretty well.

The social media icons were a nice discovery. I’d seen them around on several blogs (three that I subscribe to, even), and thought they would work well, so I did a little bit of detective work to track down their originator.

http://www.techzilo.com/blogging/ Sumesh

I’ve already aired my views about WSC on Twitter, Matt

Except the header and navigation, everything looks well-set.

If anyone wants a tut about using thumb images (and showing it only on those posts where a thumb exists), check out Justin Tadlock’s tutorial (I used it on my blog too).

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

Really, there’s a tutorial on that already? Oh well, I thought I could be the first to write one…