Creating Lasting Websites

by Shawn Blanc — Dec 3, 2007

When my 98 year old grandpa posted a comment on my weblog last fall it hit me in a new way just how much the web is a part of our society. If I open my laptop in a coffee shop and there's no wireless I practically don't know what to do. "What? No internet? I guess I'll play solitaire."

The more the web expands its reach the greater the need for those behind the scenes to create usable, sustainable and quality websites. There is much more to building a website than tweaking a free template, or adjusting an open source CMS.

Jeffery Zeldman defines web design as "...the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity."

When you are building a website, it doesn't matter what it's selling. From photography to journalism; t-shirts to even rabbit feed. The website should engage the user and support the product.

A lasting website has three main components. These three components blend together, and it's hard to separate them, but for now we will anyway. First off you need a rock-solid code base built using web standards. You need an interface that engages the user, and you need a thoughtful design and layout.

Rock Solid Code

The primary foundation of a lasting website is valid HTML and CSS markup.

A good way to illustrate the importance of coding with web standards is to think of a website like a home.

Suppose the builder uses cheap wood, skips a few nails here and there and does a cheap job installing the plumbing. That house may look great, and may work just fine. But once a family moves in, has guests over and things start getting used the problems will start to show up. Leaks in the basement, doors that don't shut quite properly. Who knows - if they hosted a big Christmas party the floor just might fall out. There's no possible way prepare for all the ways a house will get lived in, but taking the time to build it well can prevent a thousand smaller problems.

The same goes with your website. Taking the time to build it with a quality code structure and debugging it does more than just serve your client by giving them a strong website. It serves you as the developer: saving you from getting a few phone calls down the road when something goes goofy, and it also serves the users of the world wide web. Not all browsers are created equal, and having a site that validates in even the least standards compliant browsers is often a necessary evil because it serves those accessing your site.

Here are some resources for helping you with standards and accessibility:

An Engaging Interface

I studied and taught martial arts for 11 years. Every time a new student joined the school they had the same vision: Learn to do sweet jump kicks, take out bad guys and impress girls. (O.k maybe not every student.) As they progressed through the ranks and learned the basics, they slowly realized that fancy kicks are for show, not for actual fights.

When watching a new student spar with a higher ranking instructor they would always try to pull out their slickest newt moves they just learned earlier that day. But they were quickly disarmed by their opponent through simple blocks and punches.

The trick to successful fighting and self-defense isn't flash. It's the simple, basic techniques that will keep you safe and on your feet.

And the same goes for how your website interacts with the user. Is it full of tricks, quirks and fireworks that distract from it's primary purpose? Those are good for nothing but show and often do not serve the user.

The best way to build a website with an engaging interface is to asses the purpose of the site. Imagine if highway signs used script fonts and trendy colors; they would completely lose their functionality. Those road signs are there so drivers know how fast to drive, where to turn, and how far it is to Denver. Getting too fancy with interaction often pulls away from the purpose of the website.

Design Decisions that Annoy Users

Ronald Huereca wrote an article for Devlounge listing 15 design decisions that annoy readers. I want to highlight a couple of them here with my own comments:

  • Auto-Play Music: If you want music to play on your website as part of the experience that is fine. I've seen many photography portfolio websites with atmospheric music that enhances the experience. But readers and users should have the option to turn music on.
  • Small Font Size: Abnormally tiny fonts should be avoided. This is practically rule number one of usability. If they can't read what it says they certainly can't engange in the purpose of the site. Whether the purpose is to read an article and give a response, or fill out a survey. Reading is a dynamic element to every website. It has to be readable.

The main issue at hand is to layout and construct your site with common sense. Instead of trying to throw all your coolest, newest tricks in there to impress the client or wow the user you should build a site that has a clean, strong interface that is inviting and easily understandable.

Thoughtful Design

This is where I can get lost; spending hours and hours tweaking, adjusting, editing and tinkering. This is where we get the chance to make our website shine. And if it's been built on valid markup and has an intelligent interface it will shine all the more.

Having it built on valid markup makes sure it looks right. Having the intelligent interface layout will make sure it is inviting to the user. And by having a thoughtful (read: "brilliant" or "stunning") design it will burn itself into the memory of the user.

Some things to consider when designing the site:

  • Does the design aid the vision or the purpose of the website?
  • Does the design have too much going on? Is it busy?
  • Does the design have too little going on? Is it too simple?
  • Does the design support and add to the content or distract from it?

When starting the project, a great way to kick-start the design is to step away from the computer and get out a blank sheet of paper. Start with a few sketches and outlines to get the general feel of how you want the layout to look. How do you want the elements (header, sidebars, main content ps, footer, etc...) to interact and connect with one another.

Also, don't feel the need to create something completely insane and out of the box. There are some elements to web design that are not going away. Such as fonts and sidebars. Instead of fighting against that, work with it.

If you're feeling a need for inspiration or some help in building the elements of your website here are a few design resources to help you out:

By creating a website with web standards, intelligent layout and brilliant design you are producing a lasting website that will not only hold up to traffic, but will maintain its strength and class for years to come.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float