Redesigning a website

February 20, 2008

So a while ago, I got annoyed with the layout of the company website. It’s not that it’s terrible, but let us be honest, O Reader: is a dated tool for website design, what with the emergence of s, and when one has to manage even irregular changes to a website that has translations from English into Spanish and Portuguese, it can be a tedious chore to maintain a consistent layout and template across the entire site.

Reliance on for navigation menus, especially in this age of security paranoia and server-side scripting, is also a bit of a faux pas.

So, basically on a whim, I decided to redesign the website in my spare time.

This is the old version of the site, a series of static pages composed primarily in Dreamweaver, and subsequently translated from into and .

cs_welcome_page.jpg

Advantages to this design are that it is more portable — we can stuff it on a CD to auto-run when a client inserts the disc into his computer, we can easily move it between servers without worrying about mundane things like databases, and for the most part it’s fast (being just raw text).

Disadvantages to this design, however, are that it just looks dated, like a fugitive from the 90s. Web design has moved ahead by leaps and bounds since the time this site was first given form, and so has web development technology — Dreamweaver has not really kept up with the times in this regard. The site is “table heavy”, and its use of is inconsistent; styles change across the different pages. Moreover, the template and formatting are not consistent between pages, or between identical pages in different languages. Text that is inside a table on a page in one language is found to be outside the table on the same page in a different language, for example. Also, the multi-language capability of the site is not well-implemented — clicking on one of the language options on the left sidebar always reverts the visitor to the index page for the new language. That can make navigation a bit tedious.

And, of course, it relies very heavily on JavaScript. Turn your security features to Medium or High in and see how well the site functions for you, O Reader.

Here’s the new version of the site that I’m going to propose to my managers. It uses the Joomla content management system (CMS).

cs_proposed.jpg

Disadvantages to this design are that it is less portable — because it uses a database-driven CMS, it cannot easily be stuffed onto a CD. That’s not a huge concern — I can save it as a series of static pages and make it work on CD easily enough — but it is an initial liability. Also, the URIs for the site aren’t nice, descriptive things like “approvals.html”, but are instead strings of variables. Not that most users pay strict attention to the address bar, of course, but still.

Advantages to this design, however, are that it looks cleaner, and frees us from the need to use Dreamweaver to maintain the site. Content management systems have administrative backends to them that allow for modifications to site content to be made online, from any computer in the world, at any time — that gives our marketing director (and the VP in charge of same) the ability to make changes to the site on an “as needed,” “on the fly” basis. The site uses DIVs primarily, with only a few tables, and also remains fairly lightweight and quick-loading. The CSS styles are consistent, and the width of the site is fixed rather than variable. There is also a vastly diminished reliance on JavaScript in the site’s interface, and an increased use of PHP, a server-side scripting language that is mostly unaffected by a user’s local security settings.

The big thing about the proposed design, though, is that the feature has “in place” functionality. If you’re browsing our products page in English and suddenly decide it would be easier to read in Spanish, selecting Spanish from the language dropdown at the top of the site won’t suddenly kick you to the index page all over again; you’ll still be looking at the products page, but the text will have switched to Spanish.

So far, the marketing director is on board with the redesign, and we have to present it to the VP of Sales and Marketing (and possibly the General Manager as well) at some point in the near future. Wish me luck, O Reader, in selling these changes to the company.

Note: the redesign doesn’t quite look right in the image here, which was captured using Paparazzi! for Mac, a “website screenshot” utility. Its web rendering engine is a bit primitive, so the language dropdown box looks out of place as a result. In reality, and in both and Internet Explorer, it is nicely aligned on the top bar, with the words “Select Language” snuggled in beside it.