web by crissie ballard

(Upper-level pages include your home page and pages linked off of it; lower-level pages include pages 3 or 4 mouse clicks deep)

Proper Page Design 1. The most important thing on your page is the information! This point cannot be stressed enough. Visitors do not re-hit your page because it has pretty pictures on it, but return over and over because you give them good, updated information. 2. Put the most important information at the top of each page. When a page appears (known as the first pane), the information that shows without scrolling should be important and enticing (if it's not, why scroll?). Impatient users will not scroll without a good reason. Each page should have a good, descriptive title that displays in the title bar. This is used by many search engines, as well as being the representative text in bookmarks. 3. Don't force your users to click forever to get to the information they want. Waiting to move from page to page is very frustrating, and will cause many users to leave your site. Users should not have to click more than 3 times to get the facts they are looking for. 4. Build your page so that the first screen of text and key images appear in under 5 seconds over a 28.8 modem. Remember, Internet users are very impatient (and getting worse by the minute…). 5. Keep download time of remaining pages to 30 seconds. Many users will bolt after about 20 seconds, while others will hang around for about 25. At 30 seconds the vast majority of visitors will hit the back button. 6. Index page should require a minimum amount of scrolling, none if possible. Your home page should offer no more than 15 (give or take) categories in order to minimize the need for scrolling. Lower-level pages should avoid the need for excessive scrolling unless the page is a document. If at all possible, avoid horizontal scrolling. This is a Web page kiss of death. Pages should be no more than 480 pixels wide (this is the Netscape default page width). 7. All of your pages should be no longer than two to four screens per topic (at 640X480-screen resolution). 8. Group your information by topic in separate areas of your web site. Don't try to cover everything on one page - but don’t spread everything out so much that your users are spending all their time on your site searching for what they want.

The 60 Key Elements of Effective Web Page Design Excerpts taken from “Designing School Web Pages,” Copyright © Alief ISD 9. Consider using a menu page or site map. Menu pages are intended to help visitors move quickly to what they are looking for. These should contain lists of choices with sufficient descriptions to let the user know where they go, and should include links to all information being offered. 10. Navigation is a snap when link lists are always on the left (or always at the bottom, or always at the top, or always…). At the very least, users should be able to get the main page from every lower-level page. 11. All pages should include a link back to the home page. Some visitors may come to your site at a lower-level page (through links from other pages or the use of some search engines). You want these visitors to be able to get additional information. 12. Include a contact email address on every page. Make it easy for your visitors to give you feedback and/or ask questions about your site. 13. Make all links clear! A common trend today is to create ‘secret links’ – links on your page that are not clearly marked so that your visitors have to ‘discover’ them. All links should be obvious with good descriptions so users know exactly where they lead Links should never be more than 2 lines deep - otherwise, users think they are multiple links. When linking to Web pages on the Internet, be sure to take users directly to the information you want them to see. Avoid links to non-related upper-level or menu pages. Some pages ask that you link only to the main page, be sure to abide by their wishes. Check these links often to make sure they are still active or still point to the information you want to share. 14. Use space effectively. Putting twelve links in a row instead of in twelve vertical lines of text (and still look decent) will save space. Maintain blank space (also called white space…even when it is not actually white). The page background should show on at least 30 percent of page. This may seem like a lot, but consider what percentage of white space shows on the page in your hand right now. Any less white space and the page looks cluttered. Your background image (if any) should fit the overall theme of the page. 15. When including sound, less is always best. Never include a song as a background sound. Remember that every time users visit the page, for instance with the back button returning from a second level page, the entire song will play (again…and again…and again). Sound bites, short sounds such as a doorbell ringing, may be OK to include (but even they can grow tiring), but if you want to include an entire song be sure to give the user controls so they can turn the song off. 16. Keep file size to approximately 50 KB per page, including images (image pages, as long as you warn users about them, are excluded). If you must use larger pages, be sure to warn your users. 17. Generally, you shouldn’t use frames unless it adds to the content of your page. Remember that some people still use browsers that don’t support frames (they are in the minority, but you don’t want to leave them out, do you?). Additionally, many browsers display frames differently 2

The 60 Key Elements of Effective Web Page Design Excerpts taken from “Designing School Web Pages,” Copyright © Alief ISD not to mention the fact that many users dislike frames. Since you want your pages to be viewable by the largest number of people possible, offer a frame-free version of your page. Even if the content is watered down, it is better than nothing. Also keep in mind that frames can present problems for users who want to print out your web pages. Often times, the content of all frames will not print. 18. Indicate the company or school’s physical address. You want all users to be able to visit your site in person. At the very least, include a contact phone number.

Look of the Page 19. Maintain a consistent page flow, tone, and style. Start with a simple index-opening page and branch out from there. All text and graphics should be consistent in mood and theme. Remember that your Web page is not a good place to show off all the really cool fonts you just installed on your computer (besides, if visitors don't have the font installed on their system they will see the default browser font, usually Times New Roman) or all the pretty colors your monitor can display, or the latest JavaScript. Each major section should use like colors, fonts, and layouts. Inconstancy in design indicates poor planning and unprofessional design. 20. Use no more than three fonts (in graphics and text) per page. Any more is considered unprofessional. Use large enough font so that everyone can read it. 21. Keep page colors to between two and four dominant thematic colors. Avoid colors that are hard on the eyes, such as hot pink. 22. Be sure your text and background colors or images contrast each other. No color in the background should be close to the text or link colors. Avoid bright or hard to view colors. Consider avoiding text and background color combinations of red and green or green and blue. Colorblind users may have a hard time reading the text. Avoid background images that use multi-colored photographs. It is too difficult to find a font color that will not have some words or letters disappear into the image. 23. Avoid underline colored text as users will assume these words are links and will wonder why they don't go anywhere. 24. Don't change the link colors unless it helps your overall color scheme. Users are used to links being blue and visited links being purple. Don't make things hard on your users! 25. If possible, avoid dark backgrounds with light text. This setup makes it difficult to print. Users must choose between printing the background (lots of ink) or printing the text (prints lightly and is hard to read). 26. Break-up blocks of text every 50 to 100 words (except in long articles or stories) using a headline, rule, image, etc. Text blocks that are too long look cumbersome and cause few users to read them.

The 60 Key Elements of Effective Web Page Design Excerpts taken from “Designing School Web Pages,” Copyright © Alief ISD 27. Use tables to layout your pages. Tables allow you to precisely control the look of your pages and effectively use space. 28. For greater control of page appearance, use layers (DreamWeaver) or layout grids (Adobe GoLive).

Graphics 29. A minimalist approach is best when dealing with graphics in a Web page. Use few, small graphics, unless larger ones add significantly to the page. Large graphics slow download time and often send visitors elsewhere. Avoid backitis (clicking of the back button to escape 'frozen' pages) at all costs. 30. Repeating images helps keep download time to a minimum. Pages that use the same background image will not have to load new images for each page (images are stored in your computer's cache and accessed from there instead of being called from the server). If each page uses a different background, each change will require loading a new image, which slows everything down. This is also true for in page images, logos, and banners. If repeated, they require no additional download time. 31. Graphics should be kept to a minimum, especially on the homepage (use thumbnails). Warn of all links that lead to graphic intensive pages. Always get permission before using someone else's graphics (include the Internet Explorer or Netscape icons only when linking to either Microsoft's or Netscape's homepage). 32. Use large images only when necessary. Crop all large images down to include only the necessary components. For example, if you have a picture of a building, crop out the 5 inches of grass in front of it and the 5 inches of sky above it. 33. Be sure to include alternate text with all images. These helps users with non-image browsers, have image loading turned off, or are using special software (such as for the blind). 34. Discard images of poor quality. Retake blurry images and brighten dark or hard to see images. Poor quality images denote unprofessional work. All images should be of similar style. 35. Be sure to include HEIGHT and WIDTH attributes in your image code. This causes the browser to create a space for the image while the page loads. Users can thus read the text as the images are loading without having the page rearrange as the images come in. Luckily, most Web page editors include this for you. 36. Use the LOWSRC tag when dealing with a large image. This gives users something to look at and hold their attention while the larger image loads. 37. All graphic links should be clearly identified as links with their destination clearly identified. Don't make your users hunt around to find the links to your information.

The 60 Key Elements of Effective Web Page Design Excerpts taken from “Designing School Web Pages,” Copyright © Alief ISD 38. Be sure that your background images are wide enough so that the images do not tile down the right side of your page. Additionally, if you are using a background picture, be sure that the page is not so long that the picture tiles at the bottom.

Advanced Graphics 39. Choose the correct format for your graphics. Graphics should always be kept as small as possible. When choosing between GIF and JPG, let the type of picture guide you. The GIF format works best for graphics that have bold colors and sharp line changes between the colors. The JPG format works best for photographs and images with gradual changes in colors.

Non-professional Elements 40. Avoid shock pages, or pages over the top that are ‘just trying to get their attention.’ It never comes across that way. Instead, it looks like unprofessional design. Your web site as a whole should appear balanced and attractive—keep it simple. 41. Don’t ask users to make changes in the browser settings (for example, asking users to change things such as width, font size, font style, etc). Keep in mind that many users don’t know how to change the default fonts. When faced with this, many users will simply leave. 42. Your site has won an award – congratulations, pat yourself on the back. Now take that big, usually ugly, graphic off your homepage. Few users care that you have won awards, and even less care what awards you have won. Keep in mind that Internet site awards are about as numerous as NBA playoff spots. If you insist on displaying your site’s awards, place them on a separate page with a link so that users have the option of viewing them or not. Remember that your home page is for information, not for bragging. 43. Avoid BLINK like the plague. Did you know that Netscape threw in the BLINK tag as a joke? Many Netscape users (luckily blink is not supported by Internet Explorer) find it extremely annoying and will actually leave your page simply because it is there.

Administration 44. Plan to expand. Use multiple folders to organize your information on the server so they are easy to find and work with. 45. Consider creating an image directory. It is often helpful to have all your images in one place for easy editing. In addition, if you have more than one person working on your pages they’ll be able to find images that may be used repetitively across the site and won’t have to save multiple copies of the same images in their own directories. 46. The home page should contain a copyright statement covering all lower-level pages. If possible, include copyright statements on all pages. Expect that material may be taken from your page, but be sure to take steps to protect your work if someone else claims it. All material created by you (text as well as images) is covered by copyright law. If you have material that visitors can freely use be sure to clearly state this.

The 60 Key Elements of Effective Web Page Design Excerpts taken from “Designing School Web Pages,” Copyright © Alief ISD 47. Preview, preview, preview…then preview again… Be sure you test all pages that you make. You can't be sure that visitors are viewing your page with the same browser you are not to mention monitor size and resolution. Check your pages by viewing them on as many different browsers as you can get your hands on, not just in the current version of Netscape and Internet Explorer, but in previous versions as well. There are some subtle (and some vast) differences in the way the same browser displays pages on different platforms (for instance, Netscape doesn't display pages identically between the PC and Mac). Also, different browsers, even on the same platform, can display drastically different results. Get as many people as you can to view and critique your pages.

Advanced Elements 48. Let users know what you're using. If you are using special plug-ins or helper applications to display your pages, make sure you let your users know what they are and where to download them. It is very frustrating not to be able to view something. Additionally, don't make your users wait 10 minutes while something is downloaded just have them receive a message that they do not have the necessary plug-in. 49. Avoid scrolling text, whether in the status bar area or a marquee. Many people have come to rely on the status bar area of the browser to supply them with information. Also, if left to run long enough, many of these JavaScript’s will cause the browser to crash. Marquees are only seen by Internet Explorer users. 50. Use style sheets with caution. Many people still use browsers that do not support them. This could mean that some of your viewers won’t see what you intended. Keep your target audience in mind when considering using CSS. 51. Avoid the use of Flash and other animation software, especially on splash (or introduction) pages. In fact, avoid introduction pages all together. It is redundant to create an introduction page with a lengthy 'welcome' message - obviously you are welcoming them to your page or you wouldn't have put the page up in the first place. Keep in mind that most users are impatient and want information quickly. Having to wait for a piece of Flash to finish can be aggravating. 52. Avoid forcing cookies on your users. While many users don’t mind them, and they do provide good information for the Webmaster, others view them as intrusive and potentially harmful to their systems. 53. Avoid using hit counters. These don't actually count the number of visitors to your page, but instead record the number of times the page was requested from the server (for example, when users hit the refresh button, the hit counter goes up). Also, if the server goes down the hit counter will be reset. Information on actual hits can be obtained from most ISP's. 54. Avoid using redirect pages. These are pages that cause the same page to load when a user hits the back button. If you don't know what I'm talking about, good…that means you won't be

The 60 Key Elements of Effective Web Page Design Excerpts taken from “Designing School Web Pages,” Copyright © Alief ISD doing it. Many users are unaware of what is going on, get frustrated, get mad at you, close their browsers, and vow never to return to your site. 55. Use scripts sparingly. Avoid using scripts that create scrolling or moving menus unless they add to the page and move quickly. Slow moving page items are most often just annoying. Don't create pages with automatic pop-up windows. Most users ignore them (thinking they are advertisements) and they are, again, annoying.

Suggestions Specifically for School Web Sites 56. The home page should contain the following: a link to the district home page, the school address, the school telephone number. 57. Never post anything that can lead to the identification of any student. Don't give the 'bad' surfers anything to work with. While the posting of student’s names or pictures varies from campus to campus, never put the two together on the same page. 58. Remember that if you link it you endorse it. Before any site is linked to your school page, be sure that you have visited it and ensured that it is appropriate and relevant. Whether you actually endorse it or not, by linking to a page you have created an implied endorsement. 59. Don’t get the school needlessly blamed. Include disclaimers whenever posting material that is an individuals personal opinion and not the opinion of the school or district. This protects both the school and district from being unfairly associated with potentially controversial subjects. 60. Avoid letting students create important pages in your school site. Students are often guilty of 'eccentric' Web design. Very few will take the time to consider proper page layout and design. Be sure all students who will be creating pages for your Web site are introduced to the elements of proper Web design. Also, when they have completed their pages, be sure to edit them for proper spelling, grammar, and design. Keep in mind that all writing and artwork created by students belongs to them and should only be used with written permission from both the student and their parents