Celebrating 25 Years of Designing Websites

Time flies!

This month marks 25 years since I started designing websites.

In March 1997, I left my job as a release coordinator at an Ann Arbor software company and embarked on a new journey for me: designing and developing websites.

I had no idea where it would take me, the people I would meet, or the web projects I would work on over two and half decades.

And I never thought I would continue doing it for 25 years!

From designing sites for faith-based organizations and nonprofits to sites for K-12 schools, colleges, small businesses, and independent consultants, my web design work has covered a wide range.

I’ve learned a lot along the way, thanks to books, blog posts, conferences, and meetups as well as helpful friends and colleagues.

And discovered how supportive the web design and development community can be.

My First Website

As I was cleaning up digital files this month, I came across my notes from my first website design.

What a blast from the past!

How interesting to read what issues I focused on. And what issues I still focus on, 25 years later.

My first site was for my church, a United Methodist church in Livonia, that never had a website.

What I found in the website guidelines took me back in time.

Here are my first website design notes from 1997, with my comments from 2022 in parentheses.

Website Guidelines

In developing the website, consider the following:

1. Why does the site exist?
2. Who are we trying to reach?
3. Will website visitors find what they need?
4. Why would website visitors return to the site a second time?
5. Provide real content. The website should not simply be a repetition of promotional printed material.
6. Don’t treat the website as only a marketing tool. Consider it a valuable communication device.
7. Design the site with the target audience in mind.

(All very good things to consider, 25 years later.)

Overall Structure and Design

Maintain a set style for each page. Website visitors get annoyed when each page on a site has a different layout. A set style adds to the cohesive look of the site.

Write in a browser- and display-independent way. Website pages should not be dependent on a particular browser or display settings. (Remember this was when Netscape Navigator and Internet Explorer were competing with each other. Internet Explorer 3.0, released in August 1996, had partial support for CSS.)

Keep size of pages in the 50-60K range. (Had to keep page size small due to the limits connections, dialup 56K modems were only invented in 1996. Many people in 1997 were using 14.4 modems to connect online.)

Validate with an HTML 3.2 validator.

In the code, include the title and appropriate keywords in the meta section.

One page should contain one well-defined concept.

Include an email address and snail mail address on each page for people to use for contacting church staff.

Maintain the accepted standard link colors.

Remove outdated information weekly.

Spell check and grammar check all content. Typos make a site look unprofessional.

What’s Not Included

(This is the section that made me smile the most!)

1. Under construction signs or “come back later” messages

   If info isn’t available, don’t leave a blank page or a non-existing link. Wait for the information to be available and then publish a page on the site or add the link.

2. Mission statements

   Forget it. Everyone has a mission statement that pretty much says the same thing: “We strive to accomplish…, provide you with the best…”

3. Plugins required to view the site

   Don’t force people to install plug-ins to view pages. You’ll alienate website visitors. (Do you remember having to install the Real Audio plugin so you could listen to audio?)

4. “Click here” syndrome

   Avoid using “click here” for link text. Remember many visitors to the site may not be using a mouse. (25 years later and I’m still talking about how to write descriptive link text.)

5. Counters to track website visitors

   Since it’s based on an image, it doesn’t track website visitors who use a text-based browser or have images turned off.

6. Cascading Style Sheets

   The two main browsers (Netscape and Internet Explorer) differ in their implementations. (A few years later, I added CSS to the church website.)

7. Frames

   They take a long to display. In addition, they can’t be viewed in older browsers.

8. Rainbow-colored divider lines

9. Blink HTML element

   No blinking of text on the website, it’s annoying.

Images and Backgrounds

• Use subtle backgrounds, if any. White backgrounds are easiest for majority of people to read against.

• Include width and height attributes in the code for all images.

• Use alt attributes for images so the user can understand what the images are about before images appear. (Another issue I’m still advocating for, 25 years later. Some things never change.)

• Reminder: the total of all images on a page shouldn’t exceed 40-50K. A single image should rarely go over 30K in size. A 14.4K modem transfers text and images at a rate of about 1K per second. It takes over 40 seconds for a 40K image to load. (Speed and page size sure has changed in 25 years! Can you imagine anyone waiting more than 10 seconds for a page to display today?)

• If using animated GIF files, use only one per page. Personally I don’t like these much they rate up there with the blink element. (I still feel the same way!)

• Use interlaced GIF and progressive JPEG where needed.

Summary

While time has gone by quickly, I have many memorable web design projects I’ve worked on and published.

One project that stands out for me: working on the Habitat for Humanity Detroit website which resulted in an unexpected five-figure donation from a former Detroit resident who lived in Chicago.

They only learned about Habitat Detroit and the work they were doing to build houses from the website I created.

It was fun for me to look back at my 25 years of creating websites!