Website Design - Alternate Version

Principles and approaches used to build this new version of our website

This is the alternate version of this page, to show how different it can be by changing a couple of lines of code in the style sheet.

To switch back to the regular version, just
   click here   

We realize the old version of our website was looking a little tired, a little dated. But, if you run a small business, you know there's never enough time for such things.

So, the next step was to decide how we wanted it to look. More importantly, we needed to decide before we started build it how it would work. That's something we've learned by doing so much design of custom forms, reports and applications - design first, code later.

There is a TON of content on the web about how a site SHOULD function, though it turns out almost every site breaks some or all of those rules because of the inconsistencies of browsers, poor coding tools, or an overly-developed sense of the value of eye candy. Then, of course, there's the complexity required to keep things simple, which many developers struggle with (if it ever even occurs to them to keep things simple).


Considerations when redesigning a web site

The "consensus" (if such a thing is even remotely possible on the web) is that designers should consider things like:

  • ergonomics - how easy it is to use. We figured you're busy and want information quickly
  • complete separation of the content from the styling by use of Cascading Style Sheets (CSS) rather than a ton of bloaty code in each page describing how the content should display. This dramatically affects how easy it is to change a site later. We can change the colours, fonts, tables, etc. on the whole site literally in a matter of minutes now. Before, it would have taken hours or days. In fact, you're looking at the alternate version of the 'normal' look for our site right now. You can switch back to the 'real' version by clicking here
  • standards compliance - in theory, "valid" html and CSS so the site will always display consistently (though in practice, that is not always so!)
  • speed - we want the site to always load quickly because we know people don't like to wait
  • consistency - people use lots of different browsers these days; the market leader by far is still Internet Explorer, but more and more people use FireFox and Safari (on Mac). And recently, lots of people use their Smartphones / iPhones, etc. It takes a lot to make sure everyone gets a similar experience
  • scalability - whether you have a huge screen at high resolution or a small one at low resolution, we wanted it to still work. As well, we wanted it to work whether you are looking at the site full-screen or in a half-size window. This is what is usually called having a "liquid" layout
  • search engine friendliness - basically, we want Google to be able to read and index the site so you can find it easily. There are some fairly simple ways to improve your odds on this, so why not incorporate those from the start?
  • aesthetics - how nice it looks. Good thing we like simplicity.
  • simplicity of maintaining the site - we're busy too, so we don't have hours to spend every week or even every month to maintain it. In the time we do have to spend, we want to focus on adding content that's useful, not on struggling to make it look right
  • accessibility for people with visual or other challenges
  • ability for visitors to print a page that's readable. I know it's not the most environmentally friendly thing to do, but let's face the fact that many users want to print out materials for later consideration, conversation, or follow-up. If they can't print something intelligible, maybe next time they'll find someone else's site. That said, if you prefer to not print anything, please at least bookmark our site so you won't forget us!

Principles we employed:

So, after reading everyone's opinions and a lot of material on the various new technologies available (Ajax, Java, Flash, etc., etc., etc.), we decided on the key principles that needed to apply to our redesign. Taking account of the considerations above, we decided that bells & whistles were NOT required. There is (as of the launch of the site) no Javascript, no Ajax, no fancy hovering graphics, no animation, no Flash. What we did instead was to build a site that we believe shows consistently in the browsers that 99% of visitors will be using, looks fresh and clean, and just allows you to get where you want to get on the site, quickly and efficiently.

We encountered a LOT of challenges along the way, of course. Turns out a 3-column liquid layout is extremely hard to achieve, and there are no "standard" ways of achieving it. It also turns out that making things look the same (more or less) in different browsers is a significant challenge because each browser implements the agreed-upon "standards" to different degrees, and in different ways. So, what works really nicely in Internet Explorer (IE) might look awful in FireFox (FF), or vice versa (for the record, IE gets slammed as "buggy" more often than FF, but in our opinion, it's just frequently more forgiving of non-standard code). For us, that makes it all the more compelling to keep things simple.

After all, these principles of simplicity and effectiveness are at the core of how we want to help our clients operate their businesses. Fancy graphics, animations and the like are eye candy and they're nice on some sites, but if you're looking at OUR site, we figured you're trying to find information to help your business, not toys. So, for better or worse, we've really tried to keep it simple.

As with any technological endeavour, is it absolutely, completely perfect? No, certainly not. There would be those that say our CSS files define too much and reuse (cascade) too little. Well, maybe so. At the end of the day, it needs to work as well as it can for the resources available to put into it. Sound familiar?

By the way, credit where credit is due: if you're interested in the "liquid layout" idea, we based our design loosely on the "holy grail" approach. You can read more on that here and here if you're interested, and there are lots of good links in those articles. As well, if you're interested in Cascading Style Sheets (CSS), the guy to start with is probably Eric Meyer - he's sort of the guru of CSS. You'll find his main CSS materials here.

I'm sure there are many others we should credit, but honestly, we read so many of them, it's hard to know exactly how this all came together!


Tools used to build this site

  • Notepad
  • Adobe Illustrator for fine-tuning the logos and other graphics as well as the gradients
  • Browsers (various versions of each) for testing: Internet Explorer, FireFox, Google Chrome (version 2.0), Lynx (Linux browser - we tested using both text AND graphical versions, if you can believe it), Smartphones, Safari (on a Mac)
  • The good will of friends and associates (you know who you are) that helped with testing on different browsers / smartphones in the list above and who commented on the early designs, resulting without a doubt in a better site
  • Microsoft Word - but only for the occasional spell-check
  • Time
  • Patience
  • Dogged persistence

Yup, that's really it!


Feedback, please!

Please feel free to let me know whether you think we've achieved any of this or not, and certainly feel free to suggest any improvements, point out errors, and so on. No guarantee we'll change anything, but I am certainly interested in the feedback.


Charles Pezzack

Kirby, Pezzack And Associates Inc.


Back to the Articles index