Tina’s brother designed her tanning salon’s website.

Tina’s brother is a genius commercial software engineer.

I don’t think Tina’s brother likes her very much.

I remember asking myself what she could have dome to him that made him design her site with orange text against a brighter yellow screen.

Then she said “Don’t you just LOVE the colors? They remind me of the sun!”

Color-coordination rules still apply on the Internet. If it doesn’t look right off screen, it won’t look right on screen.

I’m not going to go into color theory or the color wheel or anything like that here… But if it hurts someone’s eyes to look at a website, then they’re not going to look at it very long.

We raised over $18,000 for the kids that year.

The were able to eat a pre-game meal together before each game (and have energy to finish the game), and had their first winning season in 20 years.

They went to the playoffs for the first time in 20 years, and came within a touchdown of upsetting the team that eventually won the state championship.

Nine kids who would not have been able to go to college otherwise received scholarships due to their athletic and academic performance.

The principal at the school felt upstaged and had the coach dismissed from the school, and he has moved on to another school in the area and his having great success there with his teams.

Sadly, times change and Avondale High School is being closed later this year. It will probably be converted into a facility completely dedicated to the performing arts.

But for that one year, the kids had something to be excited about, spirits were high, and a bunch of them got their first taste of success in life.

As much as I was honored to be a part of it, it is a true testimonial of what the Internet can do to raise funds to help kids.

I recently visited a website for a residential cleaning company. They had a picture of their baby boy in a bunny outfit tiled (repeated) all over the background, and then they built the we site’s content in front of that. Now the picture was cute, but it had nothing to do with the company… worse, it kept taking my attention away from the company and their message.

If someone is going to use a photograph as a background, there needs to be a reason for it being there. A photo for the sake of having a photo is counterproductive, but if it is needed to set a vibe or put a descriptive picture into someone’s head, then use it wisely.

A good example of this can be seen at the Sandy Weaver Country website. The photograph used in the background adds to the message, rather than detract from it.

With proper planning and a little bit of imagination, a photograph can be a good background for a website. Just try not to overdo it. File size, contrast and “busy-ness” of the background are just a few of the the things to think about when choosng a photo to use.

Beep. Click. Whirr. Swish.

Is there anything more annoying than sitting next to someone who has their sound turned on and you get to listen to all of their sounds all day long?

Yes, there is the argument that a sound let’s someone know that they clicked on something… But unless it’s a quiet click, you’re giving visitors a reason to leave your site.

The number one rule in business is “never assume.” I am giving you permission to break this rule in this case.

Assume that the person going to your website works in an office, and that there are probably other people around them within earshot. Their job description probably doesn’t include visiting your site on the Internet. How will it look when all of a sudden, their computer starts making noises because they are on your site?

They’ll be OFF your site quicker than their manager can say “who’s playing games?”

Any time a background graphic is used, it needs to be subtle and not interfere with the text or other content that goes on top of it. Here are the two tricks that I most commonly use when a picture is going to be used…

1 – Fade
When I fade a picture for a background, I fa-a-ade the picture for the background. My goal is for visitors to feel the picture, not look at it. That’s all I want then to do. It’s about the website’s content, not the pretty picture on the background.

Fade the photo as far as needed so that the text on top of it is very easy to read. This could mean that the photo is displayed at a 10% opacity in some cases. If there are high-contrast areas in the image, take that into consideration when deciding how transparent the image should be in the background.

2 – Color
Making the whole image different shades of the same color (light and dark blue, for example) can work wonders in the feel of a website. The key to making this work is being subtle. Avoid stark contrasts and go for smooth transitions. This will help maintain the text’s legibility.

If the whole photo can be kept to about 30% of a color’s light to dark range, then it should be fairly simple to place text on top of it that as very easy to read.

I was visiting a prospective client in his office and we were finishing up when all of a sudden, the James Bond theme started playing from his secretary’s computer outside.

When we went outside, the poor lady was trying to figure out how to make it stop, finally closing the browser completely. She had gone to a James Bond memorabilia site to find a present for her husband.

There’s a lot wrong with this picture, but it gave me a perfect illustration of why a company would NOT want music on their website…

No matter how far technology has come, or how cute, powerful, patriotic or fun the music is, it drives people away from your site…

Which is the exact opposite effect that you want for your business.

Effective website design starts with a strong billboard mentality. The average visitor gives a website less than five seconds to keep their attention, and strong visual communication goes a long way in establishing this.

There are two rules of visuals that I like to use. First, it must catch the eye, and then second, it has to communicate the idea of the page very quickly.

A great place to find examples of this kind of visual use is looking at billboards on out-of-town highways.

Billboards in metro areas don’t count for this illustration… they’re increasingly being designed for people stuck in traffic jams. You need to drive away from the city where the average speed all day long (including rush hour) is above 70 miles per hour and look at the billboards along the side of the road.

Just like websites, these billboards get less than five seconds to get someone’s attention – especially at those speeds!

Effective billboards use one large visual which typically covers about a third of the space. The visual is either a picture, a logo or a short word in very large and bold type. The offering is communicated very quickly and the driver knows exactly what’s there.

The trick is to grab eyes quickly with strong contrast. It’s not the time to be artistic or cute or subtle. In less than five seconds, the person driving toward the billboard will know if they are interested in the service, whether it’s a hamburger, gas, hotel or any other service offered along the highway.

If they are interested, then they will look for more information. If not, they drive on.

The first page of a website works in a similar fashion, although the visitor is hopefully not surfing the web while driving!

A website visitor is almost always at least interested in what’s on the website, otherwise they wouldn’t be there in the first place. So instead of trying to grab attention, the visual is to keep their attention, confirm they are in the right place and set a vibe or convey a feeling.

I have designed over 100 web sites. Only two of them have animated introductions before letting a visitor into the site.

One because the person who hired me said “I want one, dammit!”

The other one was because the owner’s wife said “I want a martini shaker shaking, dammit!”

…and I replied, “what color would you like that shaker to be?”

Animated introductions, or “flash intros,” are one of the worst things to happen to the web design industry.

They opened a door where a web designer could sell it to an eager business owner for a whole lot of money without adding a lot of value to the website.

Don’t believe me? How many times have you sat through a flash intro? How about a second time?

Flash intros annoy visitors. You have five seconds to get and keep a visitor’s attention. You don’t want them spending that time hunting the ‘skip intro’ button, because they’ll go somewhere else if they can’t find it.

Oh, and flash intros usually include sound… Unexpected sound… The kind that gets someone into trouble while they’re at work.

Sometimes, one has to wonder that a person is thinking.

An Irish pub decided to use a bright green background with orange text throughout it’s website. Now while that may sound like a logical idea (Irish colors), there are many shades of green to choose from, and neon shades may be in your face, but they are not a great choice if you’re going to put text on top of them… Especially if it’s another neon color.

In graphic design, the most effective and most often used background for text is plain white. Black text is used on this white background to get the most contrast and the easiest visibility, and therefore, the easiest readability.

Contrast is one of the most abused rules in graphic design, both by professionals and amateurs alike. Sometimes it’s on purpose… and sometimes… it’s not.

Contrast is the amount of difference between two objects or ideas. In print (and on the web), this is achieved through color and pattern selections. The further “apart” the colors are from each other, the more contrast. Contrast creates separation, which can be used for organization of ideas and content on a website or printed piece.

Text needs strong contrast to be easily read. Otherwise, it gets lost. Whether it is black text on a white page or white text on a black page, the contrast has to be there. On the Internet, “Content is King,” and being able to read the text is the most important consideration when choosing the background, followed by setting the mood or vibe of the website.

When the text can be easily read, then the site has a good background. If not, then the background needs to be toned down.

Now that the Internet is starting to mature a bit, thankfully we’re seeing less of these, but they’re still out there… websites that cover the screen with about 30-40 copies of a photograph tiled in like a floor.

Although there is no written rule saying so, having a background photo that tiles all over the background tells visitors that a company values the object of the photo more than anything else on the page, but worse, it distracts visitors’ attention.

Usually, the photos are of the owner’s child and pet dog, or they are an amateur glamour shot, or something along those lines. It’s rarely a professional photograph… and if a photograph is not professionally done and doesn’t help convey the message of the website, then why is it up there in the first place?

Tiled photography distracts attention from the marketing message. When a company is selling a product, effective advertising and design put eyeballs on the message, not the background. It is much better to find one really good photo that represents what your company does and then use that one on your site as an anchor visual.