Practicing What We Preach - Proper Web Design

Can Your Site Really Live?

If the technology is what's keeping you from updating your own site and you need the help of a web geek, your site is stifled.  Web sites that aren't updated regularly lose visitors.  Web sites with outdated information will make your organization look bad.  Worse, the harder it is to update your web site, the less likely you and others in your organization will be willing to initiate the process of getting out new information, especially for the little things when you find yourself saying "It's just not worth it."  The best way to take the web content process out of the realm of IT and directly into the hands of people within your organization who actually have content to contribute is to separate the information from the presentation.

Entering this page onto our site required me to fill out the Title, URL Name (in this case, "ProperWebDesign", used as part of this page's web address), Comments, and Body of the page and then save the document.  That's it.  Once published to the web, the index of news articles were automatically adjusted and I didn't have to worry about the colors, fonts, or graphics of this page.  Granted, in my case I do have the skills to do it the hard way if I needed to, but I certainly don't have the time, and I didn't have to bug our IT staff at all.

CSS vs Older Ways of Web Design

Besides the human side, there are technical matters to consider as well. In web design, we've been preaching the separation of data from presentation for a long time now, using HTML to store the data and CSS to tell the web browser how to present it to the user.  Currently every page on this site has three basic parts: Header, Sidebar, and Content.

• Header contains our logo and main site navigation,
• Content contains the words you're reading now,
• Sidebar contains the text such as our address or links to recent news,

By separating and tagging the content in this way, we can use CSS to tell the browser how things should be displayed:  The list of links in the header should be horizontal instead of vertical and show a golden egg when your mouse hovers over them, text in the side bar should be gold, hovering over links in the side bar should turn the link text white, etc.

All of this is important because, if we ever want to change the look of the site, we can do it globally by changing only the CSS, drastically reducing the costs required.  CSS Zen Garden is a great site for demonstrating how powerful this is.  You can view the same exact HTML with different CSS rules for amazingly different results.  For example, compare this vs this!

Plus, by using HTML only for structuring the data, not the presentation, the site "degrades gracefully" when certain presentation features aren't available or don't make sense.  This allows the site to remain readable on old browers, browsers for the blind, and even on HTML-enabled handheld devices.  Go ahead, try it.  Remove the CSS from this page to see how the naked HTML is presented.

It's also important because this method is lighter, which means it uses less server and network resources, renders faster on your browser, and can be read by search engines much more easily, which many search engines including Google reward with higher rankings.

Questions to Ask Yourself

When considering who you want to use for redesigning your web page, make sure you keep the following in mind:

• "Can the pages be updated by those who actually have the information?"  If your PR department isn't web savvy at all, then you might require a high level of sophistication out of your web content management system.
• "What if I want to change the colors of the site?"  At a Minnesota Notes User Group meeting, we presented a case study about how a company turned its web presense from unmanagable to dynamic.  Just changing a logo used to mean editing nearly all 483 pages on the site!  Now it's child's play.
• "What if I want to change my site organization?"  Are the products and services you sell organized by audience? By product category? What if you want to change it?  This is a much harder question to answer even for the expensive web content management systems.  If nothing else it will underscore your need to think about how your site is organized.
• "Is the site navigation automated?"  If a link to your content isn't automatically added in the appropriate place on your site, you'll have to do it manually.  More importantly, you will inevitably have dead links on your site as content is moved or removed.

A Good Start

There are even more questions you should think about, especially concerning workflow (who enters content, who is authorized to approve content before it is published, are these lists of people site-wide or should, say, only your PR department be able to submit press releases?), but this should give you a basic understanding: If you really want to have more than a web version of a glossy pamphlet, content is king, and you need to think systemically.  The web site's appearance is important but, if an appropriate back-stage system isn't implemented, either your site will lack fresh content, the look & feel will become outdated as new styles emerge and your site is too difficult to update, or you will spend more resources on your site than necessary.