Enterprise Web Services
Website Organization, Navigation & Best Practices
Organization:
There are some basic structural issues in building a webSITE which you need to consider. Think about your organization first – you do not want to have to go back later and clean things up, relink and reorganize. Do it now. Storyboard your ideas.
Remember every webPAGE needs to be a cohesive part of the larger site. Navigation needs to be similar in look, feel and operation from one area of the site to the next.
Images:
- All images should be placed in an images folder off the root directory. That way all your image links will ALWAYS be: <img src="images/name_of_image.gif">. This makes life particularly easy when you have to do a search and replace.
- Optimize all graphics removing unnecessary colors.
- Reduce size. Allow user to click on a smaller version if they wish to view the image with more resolution.
- Smaller images = less traffic across the Internet = less work for the server to transmit = pages load quicker = happier websurfers.
- Consider creating a low-res version to load first and let the higher resolution image load after. This speeds the page download.
- Use height and width on all graphic images.
- No looping graphics, such as animated GIFs.
- Use Alt tags on all images that are descriptive and describe the image or the action needed ALT=”click here to enter the site” or ALT=”MCC college logo – click to return to the MCC homepage”.
- Know when to use a .jpg and when a .gif is best.
- Keep page weight under 50K. That includes all graphics. Anything larger takes too long to load and your audience will go elsewhere.
- If you cannot make your page weigh less than that – you may need to make two different versions – a high res and a low res/fast load version.
Web Safe Color Palette:
- Use only websafe colors. The websafe color palette consists of 216 colors.
- Non websafe colors can display incorrectly from one browser to another.
- If you use one of the hexadecimal (or decimal equivalents) recognized by all browsers, operating systems, and monitor manufacturers your colors will display correctly.
- http://rgbchart.com/
Naming Conventions:
- Use all lowercase letters in filenames and directories. Avoid special characters (@#$>?%^&),.
- Avoid using spaces between words; use the underscore ‘_’ instead.
- End with ‘.html’, not ‘.htm’.
- Your homepage should always be named index.html. This way the server at whatever location you are hosted will serve it automatically.
- If you are using a JavaScript page the extension will be .jsp
- MCC servers do NOT support .asp or .php pages.
Stylesheets:
- All webpages should rely on Cascading Style Sheets for ease in editing and ease in reading by any non-graphical software (such as Lynx or JAWS).
- Stylesheets remove font tags from the text and allows you to make a single change on the stylesheet to change the color, font face, size, etc. of any block of text within your site from one loca tion. http://www.htmlhelp.com/reference/css/
Level 3A ADA Compliant::
- ALL Priority 1, 2, and 3 checkpoints are satisfied
- http://www.ada.gov/pcatoolkit/chap5chklist.htm/
- http://www.ada.gov/pcatoolkit/chap5toolkit.htm
- http://www.cast.org/
- http://www.section508.gov/
- http://www.ada.gov/
- http://www.w3.org/WAI/Policy/
Readability recommendations:
- Use good contrast between backgrounds and text
- Use high contrast color combinations (such as white pages with black text) for ease of readability.
- Low contrast color schemes like blue text on a grey background may make your pages difficult to read by those with LOW or poor vision – or for those with low resolution monitors.
HTML Level 4 Compliance:
- HTML level 4 includes advanced form, frame improvements, table enhancements, objects, scripts, style, and more entities.
- All webpages should have META tags in the top portion directly after the <HTML> and the <HEAD> tags. These META tags are actually descriptions that help search engines find and correctly catalog your page. They can also have information such as dates and times so the search engine will know this is current content.
References:
Please Note:
Test ALL pages in multiple browsers and operating systems before posting.
No MS Word generated pages Word adds unnecessary code to HTML pages, increasing file size.
No FrontPage bots, extensions, themes, etc. These additions don’t work on the new Web server.
Only approved modules (actions) and programmatic pages (JSP) http://java.sun.com/products/jsp/
Always link to the MCCCD Disclaimer – www.maricopa.edu/disclaimer
RESOURCES:
HTML:
- http://www.w3.org/MarkUp/
- http://www.w3schools.com/html/default.asp
- http://www.htmltutorials.ca/
- http://www.htmlprimer.com/
ADA COMPLAINCE:
- http://www.webaim.org/standards/508/checklist
- http://www.ada.gov/pcatoolkit/chap5toolkit.htm
- http://www.cast.org/
- http://www.section508.gov/
- http://www.happycog.com/publish/dwws/
JAVASCRIPT:
STYLESHEETS:
Your web support staff includes:
- Jon Baney, Web Manager 480-461-7283
- Trisha Brazda, Web Technician III 480-461-7491
- Bonny Smith, Web Technician, [1/2 time]
- Steve Merrill, Web Technician II 480-461-7282
Please contact Enterprise Web Services for comments or corrections email phone: 480-461-7491 or 480-461-7283
