Unless you missed your coffee this morning, you’ve hopefully already noticed that Webitect has been outfitted with a fresh new theme design! Over the past few months I’ve watched a whole barrage of new blog designs (Design Informer, MyInkBlog, JankoAtWarpSpeed, Hongkiat, Tuts+, Visual Swirl) come out, all of which served to repetitively remind me that the Webitect theme was sadly lacking.

Well, no more! With this fresher and more optimized theme, I’m sure that Webitect will be a much more enjoyable place to be (even if it’s not so stunning as some of the blogs I listed above). In this post, I’m going to take you through the process of the redesign and show you around the new theme.

A Realign?

First, for those who are interested in the realign vs. redesign debate, I have to point out that I aimed for a realign that would make the site more professional, pleasing and usable for my readers rather than just a new design that would make it prettier. That said, it ended up being more of a redesign because, quite frankly, the old design needed a *lot* of help (it had been thrown together in a hurry a few months ago and was quite slow and clumsy).

I still kept the general color scheme and the desktop theme, though, and I aimed for a better implementation of the clean, fresh atmosphere that the last design was supposed to have.

The Process

Most of you are designers, so you’re plenty familiar with the design process. I can’t say I did anything out of the usual with this design of Webitect. I started with lots of sketches and diagrams on paper, and when I had a good feel for where I wanted it to go I created a digital mockup. With that I started coding, using a cleaned-up, stripped down version of the old theme as my starting point. The design morphed and changed along the way as I worked on the new theme, so there’s actually a pretty large (but definitely positive) difference between my starting wireframes and the final product.

The whole project took about a month, working on it intermittently, but given the fact that I did the whole thing myself I’d say that’s not unreasonable. I also got some feedback on the design before it went live – thanks to those who helped me out with that. So enough about that, let’s look at some of the features of the new design!

Chock-Full of CSS3

I wanted to create a very graphically rich design without requiring a ridiculous amount of images (CSS3 is the obvious answer), as well as implement some of the neat CSS3 effects that we’ve all been talking and writing about. I used lots of rounded corners, gradients, and a transform or two. Here’s some examples:

Browser Support

Of course, browser support is always a tricky issue. I chose not to support IE6 (I can hear the cheers). I made sure that the site is usable with IE7 and IE8, but I didn’t baby them with lots of scripts to make them look like real browsers. Thankfully, the fact that my audience (you) is mostly comprised of tech-savvy designers and developers means that less than 9% of my visitors use IE, and less than 1% uses IE6. I designed the site in Chrome, so the webkit browsers (Safari and Chrome) are peachy. Opera looks great, too. Firefox below version 3.6 has a few cosmetic issues, but nothing major, and again it’s a very small percentage of Webitect’s readers that aren’t using the latest version of FF anyway. I made sure that the design works at multiple resolutions, but it’s best at higher resolutions (>1280w). Basically, the new design is acceptable in a lot of different environments, and is at it’s finest in the latest versions of FF, Chrome or Safari at high resolutions – the very experience that most of you folks will be having.

Typography

Many of you will recognize the new header font (implemented with Cufon) as ChunkFive, an awesome free slab-serif downloaded from FontSquirrel and designed by The League of Moveable Type.

The body text uses a nice Helvetica/Arial based font stack (with a generous line-spacing), and you’ll see a touch of Arial Narrow in the footer and header as well. On the last design, the typography was an afterthought and was not real pleasing, so during this design, I actually started with the typography first to make sure it was high quality. I think that was very successful in terms of readability, good whitespace, etc.

Features

Of course, there’s a lot of other new things that have been introduced in this design. Here’s a brief overview:

Featured Post

At the top of the home page, you’ll now see a big featured post banner. It’ll sometimes be the newest post that’s featured, or it might be an older but still relevant post from the archives. I think it adds some interest to the main page.

Community Links Feature

Webitect now has a community links area! At the risk of following an overused trend, I decided to add one because I feel it’s a great way to get community sharing and involvement going.

Header Illustration

Like I said, I stuck with the desktop theme, but I realized the old header illustration needed some improvement.  Design “blueprint”, pencil, torn notebook paper, color palettes, it’s all good.

RSS/Twitter Counts & Email Subscription

You should also take some time to admire the sharp looking new Subscribe/Follow area just above the sidebar, complete with Twitter Follower and RSS subscription counts. Several of you have asked for an email subscription option, and I’m glad to say it’s finally here (right under the twitter/rss buttons). I apologize that it took so long, and I hope you’ll get some good use out of it.

Improved/Added Pages

The about page has been expanded, for example, and two “Contribute” and “Archives” pages have been added as well.

Semi-Fluid Layout

The new design is quite flexible, and has some good limited percentages set that will allow it to look it’s best on multiple resolutions.

Social Sharing & Related Posts

Instead of using SexyBookmarks (too generic and more plugin code), I’ve added a cool custom social sharing section next to the author bio at the end of every post. I’ve also improved the related posts section at the end of each post to include thumbnails and be styled a bit nicer (it was just plain text links before).

Admin/Author Comments

Admin/author comments are specially styled now, which is just a neat little feature that I hadn’t taken the time to implement before.

New Footer

The new footer is very clean with lots of whitespace. I tried to make it interesting and helpful, yet very simple and uncomplicated at the same time.

An Awesome 404 Page

The new 404 page is a work of art, if I do say so myself. Much better than the old one. I hope you’ll agree.

Optimized

I also have paid more attention to speed/optimization in this new design. I’ve cut plugins down to the minimum, getting rid of several whose features could be easily replicated with a few lines of code,  and cleaned out the database, dropping several tables from old plugins and optimizing everything that was left. W3 Total Cache is now implemented, and although I could’ve done a bit more with sprites, I did compress my images and limit them down to something reasonable.

More Than Skin Deep

Hopefully you’ve found the new design to be quite stunning. What’s even more important, though, is that Webitect’s transformation is more than skin deep. I’d be lying if I said I hadn’t made some mistakes and learned some things during these first few months of running Webitect. That’s not anything to be ashamed of, and my goal from here on is to correct those mistakes and do things better. Here’s some of the changes that you can expect to see:

• A better schedule. My posting schedule has been quite intermittent. I’d like to see that settle down and not have these posts jump around so much.
• More value for you. I think there’s been some times when I’ve fallen into the trap of mimicking everyone else, and producing content that’s not truly useful or valuable. You can bet I’m going to be doing everything I can to change that.
• Better community engagement on Twitter. If some of you Twitter veterans have been watching Webitect’s Twitter stream, you’ve probably groaned at some of my rookie mistakes. I’d like to get involved in community conversations more and be a bit more personal – not just posting interesting links all the time.

Also, I’d like to give a huge thank you to Webitect’s Top Sponsors. If you are in the market for their services, I encourage you to check them out -

• PHPKB Knowledge Base Software – A powerful re-brandable software for FAQ management, online customer help desk implementation and more.
• Themes by Bavotasan – Awesome, feature packed and great-looking premium and free WordPress themes.
• WordPress Defender – A meaty e-book on WordPress security, recommended by Jeff Starr.

In addition I’d like to thank all of you – the community that makes Webitect what it is. It’s great to have you all around, and I’m looking forward to hearing your feedback on the new design.