Web Design Guidelines. Clarity is your number one concern. The user should have a clear idea of what information you are trying to present. The user should

Web Design Guidelines


Clarity is your number one concern. The user should have a clear idea of what information you are trying to present. The user should be able to quickly navigate to the desired portion of your site.


Consistency is the most important coding principle. The style of the code should be the same throughout the site (not just the current document).


Readability should be high. Others should be able to look at your code and quickly understand what you are doing.Remember that you are not the only one who will be updating the pages you create. Use carriage returns and tabs to build a hierarchy and to separate portions sections of the page, but don't get carried away with this; you can have too much white space.

Web Design Guidelines Provide clear, consistent navigation aids. On each and every page, tell your users where they are and how to get to where they want to go. Put your organization's name on every page. Avoid excessive menu levels; try to make every document available within one or two mouse clicks. Make the home page available by a single mouse click. Avoid words like "back," "return," and "home" because they are potentially confusing to novice Web users and depend on how the user found your page (your menus, or a search engine?)

Web Design Guidelines Provide clear, consistent navigation aids. Build a consistent look and feel for all the pages on your site by repeating graphics, fonts, colors, page layout, navigation, etc.A consistent pattern is perceived as well planned and increases viewer confidence in the information provided. Establishing a distinctive pattern that repeats throughout your pages helps the viewer determine the location and organization of information and increases usage and legibility.


Content is king. Answer users' questions, problems and needs. Twirling logos and glitzy graphics do not substitute for meaningful information.


Proof your pages for proper grammar and spelling. Bad grammar and misspelled words make users wonder if your information is as sloppy as your English.


Encourage users to contact you, and respond promptly when they do. This can be a simple e-mail link or an elaborate form. Provide a contact link on every page, not just the home page. The link could be to an individual e-mail, a generic webmaster e-mail, or to a page that lists everybody in your office. The latter two options are easier to maintain if your webmaster changes.

Web Design Guidelines The Load Time Should Be Kept Minimal. Design pages that load quickly. Slow speed is users' top complaint about the Internet. Users also hate to scroll, so put the "meat" in the first one or two screens.Less than 40k total file size per page, this includes all images. You can check load time and much more at Web Site Garage. Make a quick-load or text only version of all graphic-intensive pages. Warn visitors of pages that are large and offer an alternative if possible.


Never Say UNDER CONSTRUCTION! If it is under construction it shouldn't be public. Instead, announce release dates of new material. This improves traffic to your site.


BalanceYour goal is to achieve an optimal balance between content and visual appeal. Consider shape, color, and contrast of page elements. Use similar shapes and complimenting colors for elements such as banners, bullets, buttons, or graphic icons.


Simple BackgroundBecause legibility is so important, a simple background is best for text pages. Tiled and patterned backgrounds are very distracting and greatly reduce the legibility of a page as well as increasing the downloading time.


Less is best.Always remember the basic rule: Less is Best. Be as succinct as possible. Include only important information and use graphics, sounds, or video clips that enhance the message.


Writing StyleUsers skip around more when browsing Web pages than they do when reading print pages. Text is harder to read on the screen than on paper. You need a more concise writing style: short words, short sentences, short paragraphs. More headings and lists.


No blinking text. It is, in the opinion of most people, annoying and should be avoided. Many browsers no longer support this tag for this reason.


Avoid Centered Text Text is easiest to read when the left margin is straight. Centering gives a ragged left margin and thus is not as legible as left justified text. Therefore, centering text is to be avoided except for short headings or titles.


Page Length So viewers will not need to scroll a lot, try to keep your pages to around 3 screens' worth of information. This is equal to about two letter-size pages or approximately 72 lines of 12 point Helvetica text. Assume that a screen is 500 pixels by 480 pixels. Break up lengthier pages into smaller linked pages. This creates a modular design that will also make it easier to add or update information at a later date.


Use Lists or Block Quotes Text is most easily read when lines are no longer than three inches. Because the width of text blocks are controlled by the viewer's window, one way for authors to limit line length is to create lists in short phrases instead of using full sentences. Another way is to use the <Block Quote> code. This indents the text on both the left and right margins, reducing line width.

Web Design Guidelines GraphicsDesign graphics for 640 x 480 monitors and 256 colors. The meaning of icons and buttons may not be intuitively obvious to your users; supplement them with text. Supplement image maps with text navigation. Use horizontal rules sparingly. They tend to break up the page.

Web Design Guidelines GraphicsAlways use the "ALT" attribute on graphics, for the benefit of those who browse with graphics turned off and for those using a screen reader or text-based browser. To speed graphics loading, include the "HEIGHT" and "WIDTH" attributes of your graphics. If you need a large and a small version of a graphic, make two versions; do not use height and width to resize them on the fly. Always test your pages with graphics loading turned off.


Avoid animated GIF's. They can be annoying, have higher load times, and they can literally send some people into seizures. However small, occasional, well-planned, and tasteful animations can enhance a rather boring site.


Width of Graphics The default width for most browsers is about 500 pixels. By limiting the width of any graphic material to less than 500 pixels, you are assured of your graphic fitting onto most screens. Larger graphics may be too wide for a computer screen or unable to print on letter-size paper without being cut off.

Web Design Guidelines ColorFor color compatibility across platforms, always use the Web safe color palette. If you change background and/or font colors, make sure there is sufficient contrast for good legibility. Avoid white or light text against a dark background. Browsers don't print the background color, so the printout is unreadable. Consider the color blind and visually impaired when setting colors.


LinksThink carefully before changing link colors. Many users are strongly attuned to the default blue and purple for links. If you do change them, be consistent throughout the whole site. Many Web sites at Colorado State, including Cooperative Extension, use gold and green. If at all possible, avoid "click here" wording; it's amateurish.


LinksIf you link to commercial sites, include the CSU disclaimer. Make sure you're not opening yourself to demands from other commercial sites for links to them as well. Check your links regularly to make sure they are still valid. Web pages frequently move or disappear altogether. Bad links detract from users' confidence in your site.


Java is Great in very few cases. Only include applets when it is the best solution for necessary content. Get your idea approved before including an applet.


Frames. You should avoid the use of frames unless you have a special purpose for them. Frames can create complications with printing that some users have difficulty managing. Search engines have problems indexing pages which require frames. If you use frames, include the <NOFRAMES> tag set with an alternative method of navigating the site.


TablesUsed wisely, they can be useful for page layout. Screen readers and text-based browsers read straight across the monitor. Plan tables so they make sense when read this way, or provide a non-table version of the page.


UsabilityTest your designs with several people not involved in the design process, including some target users. Make sure they test it with a variety of hardware, browsers and connections.


Search EnginesUse a short, descriptive TITLE tag. Search engines display the first 60 to 70 characters. Use META tags for description and/or keywords. Some search engines display your description (from 150 to 395 characters) if you provide one, otherwise they construct their own. Write the first few paragraphs so they contain keywords people are likely to use in searches.

Web Design Guidelines Getting to the top of search engine resultsAlthough the majority of search engines collect information in the same way, it is the method of how this information is used that makes each search engine different. 1. Try to avoid using frames2. Make good use of the basic hidden Meta-tags3. Only use relevant words, avoid repeating them too often4. Try to place your keywords in the first 200 words of text.

Links

www.webstyleguide.com/index.html?/interface/interface.htmlwww.utexas.edu/learn/style

Documents

Web Design Guidelines. Clarity is your number one concern. The user should have a clear idea of what information you are trying to present. The user should