Best Web Practices

A Responsive Design Approach

The Marriott Library website is responsive, a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).  

To accommodate this technology there are best practices for you to follow as a content creator.  See also, Web Editor Responsibilities & Standards.

Responsive Design Best Practices

• Use fluid grid layout features instead of tables.  (See "Snippets -> Layouts ")
• • Only use a table for displaying tabular data. 
• Do not set image widths. 
• Embed videos inside div class="flex-video". This will auto adjust/scale the width and height of the video. 
• Design and layout your page with mobile in mind first.
• Do not spell out URLs or Email addresses, hyperlink them to text within the content. 
  (i.e. "Check out the Library website for more information" instead of, "Click here to find more: http://www.lib.utah.edu/bladdyblah/blah/blub/index.php")
  (i.e. " Email" instead of, "bladdyblah.blahblubblub@blah.edu"

Web Content Best Practices

• Keep written text concise.

  • Get to the point as quickly as possible.

  • Cut out unnecessary information.

  • Use easy-to-understand, shorter, common words and phrases.

  • Avoid long paragraphs and sentences.

  • Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. e.g. "1,000" as opposed to "one thousand." 

• Use Headings to group content.
• Use bulleted lists, accordions, and other text formatting techniques. (Use color wisely. Less is more. )
• Put descriptive alt text on images. (Always. No exceptions.)
• Limit your use of photos and graphics. (Be mindful of image copyrights.)
• Reduce the size of images before uploading. (Images should be 72dpi/ppi)
• Using the term “Click here” is not an acceptable practice anymore.  Include the link in a sentence.
  • Old Way:  To find out more information click here.
  • New Way:  More information is available on our Student FAQ page .
• Know your audience.  Don’t assume that common abbreviations are known.
• Some building abbreviations may also not be known. When possible, spell out the name.
• If you create a new section, there must be an index page in order for breadcrumbs and SEO to function properly.