![]() | WEBSITE LAYOUT TIPS! | ![]() |
Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | 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 MenuHave 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 SchemeThere 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 ImagesOnline 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 CompactAnother 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 ContentOnline 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 PagesDid 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 FilesIf 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 :)
Nearby Lessons: • Lesson 1-10 HTML Forms• Lesson 1-11 The Head Section • Lesson 2-00 Website Layout Tips Back To Top Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | Partner Links |