Web Design Tips

3.1 Optimize the page loading time

Images can really make a website look nice when used correctly, but nothing is more annoying than waiting for images to load when they are a way larger size than they need to be. The html width and height attributes let you re-size images, but the user still has to download the original image no matter how you re-sized it with the width and height attributes. Instead re-size your images to the correct size before embedding them into your webpage.

3.2 Don’t make an entire site using flash or java.

Some people think it’s okay to make their entire website just using flash. Flash can be a great thing browser embedded videos or games, but when people start making entire websites using flash, it just becomes annoying. You have to wait for the flash application to download and load before you can use it. And then once you finally get into it, you have all these extravagant animations that may look nice, but can just get annoying when you are trying to find what you’re looking for. Also, flash is unsupported on many mobile browsers like safari on the iPhone/iPod touch, so these users won’t be able to see your website at all.

As we covered in the Basics of CSS part #4 there are multiple fonts that are good to use on the web. Those fonts are:

1. Times New Roman
2. Georgia
3. Verdana
4. Tahoma
5. Trebuchet MS
6. Arial
7. Comic Sans MS
8. Impact
9. Courier New
10. Lucida Console

How fonts should be used

There isn’t really a right or wrong way to using fonts on a web page. But there are things that people will generally tolerate and generally NOT tolerate.

All Caps

People will not generally tolerate a blog post, web page, email, etc in all caps… It’s usually considered shouting and is in poor taste especially on a web page! Avoid using all caps unless it is absolutely necessary!

Bold Text

The same general principles apply as the all caps. Don’t create a web page with all bold sentences or entire paragraphs of bolded text. Reserve bold text for important information and keywords that the user should be aware of.

Italic Text

Italic text is the same as all caps and bold text. Don’t make a web page that has half normal and half italic text or any other combination.. Keep your font style consistent. Reserve Italic Text for very important information that you want emphasized to your readers.

Font Color v. Background Color

This can be slightly tricky because not all computer monitors look the same and have the same colors. If you’re comparing an HP Notebook that is a year old to one that was manufactured only a month ago, then they might be more or less the same. But if you’re comparing the latest iMac to the HP that was made a year or two ago you might run into some major differences.

Bad Choices

Here are some poor choices for font color: “Blinding Lime Green” and other colors that really clash with your site in a bad way.

Anyhow, not all colors are bad on web pages! It depends on what is behind the text that makes all the difference in the world to a user. Consider this: Some good stuff!, Some more good stuff, Good stuff… I think we get the idea.. The three colors in the RGB (Red, Green, Blue) clash in any way you can possibly think. At all costs.. Try avoiding using these colors. Here are more examples!

Some text here, Some more text here, and especially… text here.
Clearly, we can see (and might give you a headache too) how certain colors can clash. You don’t want a visitor have to work in order to look at your site.

Using too colors can easily make your web site look like a circus act to visitors and even though it looks nice, different colors can actually tired your visitors out just by reading the content of your site!
Note: I use font in a very general sense. Fonts can mean anything from pure text on the page or links, etc.

Font Size

There are special places for large text size. Using a slightly enlarged text for readability is perfectly acceptable and probably appreciated for some visitors of your web site! But you can over do it by using an excessively large font size very quickly.. In fact, in your word editor you probably use standard 12pt font. Well depending on the styles you have on your web page and font, 12pt font can look very large! So be weary with text size!

2.1: Autoplaying Sounds and Videos are distracting

Ever been to a page that starts playing music automatically when you load it?  Either you’re already listening to music and you start hearing these other sounds interfering.  Or you’re in a nice quiet room, didn’t realize your volute were up so loud, and then all of a sudden this video and sound starts playing super loud.  This is extremely annoying.  Also users on slow connections, may not like you wasting their time loading sounds and videos that they don’t want to listen to in the first place.  Of course, if the main idea of your site is to play sounds or videos, then it’s okay to play them automatically.  Take youtube for example;  when somebody clicks on a video on youtube, they very well know that they are about to play a video.  It’s the unexpected, and pointless sounds and videos that are the problem.

2.2: Animations and blinking text is amateur

How can anybody concentrate on reading your site when you’ve got a gif image and some big text flashing at them in the corner.  It’s like trying to read something while somebody is yelling “Hey look over here!” every five seconds.

2.3: Scrolling text isn’t affective

Scrolling text slows your visitors down.  They have to read at whatever speed you set.  If they want to read it quickly, they have to sit there and wait for the text to move over enough to see it.  Or they only catch the last half of the sentence and they have to wait until it wraps all the way around again to see the beginning.

2.4: Nobody likes pop-ups

Just think about it!  Does anybody like seeing pop-ups ads all the time?  Think about your visitors and how to make an enjoyable experience for them.  If you want to advertise, do it on the page and not in a separate pop-up window.

2:5: Background images look stupid

A large background picture that is repeated over and over makes it so you have to squint just to read the text and on top of that, make your page load slower.  This is annoying.  Stick with simple backgrounds.  Look at professional websites, none of them use large repeating picture backgrounds.

After I wrote all these tips I realized, these are exactly the reasons I hate MySpace.  If you’ve ever visited a MySpace page, you’ve probably encountered most of these problems and seen how annoying they can be for the visitor. Remember to keep your visitor’s interests in mind when designing your site.

This is the start of a new series of web design tips.  In each article, we’ll provide a new tip, that can be very useful in creating your website.

This first tip isn’t even exactly design, but that’s why it’s the first tip, it’s even more important than design.

The fundamental reason that a website exists is to provide something that is useful or provide some information that is of value to the visitor.  If you are missing that important element from your page, you need to fix that before you worry about design.  The content of the page is the number one most important thing on every web page.  You could have the nicest looking page ever, but if it doesn’t provide something of value, nobody has any reason to visit it.  Ask yourself: What is this page for?  How can the page be used?  Is it a waste of time for your visitors?

This also relates to advertising.  Advertising can be a great way to make money, but don’t completely drown out the page by ads.  It can be temping to try to cover your page almost entirely in ads in order to make the most money.  But if you don’t have very much content of value, people will stop visiting the site and the end result will be less money from advertising.  I recommend no more than a 25% advertising to 75% content ratio.  Anything more than that, and the advertising takes away more from the page than it’s worth.