ANIMATIONS
Animations can be effective for drawing attention but should not be over used as they slow down page loading. There are many websites that have downloadable animations (some for free, most for a price). You can make your own animations from a series of GIF or JPEG files using animation software (see LINKS). Some website design products like Web Page Maker allow you to create animated text (e.g., moving/marquee text).
AUDIO
Web pages can be designed so an audio file is played when the web page opens or a web page event is initiated (e.g., a is button clicked). Most people find the automatic playing of a sound file annoying so it should not be done unless it is truly appropriate for the web page,. Use of a person speaking audio file should only be used when necessary to supplement a presentation or tutorial.
BACKGROUNDS
A background is a color or design that fills the entire screen behind all the text/graphics. Years ago most websites used backgrounds but now few successful professional websites use backgrounds. Backgrounds do not add value to a website and are often distracting. They cause the website to take longer to load and can make it harder to read text. Dark backgrounds are especially bad and can adversely affect the readability of printouts.
CLEAN LAYOUT
There is a tendency of new web designers to want to make web pages fancy or exotic with lots of colors, graphics, and complex designs. You need to keep it clean and simple if you want to maximize the possibility of people using the website. If a website is complex and cluttered and prospective customers have trouble finding the desired information they will quickly give up and go to another website.
COPYRIGHT
NOTE: The following is the authors understanding of the copyright rules and should not be considered legal advice.
There are two copyright issues to be considered. If you copy information from a copyrighted source (printed matter or website) you may need to get the permission of the copyright owner. For example, if you do a screen capture of a copyrighted graphic or use text from a copyrighted item. Any portion of a website should be considered copyrighted unless it is specifically stated that the information/graphic is free. Note; a copyright notice does not have to be displayed for it to be copyrighted. You can generally quote small portions of a copyrighted source as long as you do not quote a "substantial" portion. For example: The www.doawebsite.com website says "There are two copyright issues to be considered."
The second issue is the need to copyright a website. Copyrighting of any published work (including websites and emails) is generally considered to be automatic. There may be some additional legal benefit from taking formal action to copyright a website. For example, legal action regarding copyright infringement may not be possible unless the published matter was formally copyrighted. Copyright registration costs $30 and the forms and instructions can be downloaded at: http://www.copyright.gov/forms/. You should first read the information about the copyright process at: http://www.copyright.gov/circs/circ66.html.
FONT TYPE/SIZE
Fancy/unique font styles should not be used as they are often hard to read and do not make the website more effective. Only simple easy-to-read fonts should be used. The most commonly used fonts are the Arial, Tohoma, and Verdana styles because they are very easy to read on a computer screen. The second most common fonts are the Bookman, Century, and Times styles. The most important thing is how the font looks on the screen and how easy the text is to read. A font size of 11 or 12 point is recommended for body text. Headings should be bold and maybe a little larger. Size 10 may be acceptable but smaller sizes should rarely be used. View a designed page at both 800 X 600 and 1024 X 768 resolutions to see how the font looks (see SCREEN RESOLUTION for how to toggle screen).
FRAMES
A web page can be divided into frames with each frame having it's own scroll bar. Years back when this capability became available everyone was doing it because it seemed a neat thing to do. Webmasters soon found out that the use of frames confused and annoyed users. Frames should only be used if there is no other way to effectively present the material. Frames can cause undesired results when the Back button is used and when a page is printed. They can also prevent a user from emailing a URL.
GRAPHIC IMAGES
Graphic images (pictures, illustrations, logos, etc.) require a lot more data bits than text for the same space used. Web page loading time is determined by the number of data bits that have to be sent over the Internet from the website server to the viewer's computer. This means that pages with a lot of graphics take longer to load and the prospective customer may give up before the page finishes loading. This is especially true for dial-up connections. You can decrease the data bit size of a graphic file by using screen capture software to create a new file from a displayed image. For example; a 170 Kb digital camera picture file can be reduced to a 65 Kb file with the use of a screen capture program like PrintScreen 2000. Graphic files used in a web page should normally be GIF or JPEG (jpg) files. JPEG files are usually a little larger than GIF files but the quality of JPEG files is better.
NEW WINDOW
Links can be programmed to open the destination page in the same browser window or in a new browser window. The default is usually to open the destination page in the same window. This is fine for moving around in your website but not for referral links when you want to send someone to the website of a product you are promoting in hopes of getting a referral fee. If you don't use an "open new window" link your prospective customers may never find their way back to your website. Most website design software allows you specify how you want the destination window to act when you create the link. If you are inserting an HTML object into a web page you may have to edit the HTML. Following are examples of how the HTML should be coded.
Open in the Same Window
<a href="https://www.doawebsite.com" target="_top">
Open in a New Window
<a href="https://www.doawebsite.com" target="_blank">
PAGE LENGTH
The ideal page length is where everything is displayed on the screen without the need to use a scroll bar. Sentences and paragraphs should be concise and short. The goal is to communicate, not to impress a prospective customer with your ability to write flowery narratives with big words. Consider using a "Next" (or similar) link to split the information up into two or more pages. An exception to this rule may apply for FAQ and LINK pages where the page is primarily text. Even such pages should be divided with an index or search box if they are more than about 200/300 lines.
SCREEN RESOLUTION
Computer screen resolutions can be set to make the displayed information larger or smaller. Screen resolution is calibrated in pixels. A pixel (picture element) is the smallest element of a computer screen display. The most commonly used resolution is 800 X 600. This means 800 horizontal pixels and 600 vertical pixels are used to compose the complete screen display. As computer screens have become larger many are now using a resolution of 1024 X 768 or higher. If a web page is designed with your computer set for 1024 X 768 and you use all of the screen space it will look fine for anyone that views it using the same resolution. If someone using 800 X 600 looks at it they will only see 78% of the web page and will have to use the scroll bars to view the hidden parts of the display. People are used to vertical scrolling but may be annoyed at the need to scroll horizontally. Also, When a page designed for 1024 X 768 is printed all of the information may not fit on the printed page. As many people still use 800 X 600 it is recommened that you do your web page design with your display set for 800 X 600.
You can easily toggle between the two resolutions as follows:
(This procedure is written for Windows 98 but it should be similar for other versions.)
1. Click on your desktop icon or close/minimize all windows.
2. Right-click the cursor in a blank area of the desktop.
3. Select Properties.
4. Select the Settings tab.
5. Use the Screen Size slider bar to select the desired resolution.
6. Click on the Apply button.
7. Click the OK and Yes button when they appear.
8. Click the OK button to close the Display Properties window.
SPLASH SCREENS
Some sites use the home page (---.index) to display a splashy screen that includes advertising or some sort of fancy introduction with animation and sound. Most people don't like splash screens as they take time to load and rarely provide any useful information. If a splash screen is used be sure to include a link that allows viewers to skip the splash screen (e.g., Click here to Skip Intro).
TESTING
Testing is a tedious and often ignored part of website development. Testing is extremely important and should be accomplished before a web page is published/uploaded. This also applies for each revision of a web page. Testing should be accomplished on exported HTML files, not from within the website design software. You will be surprised at how many things don't work right after you are positive that you have everything perfect. If you make corrections based on the testing you should export and test it again. Following is a checklist of some of the things that should be tested.
- Test all links (text and graphic/icon). Broken links are the most common problem.
- View the display position of screen elements. They don't always look the same in a browser as they look on the design screen.
- Print and read all pages. You will see errors on a printed copy that you did not see on the screen display.
- View all pages at both 800 X 600 and 1024 X 768 resolutions.
- Have someone else proof it a they will see things that you missed and may have some good suggestions.
- If possible view with different browsers (Internet Explorer, Netscape, Mozilla, etc.). Some times a page will not display correctly (or not at all) in certain browsers. This can be caused by using a version of HTML that is not supported by the browser.
- If possible view the pages on different computers. The same page doesn't always display the same on all computers. Use a friend's computer and a computer at your local library. You may have to change how the page is designed (e.g., move items in/out of tables so they display in the correct position).
VIDEO
Web pages can be designed so a video file is played when the web page opens or a web page event is initiated (e.g., a button is clicked). Unless it is really appropriate for the web page, this should be avoided as video files take a considerable time to load and you may lose a prospective customer.
Website Design Tips
