Website Layout Tips @ OWDC

LESSON 2-00: Website Layout Tips

Web Design Lessons > Lesson 2-00: Website Layout Tips

So, here we are at the second stage of your free online web design course. In this lesson, I'm going to give you some useful website layout tips.

Do Not Hide Your Navigation Menu

Have you ever been to a site and couldn't navigate? I have! And, believe me, there are A LOT of them. Some webmasters hide their website navigation links so well that it is impossible to get past the front page.

It is very important that you make your sites simple to the visitor's eye. Do not confuse your visitors by putting your navigation menu to the moon. Make it easy to spot, so that your visitors know what your site offers.

Do not make the mistake of using buttons that don't have any indication of where they lead to (i.e. buttons with no labels such as "Home" or "Contact Us", etc.), unless the user hovers their mouse over them. That kind of design approach is GUARANTEED to confuse your visitors. Let me repeat this once again: do not hide your navigation menu!

Choose The Right Color Scheme

There are too many people out there that use dark grey text over a black background. Do not be one of them. It may look "cool" to you, but it will probably give your visitors a hard time reading your material. Experiment with different colors for your links, backgrounds, menu items, logos and graphics. You'll know when it feels "right".

In order to pick the right color scheme, you ought to know your way around color hex codes and use "web safe colors" (a color palette consisting of 216 colors that are compatible with both Windows and Macintosh platforms). Web safe colors and hex codes were explained in Lesson 1-04.

Do Not Use Bulky Images

Online Web Design Course frowns upon the use of bulky images, because images with a huge filesize will impair the download speed of your web page greatly. That's why, you had better choose your web graphics & images carefully - keep in mind that a visitor will wait an average of only 10 seconds before s/he decides to leave your website.

There are two major image formats used on the web: GIF (.gif) and JPEG (.jpg or .jpeg). The GIF format is used for images that do not contain a huge diversity of colors. So, do not save a photograph with a .gif extension, because it will probably take too much space. Use GIF for cliparts, buttons, background images, etc. Use JPEG if you want to add your photograph to your website. Detailed information on GIF and JPEG file formats can be found in Lesson 1-07-04.

Anyway... In order to change the filesize of your web graphics, you'll have to purchase a good image editor. The best image editor on the net that has been specifically designed for the web is probably Macromedia Fireworks MX 2004. I use and recommend it - gets the job done very well giving total control over the filesize of my images.

Make It Compact

Another mistake that many webmasters make is not taking into account the different screen resolutions that their visitors might have, and not making their websites compact (small enough to fit one screen width). The most popular screen resolution that web surfers use is 800x600 as indicated by statistics. If you do not make your websites compatible with 800x600, you're not really appealing to the majority of your visitors.

To avoid having a horizontal scrollbar along the bottom of your website at 800x600 screen resolution, you should choose the width of your tables, images and such componens carefully. If the width of an image you want to add to your page exceeds 720 pixels (NOT 800, as the left and right margins take up 80 pixels already), simply resize it to fit using an image editor or do not use it. Also, when defining a width for your tables, use percentage values instead of pixels. You can find detailed information about HTML tables in Lesson 1-05.

Break Up Your Content

Online Web Design Course advices you not to try and fit hundreds of pages of content into one single page. Divide your content into reasonable sections so that your visitors will not have a hard time finding that little specific info they are looking for. It's a huge waste of bandwidth not to divide your content as well as a pain in the you know what for your visitors.

Plus, more pages means more advertising space for you ;)

Reduce The Filesize Of Your Web Pages

Did you know that the space and line breaks inside the source code of your web pages can actually take up some considerable space? You can get rid of these by going to the end of the first line in your document by pressing the "End" key. Then do a sequence of Del+End+Del+End... until your cursor reaches the end of your whole document. Remember to compress and clean your source code by the aforementioned method before loading onto the server. You can do it manually or with good freeware programs such as Absolute HTML Compressor (do a Google search in the search box at the top of this page to find and download it). If you check out the source code of any web page on this free online web design course, you'll notice that my code has been compressed and cleaned.

Use CSS and JavaScript As External Files

If you are using the same CSS or JavaScript on most of your pages, it is a better idea to call them from within the document as an external file, rather than embedding them into every web page. Web browsers cache external CSS (.css) and JavaScript (.js) files, so this method will save a lot of bandwidth.

To call an external CSS file from inside your documents, add the following code to the <head> part of your pages:

Where "your_css_file" is the name of your external CSS file.

To call an external JavaScript file from inside your documents, add the code below to the place wherever you want the script to appear on your site:

Where "your_js_file.js" is the name of your external JavaScript file.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

That's all! If you have more website layout tips of your own, please send them to me. I'll include them with full credit :)

Previous Stage | Lesson Index

Nearby Lessons:

• Lesson 1-10 HTML Forms
• Lesson 1-11 The Head Section
• Lesson 2-00 Website Layout Tips

Back To Top