|
|
Web Site Development Best Practices
Following is a list of web developemnt best practices.
All FSU web page publishers are encouraged to review and implement
these techniques in
their web projects.
Site Content
- Structure page content to facilitate scanning (use subheads, bulleted
lists, highlighted keywords, short paragraphs, for example)
- Organize content in invert pyramid style, i.e. most important content
to least important content.
File Management
- Name the first page of your site index.htm.
- Keep filenames simple and obvious.
- Never use spaces in your file names.
- Keep filenames all lower case.
- Use folders to organize your site. Place like items - images, downloads,
audio - in separate appropriately-named subfolders.
Page Design Elements - Navigation
- Match links with the title of the page they link to, so the user
is immediately oriented.
- Take care not to disable the Back button (by using immediate redirects
or opening a new browser window, for example).
- Keep navigation tools consistent and in the same place from page
to page.
- Use site maps or tables of contents for large, complex sites.
- Don’t use underlining for non-linked text.
Underlining denotes a link on the web.
- Include a skip navigation link at the top of each page to allow a
screen reader to jump directly to content on a page.
Page Design
Elements - Formatting & Alignment
- Use consistent alignment (for tables, titles, text, images, etc.)
on all pages.
- Use consistent sizes and spacing for titles and text from page to
page.
- Add white space to enhance the legibility and look of your page.
White space is the empty area on a page that gives the eye a place
to rest and, by providing contrast, highlights the graphics and text
that it surrounds
- Avoid typing in ALL CAPS. Large block of capitalized text are more
difficult to read.
Page Design Elements - Page Size
- Limit vertical scrolling to 1 1/2 to 3 screens of text; if longer,
break into separate pages. Put important content at the top of the
page so that it can be seen in the first screen.
- Design pages to download in as fast as possible. A download speed
of less than 10 seconds (file size of 30K or less) is ideal but difficult
to achieve. Maximum file size should be 50K.
Page Design Elements
- Colors & Backgrounds
- Choose light backgrounds with dark-colored text--the greater the
contrast, the more legible the page.
- Limit using background patterns. If you use them, very low contrast
images work best.
Page Design Elements -
Graphics
- Avoid using images larger than 50K.
- Use a maximum width of 350 pixels for photos.
- Follow the 800x600 resolution guide for the width of your graphics.
To do this, graphic width should not exceed 760 pixels.
- Use a consistent style of graphics from page to page. Repeating the
same graphic devices (bullets, bars, buttons, icons) allows subsequent
pages to load faster.
- Use a graphics program such as Adobe Photoshop to resize large images.
- Learn to scan your graphics.
- Learn to and fine-tune (optimize) your graphics.
- Crop your images carefully to show essential information only.
- Consider use of thumbnail images that link to a larger image.
- Make a text-only version of a graphics-intensive page.
- Use buttons and HTML links rather than image maps.
- Use animation sparingly, it is distracting.
- Avoid "Under Construction" signs.
|
|
|
|
