The 5 C’s of Intelligent Web Design

Last week we talked about content: helping people who are not Christians find their church and then find God by making church websites inclusive and friendly. Now let’s decide how to package our message in a way that makes a great first impression!

Thumbin’ through a Web site.
Pick up a magazine. Check out all the variations in color, text size, font selection and layout. It’s tempting to set out designing a website to look the same. You can come close, but there are some important differences. The Web depends on a monitor that essentially shows many fewer color dots per inch than a full-color magazine that is printed on paper. In addition, browser differences can make your page layout look different from one computer screen to the next (font size, column length, etc.) whereas a print magazine looks the same whether you’re in Alabama or Albania. Another important difference is the typography. You can use a rare font to print a full magazine article but the Web is better suited to common fonts. I’ll explain why.

1. Common Fonts.
Let’s say I have a font on my computer that I really like. Here’s one called  . I think to myself how cool it would be to use that casual handwriting font throughout my website. I call a friend to get his reaction, but he thinks it looks awful and says there are stray characters such as music symbols mixed in with the text. Some friend!

What went wrong? I used a rare or uncommon font. You see, I can print something on paper with the blzee font and it will show up just fine. But for the Web, if I want someone to see that same font from their browser, it must either be (a) embedded into an image or (b) a font that is installed on the other person’s computer. Otherwise the browser will guess at the intended font, which is why my friend saw music symbols instead of letters. Hint: The reason you can see the font above is because I created an image out of it. Here is some text that I deliberately styled with the blzee font so you can see how it looks on your own computer: blzee font. Unless you happen to have that font installed, can you see what I mean?

You could just create a giant graphic and put all your text on it, then load it to your site. You could use any font you want that way. But… your visitors can’t select text from a graphic with a mouse, you can’t easily make text changes without editing the graphic and re-uploading it, and your content will be lost as far as search engines are concerned.

The question, then: “What fonts can I use?” You can find out by referring to this list of browser-safe fonts. Bookmark it for future reference, and make it your habit to only use fonts that are universally installed on both Windows and Mac computers. Study CSS (Cascading Style Sheets) to learn how to offer more than one font as a fall-back.
And finally, please be careful not to use too many different fonts on one page. A rule of thumb is to use one or two, with three being the maximum. When it comes to fonts, less is more.

2. Color.
Ah, color! Why is it that some people just have a natural flair for choosing color combinations and others of us are hopelessly lost and couldn’t pick out a tie if our lives depended on it? No time to discuss theory. Instead I’ll provide a tool for you to use. Your color harmony troubles are over!

3. Contrast.
It’s easy to see black text against a white background, but navy against black is an eye-strainer. People with poor visual acuity will leave your site in a hurry if they can’t read the text, so be careful to use light colors against dark backgrounds and vice-versa. And what about red against brown? For many people with color blindness, that color combo looks like one blob of color, with nothing readable.

If you’re blessed with good eyesight and perfect color vision, it may be difficult to discern what color combinations to avoid for people who are not so blessed. But you can simulate how your site might look to someone with one of the three main types of color blindness. Just enter the URL of your web page in the blank provided. The site also offers an explanation of color blindness, which they say affects roughly 1 in 20 people.

4. Clean.
Okay, this is a bit subjective but take a good hard look at your website. How many bright  colors are competing for your attention? Try to tone them down or eliminate some of them. How many animated graphics are jumping around at once? See if you can get rid of all but one. And that scrolling ticker: is it really necessary or could you try something static and get the same point across?

“That Pam is a killjoy!” I hear you say. “I worked hard to put all that JavaScript on my page and it looks reallllly cool!” A little movement on a website can be effective, and I’ve designed more than my share of Flash movies. But if you’re going to use animation, then make it work for your site, not against it. Use animation because it is essential, not just as a decoration or, worse, to take people away from your site and onto someone else’s. Remember that animations and graphics are resource hogs that make your page downloads sluggish. Are you prepared to lose visitors who leave in frustration because it takes too long for them to get to the main content of your site? At the very least, put all of your applets, Amber Alerts and animations on a separate page with a warning that the page is graphics-heavy for people with slow Internet connections. Try it and watch your homepage download times improve.

5. Consistent.
I’ll make this point quick and painless. Your home page should share the highlights of your website with clear navigation and minimal text. Perhaps it has a more prominent logo and drives home a briefly stated philosophy. The remaining sections can be more content-heavy while sharing the same color scheme, look and feel and a common navigation menu. Don’t make people think they’ve left your site because of a sudden design change!

Putting it all together.
Your mission, should you choose to accept it: Use the 5 C’s on your site. Find ways to use Common fonts, implement a pleasing Color palette with optimal Contrast, and opt for a Clean, Consistent design theme. Then sit back and Compare. Looks better, doesn’t it?
 

Pam Seibert

Pam has been providing support and website development at OurChurch.Com since 2003. She and her husband Ed have two grown children and one grandchild. Pam is a small group leader in her church and volunteers with the Extension Ministry. She enjoys writing and music. Her children’s songs have been published and distributed nationally for use in a vacation Bible school curriculum.