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 ever-present reality that it's very difficult to make things look easy. It requires a lot of complexity to keep things simple, which many developers struggle with (if it ever even occurs to them to keep things simple).
The "consensus" (if such a thing is even remotely possible on the web) is that designers should consider things like:
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 no no Ajax, no fancy hovering graphics (only simple, tiny ones!), no animation, no Flash. The only Java used are standard Java commands to trigger the "print" button at the top right corner of each page just below the Sage BusinessVision logo, and to open certain external links in a new window so that our site stays active in your browser as well. (For the two people who care, this latter bit was required for our site to correctly validate against the w3.org validator - W3 being the web standards people that count).
Instead of all the flashy stuff we could have done, 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. And in case you need it to "degrade gracefully" as explained above, it reads OK even on the text-only browser, Lynx! And to top it all off, as of this writing, every page and all style sheets validate perfectly with w3.org.
We encountered a LOT of challenges along the way, of course. Turns out a simple 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.
Another thing we found a lot of trouble with was those printing issues mentioned above. Print issues, and minimizing the use of graphics and/or Java code, were the main reason why all our boxes / charts etc. in the center column have square corners, not the arguably nicer-looking rounded ones. Since most browsers don't support a "draw a box with rounded corners" command, the only way to do them across all browsers is with layers of graphics and code; even then, when you print them, they'll likely look crummy. So, once again the KISS principle dictated our approach.
On a related note, if you print this page using IE or Firefox, it should look pretty good; we've stripped out the menus, header, footer, etc., and just left the main content. It should be sized reasonably well, and overall will be readable. If, however, you're using Opera (or perhaps other browsers we didn't really test the printing on), your mileage will vary. In fact, as of this writing, printing in Opera is terrible, and we haven't spent enough time at it to bother to find a solution. Odds are, very few people will view & print this site from Opera, even though it's a decent browser.
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 likely say our CSS files define too much and reuse (cascade) too little. Well, sure. That's probably all true. At the end of the day, though, it needs to work as well as it can for the resources available to put into it. Sound familiar?
We didn't make all this stuff up - we based it largely on other people's work. For those who might be 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!
Yup, that's really it!
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.
If you think we should use a different font or something, let me know that too; because of the design approach, something like that is very easily done - we could change the font in the whole site and upload a fresh copy in just a couple of minutes. I'm open to ideas, although we're almost certainly not going to do a complete redesign again any time soon!
We're also interested in ideas you may have for articles / editorials, links we should post, or other thoughts you may have on content you'd like to see us provide. No guarantee we'll change anything, but I am certainly interested in the feedback.
Charles Pezzack
Kirby, Pezzack And Associates Inc.