Last week I launched the newest incarnation of zenutech.com. The last redesign was three years ago, used table layouts, a lot of image files, and as a result was really sluggish. It’s definitely not good when your site takes almost ten seconds to load and you’re marketing speedy web hosting. A fresh new design with rewritten markup was definitely due.
Although the branding and colors weren’t too bad, I was never really happy with the previous design. It did not use a grid-based layout and all the page elements seems a little askew. The navigation wasn’t quite right either. The “Software” tab didn’t really fit with any of our marketing goals. This time around, Pierre and I decided to apply a bit more process. With both of us working full time, we could afford to spend a bit more time on it.
1. Rethinking Navigation
First, we evaluated our current navigation, adding pages that help meet our marketing goals (like Green Web Hosting) and removing those that don’t (like Software). We also considered our current customers’ familiarity with the existing site. The prominence and location of the “Client Login” link was particularly important.
2. Design Mockups & Copy Writing
After discussing some general design goals with Pierre, I mocked up a new design of the home page in Photoshop and e-mailed him a few JPGs for review. After a few iterations, we ended up with the design that is now live. With the new design I employed some grid-based design principles (I learned since the last redesign) which has made for a much more organized look and feel. If anything, the new design may be a bit too symmetric. For the navigaton, we decided to add drop down menus to the tab items. I still have mixed feelings about drop down menus, but I do like them in this particular instance.
Instead of starting the markup and CSS as I usually do at this point, I decided to design the rest of the pages in Photoshop and write the copy for each page. Although Photoshop isn’t the best tool for copy writing, it allowed me to focus on the content and design of each individual page. I think it worked very well and I intend to use this process for my next project as well.
3. HTML and CSS
After finalizing the copy and design for each page, I could focus on writing the markup and styles. And man, did I ever need to focus. I put a lot of blood, sweat and tears (well, maybe not blood) into the plan comparison page. Since the compare page consists of tabular data, I marked it up with <table> tags which made it quite challenging to apply the complex design I had conceived. I was tempted to abandon the <table> tags for tags that would be easier to style, but I managed to stay strong by reading articles from A List Apart and the blogs of standards advocates. I’m really happy how it turned out and glad I stuck with the <table> tag.
As I coded the HTML and CSS, I also implemented Smarty templating. It is my first experience with Smarty and I was very impressed with it. I’m definitely a fan.
4. Knowledge Base
One thing that was really bugging me about the operation of our business is that we didn’t have a proper Knowledge Base (KB) system. None of our responses to support requests would get published. The home-grown system that I had built eons ago had no back-end and as a result, the articles became horribly outdated. So, rather than build another inadequate system myself, I looked around for open source Knowledge Base systems, but had little luck finding a good one. Then it dawned on me. What is the difference between a KB and a blog really? It turns out they are really the same core system, just a collection of articles.
So I went ahead and built a custom WordPress theme from my design mockups and I am very pleased with the result. I hope to create a neutral design for the theme and release it so others can use WordPress as a knowledge base system as well. It won’t be for a while though, as I have other plans right now.
What’s next?
Just before I started working on the new web site, I had just finished another significant project. The E-mail Setup Wizard project aimed to make the process of setting an e-mail account in an e-mail application (i.e. Outlook, Outlook Express, Thunderbird) as painless as possible for Zenutech customers. The project has been a hit, so now my plan is to decouple it from our systems and create an API so other companies can use it for free.