HOST - Hillel's Online Services and Technology
HOST provides free Web sites to Hillel. The HOST services include integrated options for enewsletter and online forms capabilities. Communicate more effectively online with your community. HOST is a service provided by the Schusterman International Center to all Hillels.
Learn more about HOST »
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