Web Design

"Plus Points to Good Website Design"

[What's inside?]

Additional Keys to Good Design

Site Test

You should constantly test your site with different browsers to see if they had problems displaying your site while working on the design.

Sometimes certain design may look fine on a browser but a bit distorted on another browser due to different code interpretation among the browsers.

If that happens, tweak your code and design to make sure all major browsers are able to display your site properly.

For your info, it's ok to download other browsers on your computer even though you already have a browser on it. There won't be any conflict between them.
Using Colors for Text and Background

As a rule of thumb, the text on your web page should be in contrast with the background (preferably dark text on light background, eg. black text on white background).

Our human eyes are being "technically built" to see darker things in bright surroundings under the influence of the visible white light, that explains why we're so used to reading books or newspapers with black text on white background.

And this convention should not change in the next 100 years.

Look at those big time companies like Google, Yahoo, and Microsoft. What color schemes of their text are they using to display information?

Mostly dark text on light background, right?

Not necessarily you have to have black text on white background, you can have dark blue text on light blue background, or other combinations.

Of course if you want to break the convention and go for light text on dark background (like the web page below that I've extracted from a website), go ahead.

But honestly, usually light text on dark background is used sparingly for warning and attention grabbing only.

If you're using this combination to display your content (like the web page above), then you may wind up losing a considerable number of audience just because they find it eye-hurting and uncomfortable to read so much of your content under that color combo.

Is that worth taking the risk? Think about it.
Use Browser-Friendly Text Font

Do you know that if you use font types that are browser-unfriendly, your website visitors will either get to see garbage characters or nothing at all?

That being said, the safest way is to use browser-friendly font types like Arial, Helvetica, Tahoma and Times New Roman.

However, if you wish to use another type of font which you like very much but are not sure if it'll be supported by major browsers, then you can do this:

Set to include multiple font types like this in your web page after <head> and before </head>:

<head>
<style type="text/css">
body {font-family: your-special-font-type, arial, helvetica, sans-serif;} </style>
</head>

This code simply tells any browser that if they do not support your-special-font-type, then they should display the second choice that is Arial, and if they do not support Arial, then they should use Helvetica, and so on.

On top of that, arty fonts (like Mistral or French Script MT) are not so easy to read even if the browsers do support.

Also, use a font size of 10 at least. I've seen some website owners displaying all their content in size 8, when I saw that I didn't even want to read even though I was able to see.

This is font size 8. Do you like it if I display all my content in this size? You may not feel it's small if you're viewing with the 800 by 600 pixels screen resolution. But if your screen resolution is 1024 by 768 pixels or finer and you keep on reading so small a font size, then those eye specialists will be happy to welcome you.

Spare your visitors' eyes and let them have a comfortable read of your content. They get the information they want and you get a better chance to clinch a business deal. Win-win.
Firing Up Your Page Loading Speed

Graphics/images may look good on your site, but you can't change the fact that most people go online are to look for text-based information.

Yes, admittedly graphics/images may spice up your site, but if you put too much, especially the irrelevant ones, your site will take the world of time to load.

Nowadays, web surfers are getting more impatient than ever. If your loading speed exceeds more than 8 seconds, they will say "bye bye" to you forever.

As a result, no matter how beautiful your website is, no one gets to see.

Bottom line is, put relevant graphics/images only when necessary. Don't put them up just because you want to fill up unused space.

However, if you do need to display lots of graphics/images on your web page(s), then here's a trick personally from me that could help to fire up your page loading speed.

The trick is to call up your images through CSS (Cascading Style Sheet) as backgrounds.

Let me show you how this can be done.

For example, to call up your 100px by 50px image as background, first you have to set a class for your image in your CSS file, like this:

.cuteimage
{
background: url(yourimage.gif);
width: 100px;
height: 50px;
}

Then you include this HTML code in your web page where you want the image to be displayed:

<div class="cuteimage"></div>

The reason why we do this is because browsers basically download background images after everything else. That means, browsers will download the text first so that your website visitors can quickly access to the information without waiting much.

That way you won't have to suffer the loss of prospects due to slow page loading time. Great, isn't it?

Oh, one thing need to tell you... because you're not using the <img> tag, so there's no alt text to display upon mouse over.

Not to worry though, if you want to have some descriptive text to display when someone places the mouse over the image, you can add title="your descriptive text" in (see below).

<div class="cuteimage" title="your descriptive text"></div>

Note!
If users had the [color] option disabled in their browsers, all background images will disappear, including your CSS-embedded images since they are background images also. But... who would do that?
Uncluttered Content

Having content and graphics all over the places on the web page serve no purpose.

No focus for your web visitors and they don't know where to begin with, they will just click and go.

The key is, present your web page in a tidy, clean and uncluttered manner so that at first glance your visitors know exactly where to find what they want to find on your site.

Break up long, wordy paragraphs into bite-size chunks help visitors read better and thus more. This is one way to make your web page look tidy and uncluttered.

Another way is to minimize the amount of content by showing only what's relevant and necessary to the visitors.

Note!
To minimize the amount of content doesn't mean you cannot write long content, the key is to present content pertaining to what you want to offer and what the visitors want to see.
Spelling and Grammar

Who says doing website need not bother about grammar and spelling?

Imagine if your content has lots of spelling and grammatical errors until your readers find it hard to understand, how long do you think they'll stay on to figure out what you're trying to tell them?

Off they go right away and you'll never see them anymore.

So, always check your content for spelling and grammatical errors. This will earn you points in terms of professionalism and also show that you respect the readers.

You can copy your content onto MS Word and then click on [Tools] -> [Spelling and Grammar...] to do the check. Alternatively, you can use the spell/grammar check feature in your web design tool, if any.

Faster than manual check.
Set to Fit the Lowest Screen Resolution

Lots of website owners do not realize the importance of screen resolution.

Mostly our standard screen resolution is 1024 by 768 pixels. But still many people are using the 800 by 600 pixels resolution because the text is larger and easier to read.

That means, you should make your website to cater to those who are using 800 by 600 pixels resolution so that they won't need to scroll to the right in order to see all your text.

For example, if you're currently not using the 800 by 600 pixels resolution, I want you to set to this resolution now so that you'll understand what I've said.

Go to [start] -> [Control Panel] -> [Display] -> [Settings] and then scroll the pointer to point at the 800 by 600 pixels position (as shown below), then click [Apply].

After your screen resolution has changed, you'll see that this website do not need you to scroll to the right in order to read the text on the right. Right?

On the contrary, if you look at the website below (see the circled part), there are text on the right which you'll have to make an effort to scroll to the right in order to read them.

We all have gotten used to scrolling up and down but not left and right, so this factor is strong enough to shorten your visitors' time span on your website and click away for others.

Don't assume they will always do the right scroll, they won't.

If you were to use the 800 by 600 pixels resolution, and you hop on a website that requires you to scroll to the right, you won't stay there for long also. So, keep this in mind.
Feedback

Sometimes it's pretty difficult to judge your own work because it's done by you and so you might subconsciously and unknowingly think it's a masterpiece from a "great master" - yourself.

Don't get carried away by such feeling. Be open-minded and receptive to advice or criticism.

Get your friends or family members to surf your site and critically feedback on the navigation experience and the entire feel.

Someone who's not involved in the design of your site is your best site tester.

Gather feedback and comments, then edit and improve until it becomes perfect.

Remember, your website is to cater to the visitors' needs, not your personal preferences.