5 Things to Avoid in Web Design

When it comes to designing your own website, the sky is the limit! You can make the site look as abstract as your mind can imagine it. However, there are a few things to avoid when putting your site together. I’ve compiled a list of 5 things to be aware of when creating a good-looking and functional site.

1. Animation

Neat little animated GIFs are neat. But that’s all. These type of graphics are fun for using as your image on MySpace or other community sites, but when it comes to your own website, their a no-no. Animated GIFs are outdated and make your site look otdted as well.

Flash animation is okay as long as it is kept to a minimum. I would recommend Flash animation only for the front page since many Flash features are large and tak awhile to load. You do not want your visitors to wait, everytime they click on a link in your site.

In any case, keep animations to a minimum. Of course, if you sell animated graphics or create Flash animation, then feel free to display your product!

2. Pop-ups

Usually the word “Pop-Up” to an internet user means those annoying ads that say that “you have just won an iPod Nano”. That may be the case, but some designers that are familiar with JavaScript also use pop-up links. This mean that when a person wants to visit another page, it opens up in another, smaller web browser window.

I would discourage the use of JavaScript pop-ups in any situation because they are slow and may be blocked by the user’s web browser itself. Many times, if a page is too slow to load, people will just close it before viewing the valuable information that is on it. If they have a pop-up blocker, they will never get to see it anyway!

Instead, just build a new page (if it’s within your site). If linkig to a site which is outside of your own, use the target=”_blank” method to open up a new window or tab without the use of JavaScript.

3. Backgrounds

If you’ve ever been to MySpace, you know that there are several way to dress up a site. On of those is having a different background than white. Also, if you’ve ever been to MySpace, you’ll notice that most backgrounds are very distracting and make text hard to read.

A good rule of thumb is if you are going to have a background image directly behind your text, make sure that:

  1. It is not the same (or close to the same) color as the text. Your background color and text should contrast. Some examles are haveing a black background with white text, or a white background with navy blue text.
  2. It does not distract from the message of your webpage. I page with intricate designs in the background may pull visitor’s eyes away from the content.
  3. It does not conflict with other images within your web page. Let’s face it an image on top of an image usually just does not work unless your background image was clearly designed to have other images on top of it.

Another thing to mention is that background patterns (or tiled background images) are outdated and make most web pages outdated. Most tiled background images I’ve seen these days are very subtle and give the illusion of a solid color. Look at the background image for OurChurch.Com. Very subtle and not distracting.

4. Images

Images can be animportant part of a webpage. Many times they grab a visitors attention or evoke some sort of emotion. However, there are a few things to keep in mind when using images on a site.

Images can be pretty big. I always recommend that a web master resize an image to the exact size it will be on the webpage. This does 2 things:

  1. It makes sure that an image size is no larger than it has to be. This directly effects how fast an image is loaded on a page.
  2. It does not cause the image to be distorted or “pixelated”. Resizing images using the width or height parameters within the “img” tag may cause your images to look strange.

Some images may not be seen. Believe it or not, some web surfers turn off their images in order to load pages faster. Web designers that put a lot of text within images basically waste their time with these people. If an image is going to have a lot of text in it, you may consider using actual text instead of using an image. For logos or headers, you can always use the “alt” paramater to explain what the image is all about. For example the OurChurch.Com logo might be coded as:
Image Code Example

Another reason to not put too much text information within images is because search engines do not see images. “Alt” parameters help to a point, but actual text is the best solution.

5. Multi-Colored Sites

We’ve talked about images and background images/color a lot, but I wanted to mention one other thing that can really make your site look horrible. Many people believe that highlighting text or colored text makes content stand out and grab attention. This may be tru, but it may also give a negative impression on your website as a whole.

A good rule to go by is to try to use no more that 5 colors on your page. Also make sure that these 5 colors go together well. A great site to visit for color scheme ideas is http://kuler.adobe.com. Just stick to the same colors, and your site will look great!

Please post your thoughts or feelings about these points or share any experiences you have had. And, as always, if you found this article interesting or helpful, please vote for it on Blogs4God and GospelShout so others will see it.

Mike joined OurChurch.com as Web Designer/Developer in September, 2006. Born and raised in Houston, TX, he is now married and has 3 adorable children. In his spare time he enjoys playing piano/keys and singing throughout the local area as well as at church. You may also see him acting in church dramas as well as a local Improv Comedy Troupe!

12 Responses to “5 Things to Avoid in Web Design”

  1. You might want to reread number 3 and apply it locally. Your recommended sites sidebar item overflows its background image so it is hard to read the red on red list of sites below preteen sunday school.

  2. While planning our church’s website, I studied many other church websites. The ones that I found appealing, easy to use, and informative, were ones that avoided the things you mentioned in your post. Following these guidlines will help produce a website that can be used and enjoyed.
    Jim

  3. I agree, in generally with most good websites, less is more. You want your visitors to see your site for what it is, especially if it is any type of business or you simply want to get your message across to people, you need to avoid distractions

  4. I agree with your pointers, great advice,indeed these are common mistakes people make.Number 3 is quite interesting now that you mention it.
    I started building a website yesterday.I like the images thats why I chose it but I have one problem with the rest of the page, the background is blue and the text is also blue.It looks kind a dull, it needed a darker shade of blue.I hope I can change the text color

  5. Mind if I add to your list one of my own I put together almost 3 years ago entitled:
    the Seven Deadly Sins of Church Web Design?

    Scary thing, most, if not all of both your points and mine are still relevant!

  6. THIS IS GREAT INFORMATION FOR A FIRST TIMER LIKE ME THANK YOU.

  7. I did’t make any of the mistakes you mention but in another direction my site looks good (to me) in FireFox ver 2, NetScape ver 9, Safari ver 3; somewhat different in Opera 9.21; unacceptable in IE ver 7, SlimBrowser ver 4.1, Avant ver 11.5.

    I haven’t paid yet as I’m still awaiting my Pastors acceptance of the verbage. I’ve told him he had to approve what I put on the page but not the layout. It’s my intent to keep the page very simple without advertisements.

    My question is why does it not look the same in all the browsers?

    If I’ve asked the question in the wrong place would you forward it to the proper place and tell me where to go. I’m used to being told where to go as I’ve been married for 50 years.

    Wiley Alston Jarrell
    15610 Edenvale
    Friendswood Tx, 77546
    wajarrell@earthlink.net
    281-482-3671

  8. Wiley, regarding your question about browsers – they appear different because each vendor has their own interpretation of how the HTML rules are interpreted.

    For me, going POSH – that is with plain old simple HTML – and driving the layout with CSS gives me the best results across browsers.

    That said, and this isn’t to leverage this site to pump-up mine, but relevant to your question, this article I posted last week might help you along the lines of cross-browser testing:
    How to test your site across multiple browsers

  9. I really want to thank you for taking the time to give some tips as to how to make our websites more “user friendly” and appealing to readers. I took some notes and will keep them to refer back to while working on our church website. Although we didn’t do anything that you had mentioned as “don’ts”, it was purely by accident that I didn’t! :) Thanks again.

  10. The information was great and I really appreciate the tips especially if you’ve never done a website like myself. If you read this how about going to my website and leave a comment on how you think it is…Thanks!!

  11. I think this is terrific information for new users of web site design.

Trackbacks/Pingbacks

  1. www.gospelshout.com - Jul 10, 2007

    » 5 Things to Avoid in Web Design

    When it comes to designing your own website, the sky is the limit! You can make the site look as abstract as your mind can imagine it. However, there are a few things to avoid when putting your site together. I’ve compiled a list of 5 things to be aw…