Web Publishing: Best Practices

Typography

Attention to typography is essential in maintaining professionalism and credibility of your Web communications.

1. Information must be presented with adequate contrast.
   Both color and size will impact the contrast and overall readability. Multiple tools exist to help you ensure your site is ADA compliant in this way.
    
2. Avoid large amounts of reversed (light on dark) text.
   Small amounts of reversed text will call attention to information. Large amounts of reversed text will be unpleasant to read.
    
3. Avoid using multiple colors for text.
   Color carries meaning on the Web. Alternate font colors typically indicate text is a link. To avoid confusion, do not use alternate colors as a way to emphasize specific phrases in text. Underlined text also will indicate the information is a link. Avoid underlines for the same reason.
    
4. Avoid embedding links in header text.
   Embedding links in header text (H1-H5) will adversely impact usability. Header text serves as a visual queue for scanning content. The embedded link color disrupts the scannability of the page.  Ideally, header text is followed by paragraph or list text where the embedded links should exist.
    
5. Avoid using too many layers of headers.
   Headers help define the hierarchy of the page structure. On the Web, visitors generally scan content and move quickly through pages. Too many levels of hierarchy will become difficult for visitors to track as they read. Try to limit most pages to two levels of subheads (H2 &H3).
    
6. Whenever possible, avoid using headers in a sequence.
   Using headers in succession will often be confusing and redundant. Try to construct your text in a way that avoids this.

Images

1. Do not embed text in images.
   While it is true short phrases may be included in an alt tags, text content should not be embedded into images. Alt tags should only be used for captions or a short description of the image. This will cause several problems:
   • Not accessible/ADA compliant.
   • Does not scale to mobile devices.
   • Undermines the site’s graphic theme and reduces the overall usability, professionalism, and quality of the user experience.
      
2. Include comfortable margins around inline images.
   Images embedded into the body of a page should have ample white space and not appear close to text or other page elements.
    
3. Images should be optimized for display on the Web.
   Many online resources cover image optimization. Images that are too large will load very slowly, and may hurt your page search engine rankings. Images that are too small will render very poorly on the screen.
    
4. Images should be properly cropped and resized.
   Attention to resizing and cropping will significantly impact the effectiveness of your image. Photos on the Web are relatively low resolution. The following tips will help you get the most effective presentation:
   • Only include one or two faces. Do not attempt to include multiple people in a photo that may only be 80-250px wide. Even with larger images, be careful not to post an image where features of subjects are blurry. This tip doesn’t apply to images of very large groups or crowds where there is no expectation to make out individual features.
   • Use a relatively tight crop. It may seem unnatural to crop a person this way, but since you only have so many pixels to work with, the features will display more clearly and expressive and less blurry.
   • Avoid busy backgrounds and clothing patterns, when possible. This visual noise lessens the impact and clarity of the image.
     ​
5. Be mindful of how the image works with other elements on the page.
   Images must compliment other elements on the page. They must work within the intended page layout and overall graphic theme.

Usability/Interaction

1. Link text should describe the content you are linking to.
   The W3C recommends against using "click here" and similar phrases because the phrase describes the mechanics. It also negatively impacts accessibility. Screen readers such as JAWS allow users to tab between links and the browser will only read the link text.
   • GOOD: “Apply to the graduate program.”
   • BAD: “Click here” to apply.
      
2. Format information to include clear calls to action.
   Follow the principles of Don’t Make Me Think. Do not force visitors to spend time reading large amounts of information, or clicking through many layers of links in order to find what they are looking for.
   • Avoid burying important links in paragraphs of text. These will not be noticed by visitors who are scanning through your pages.
   • Use landing pages with clearly visible lists of links.
   • Prioritize information and put the most important information at the top of the page.
   • Be mindful of the amount of information above and below the “fold”. A term taken from newspaper jargon, online “above the fold” refers to information initially visible before the user begins to scroll down the page. Scrolling is an intrinsic attribute of the user experience, but it is important to understand how much information initially appears and how users interact with the initial screen.   
   • Do not perform excessive copyfitting in order to avoid scrolling. You do not have control over the size of the visitor’s browser. It is impossible to avoid scrolling on phones and tablets.
   • Use adequate margins, thumbnail images, and keep pages clean and straightforward when formatting pages.
      
3. Be mindful of the length of copy when using multiple columns.
   • Avoid including a lengthy right column when the main body of the page is short.
   • Try to maintain a balance of text in columns when possible.
   • Try to maintain a proper balance of text and image content.
   • Eliminate unnecessary breaks and spaces in the text.
      
4. Only use tables for tabular data. Properly structure tabular data.
   • Tables should not be used for layout manipulation, only to present tabular data.
   • Consider whether the information might be presented more effectively in a different format.
   • Always use table headers, and consider the readability of the table size.
   • Make appropriate use of margins and background color.
   • Extremely large tables may be best represented in a Google spreadsheet, a PDF file, or another format and not in an HTML page.
      
5. Carefully consider the impact of interactive elements.
   • Hidden content, such as mouse hover effects, are not apparent on mobile devices and to users with disabilities. If these are used, content must also appear in another form.
   • Use caution when choosing to implement accordion navigation elements. Hiding content in this way may negatively impact usability and accessibility.
   • Accordion navigation may also impact usability if the information hidden/revealed is very lengthy.
   • While excessive scrolling is not ideal, scrolling is predictable and a common part of user experience with most devices.
     ​

• Do not embed text in your images.
• Do not use masked images (images that appear to be cut out of the page background color) unless it is clearly the intention of the theme to have this.
• Avoid posting images with a background color very similar to the page background color.
• Do not crop images so important subjects end up behind other text elements on the page.
• Do not crop images so unrelated information appears to refer to the image.
• Do not use clip art, logos, or animations, unless it is clearly the intention of the page design to include this.