Here are some best practices for communicating your Hillel's message through your Web page:
The Design
Usability Comes Before Beauty
• Involve your users throughout the entire process
• Plan for future growth and evolution of the site along the way
Process
• Who is going to lead the effort? Who is going to build your site?
• What is the purpose of the site? Who is your intended audience?
• Determine the content and functionality that will satisfy the stated purpose for your audience
• Develop the structure that will be used to organize the content
• Design the navigation that will be used to move through the structure
- Don't underestimate the importance of good labels
• Create the design or "look and feel" for the site
Best Practices
• Think about each aspect of your site through the eyes of all your constituents, not just students - Lay Leaders, Donors, Parents, Prospective Students or Parents, etc.
• Keep the design consistent from page to page and section to section. Some Web development tools include a library of themes or templates to assist you in creating a consistent "look and feel."
• Use Cascading Style Sheets (CSS) wherever possible to control style and layout of site
• Implement a search and/or a site map to make it easy for users to find what they are looking for
• Keep all information a few clicks away (<3 clicks)
Tips & Tricks
• Never underestimate the importance of a solid structure and strong navigation
• Use chat, forums, and other community tools when there is already dialogue "on the ground"
• Keep the size of the header and navigation as tight as possible, to create more room for content
• Avoid using frames, if at all possible, but make sure to use "noframes" tag to provide an alternative page if you use frames
• Skip the blinking text, mouse trails, and other "cutesy" touches
[Back to the top]
The Content
Content is King!
Best Practices
• Users return to a site for useful information, not spinning icons
• An out of date site is worse than no site at all
- Keep your site fresh and new
- Keep your calendar of events up to date
- Revisit "static" content regularly - believe it or not, all content changes
- Design and plan with maintenance in mind
• Keep most important content "above the fold" of the page
Tips & Tricks
• Writing for the Web is different than other types of writing, users must be able to scan page quickly
- Short paragraphs
- Bullets and lists
• For longer documents, try Adobe Acrobat (PDFs)
• Proofread and spell check content before posting
• Use the energetic, creative resources available to you on your campuses - students - to create or edit content, to create logos and graphics, to take photos, etc.
[Back to the top]
Nuts & Bolts
Colors
Best Practices
• Use Web safe colors (252 Colors)
- For text, tables, backgrounds, etc.
- Not as much an issue within graphics or photographs
• Choose a color scheme that is attractive and "easy on the eyes"
- Most important on pages that require a user to read a significant amount of text
Tips & Tricks
• Make sure there is adequate contrast between the text and background
• Try VisiBone for free color reference charts.
Fonts
Best Practices
• Use standard fonts (Times New Roman, Arial, Verdana, etc.)
• Specify multiple fonts in the code
Tips & Tricks
• Use graphics for any special fonts, but use them sparingly
• Avoid hard-to-read fonts
Images
Best Practices
• .JPG - for photos and multi-color graphics
• .GIF - for text and limited color graphics
• 72 DPI (Dots Per Inch) for the Web
• Define "height" and "width" for all graphics
• Limit graphics to a total of 50 Kb per page
Tips & Tricks
• Avoid using too many animated .GIFs
• Keep the size of each individual image as small as possible
• Use thumbnail images for large photos or graphics
• Try photos on CD with your next roll
[Back to the top]
Accessibility
Visual Impairment (Voice Browser)
• Use "alt" tags (end each with a period) on images
• Links should make sense out of context, avoid "click here"
• Make font sizes relative to allow users to increase size of fonts
Color Blindness
• Red/green & blue/orange
• High contrast between background and foreground
Section 508
• Government standards for accessibility
• Provide alternate content for Flash or media
• Visit the government's accessibility page to learn more
[Back to the top]
Page Downloads
Page download times are "The Holy Grail" of Web design
Best Practices
• Try for below 10 seconds on a 56k modem
- Exceptions for video, audio, and other interactive elements - when the user is made aware in advance
• Pay particular attention to home page
Tips & Tricks
• Avoid using too many graphics and keep those that you use as small as possible
• Make sure the user can still understand the page if all the graphics are not downloaded
• Use Flash or other media to make a point, not just for "schmaltz"
• Avoid splash pages and other unnecessary downloads
Questions to Consider
• Is the content worth the wait?
• Can the page be streamlined further?
• Are the graphics, scripts, or dynamic database requests necessary?
Just Remember
• No one is ever going to complain that a page loaded too quickly!
[Back to the top]
Testing
Best Practices
• Check both common and uncommon configurations
- Multiple platforms (PC & Mac) and screen resolutions
- Multiple browsers (IE, Netscape, Firefox, and others) and versions
- JavaScript, ActiveX, Flash, etc. disabled or not installed
- CSS disabled
- Frames disabled
- Loading images disabled
- Using a voice browser
Tips & Tricks
• Have your users test - structure, navigation, etc.
• Check for consistency between pages and sections
• Make sure all the links and navigation are working
• View the site in grayscale to check for contrast
• Check those page download times
Last modified: December 2, 2005