- Web and Digital
Web Development Guidelines
When building and maintaining a website, your No. 1 priority should be the user. Your site should be intuitive and easy to use, so that users can find what they need quickly.
Tips to Help You Build Great Web Pages
- Words matter. Despite the graphic nature of the web and the move toward multimedia (animation, video and audio), most web content comes down to words.
- "Last Updated" lines are antiquated and can make your page seem older than your user might think. In general, do not use them -- and update your content as often as it requires, or as often as you can.
- "Under Construction" messages are frustrating for users, so don't put up pages until you have the content ready.
- For tips on writing for the web, click here.
- General information about the University, such as the campus map and the mission statement, is useful in several sections on the SLU website. Rather than recreating or cutting and pasting the information into your web page, you can supply this info by linking to the pages designed by web services. E-mail the web marketing coordinator for more information.
- As with any content provided on behalf of the University, all SLU websites must comply with the following University and federal policies.
- Put yourself in a user's mindset. How would the material make the most sense? What structure would allow you to find what you're looking for quickly?
- Before you develop your website, organize the information visually by outlining it on paper or using a flowchart program.
- If your site is in the CMS, you don't need to worry about fonts; they are established by the universal style sheet. Do not override the style sheet with font tags or by changing the font in the Body Copy Field text editor.
- If your site is not in the CMS, you should use the sans serif font family "Verdana,Arial,Helvetica. Body text size should be HTML font size "1" and header text is "2."
- Bold and bullet point for emphasis. Avoid italics, which are difficult to read onscreen, or underlining, which can make text seem like a link.
- Use a numbered list or checklist for instructions.
- Avoid blinking and multi-colored text.
- Graphics are communication tools, not merely decoration for the page. They should convey information and provide visual interest by breaking up text.
- Any graphics or photos you use on your site should be web resolution (72 dpi) because large graphics cause lengthy download times (even when a user has broadband or DSL). Software such as Adobe Image Ready, Adobe Photoshop and Macromedia Fireworks are used to optimize graphics -- to make the file size as small as possible while maintaining acceptable quality.
- The size of a graphic refers to the amount of memory it requires. A graphic's size is determined not only by height and width but also by how color information is encoded, which is determined by the file format. Web graphics typically use two formats: GIF or JPG.
Use GIFs for line art or images that have clear distinctions between lines and between colors.
Use JPGs for photos or other images that use gradations of color or values.
- Make sure to use "ALT" tags to give the graphic a brief description. (Specify this in the "Image Properties" box as you insert an image into the Body Copy Field in the CMS.) Users that are visually impaired often use software that "reads" a web page to them. The ALT tag lets the user know what the graphic is.
- If you include animated graphics, use only professional quality animation, such as Macromedia Flash.
- If you link to a non-SLU page from your SLU web page, web services recommends you code that link to open in a new browser window. (Specify this in the "Link Properties" box as you insert a link into the Body Copy Field in the CMS.) This will help users keep in contact with the SLU site where they originated.
- Include a link to SLU.edu in every e-mail you send. Your "signature" is a good place to do this.