PMACS Web Team

PMACS Development Standards and Best Practices

(rev. March 2017)

 

Coding Recommendations

Use HTML5 responsive code as validated by the W3C (World Wide Web Consortium)

Why?

HTML5 is the current standard and ensures better compatibility across browsers and devices, as well as ensuring better search engine optimization (SEO).

Supporting Information:
Exceptions
  • Use of the <embed> tag
  • Javascript code or CSS hacks for Internet Explorer that may not validate.
Helpful Links:
 

Test and deem acceptable on all browsers supported by the University.

Why?

Providing full support for older browsers significantly infringes upon our ability to implement the more advanced interactive features our users are expecting. We request that users upgrade to the latest version supported by the University or switch to another supported browser such as Firefox or Safari.

Exceptions:
  • Mobile devices
  • Other exceptions can be made for intranet applications so long as they are clearly spelled out in the “technical requirements” section

 

Design Recommendations

Font Sizes

Specify font sizes in rems instead of points; reserve points for the print style sheet only, if needed.

Why?
  • Accessibility
  • Cross-browser and cross-device compatibility
  • Allows the user to specify font size via his/her browser preferences
Helpful Links:
Exceptions:

Internet Explorer fallbacks

 

Emphasizing Text

Use italics to place emphatic stress on a particular word, and bold to emphasize the importance of of a particular word or phrase. Never underline to emphasize text.

Why?
  • Use of the <em> tag renders as emphasized text. Most browsers will display the <em> tag as italic.
    • Example: This lemon is very sour.
  • Use of the <strong> tag defines important text. Most browsers will display the <strong> tag as bold.
    • Example: Warning! Lemons are sour.
  • Underlining items which are not links is confusing to the user since the convention on the web is that only links are underlined.
  • Proper emphasis techniques will ensure greater accuracy and enhance the experience of a site visitor using a screen reader.
Helpful Links:
 

Screen Resolution

Design for a minimum screen resolution of 1024x768 pixels.

Why?

As of this writing, according to our latest usage statistics on the SOM web server over 98% of our viewers use a screen resolution of 1024x768 or higher.

35% of visitors to W3Schools have a screen resolution of 1366x768 pixels, as of January 2017.

Exceptions:
  • Mobile devices
  • Other exceptions can be made for intranet applications so long as they are clearly spelled out in the “technical requirements” section.
Helpful Information:
  

Warn users when plugins or external applications are required.

Warn users of links to documents that require a plugin or external application (such as PDF, DOC, MOV) and provide file sizes if unusually large.

Why?

Users may have slower connection speeds or lack the required plugin or application.

Exceptions:

A warning at the top of the list is sufficient if an entire list of items is of the same documentation type.

Helpful Tips:
  • Adding an icon beside a document is an efficient way to warn the user. We recommend Font Awesome.
    • Example:   PDF Document

 

Avoid superfluous use of Flash, Ajax, or other technologies

Superfluous use of these technologies interferes with the user experience. Avoid Flash-only sites and Flash intro pages.

Why?
  • Accessibility: Users with disabilities and impairments are unlikely to be able to view Flash content.
  • Printability
  • Compatibility with most mobile devices and tablets
  • Flash content may be hidden to some users and to search engines
  • The inappropriate use of Flash (e.g., Flash intro pages) may delay the user’s ability to find the content they’re looking for
  • Browser features such as “find in page” and text translators will not work on Flash content
  • Text is often not resizable in Flash
Helpful Links:
Exceptions:

Flash, Ajax, etc. may be appropriate for certain limited applications.

 

Avoid using frames and iframes

Why?
  • Accessibility: Users with disabilities and impairments may not be able to view content in frames and iframes.
  • Makes printing, bookmarking, and searching difficult
  • Bad for SEO
Helpful Links:
Exceptions:

When there is no viable alternative to using an iframe.

 

Additional Design Resources

Usability:
Design Principles:

 

Accessibility Recommendations

Please see our Accessibility Best Practices section for more information.

 

Best Practices for Sites Maintained via Contribute or MODX CMS

Avoid using tables to place objects on the page; use CSS instead and reserve the use of tables for tabular data.

Why?
  • Accessibility: Users with disabilities and impairments may be unable to correctly view tabular data
  • Separation of content and format
  • Code is less complicated than using tables
  • Allows for more design control in the CMS
Helpful Links: 
 

Be selective in the use of JavaScript, Ajax, or Flash; be wary of ongoing maintenance issues.

Why?

Content used within these technologies is often not editable in Contribute or MODX, presenting a potential maintenance issue for PMACS.

Exceptions:
  • Interactive content that requires this technology
  • Small-scale intranet applications whose user base is known and unlikely to change
  • Sites which already have an experienced Web Designer on staff or which plan to contract out for ongoing maintenance

 

Limit the use of custom styles in favor of predefined HTML tags.

Why?

 Use of custom styles requires that we explicitly allow access to those styles in Contribute or MODX (which we don’t normally do since this can be used improperly and requires more setup and user training).

Exceptions:
  • Sites not maintained via Contribute or MODX
  • Styles applied outside of editable fields in the Dreamweaver template
  • Custom styles that do not map to an existing HTML tag - in this case, these styles can be placed in a separate style sheet that the editor can access via Contribute or MODX
 

Requirements for Site Handoffs from Outside Vendors

  1. Provide original images (PSD, EPS, etc.)
  2. Provide original documents used to produce PDFs, Flash files, etc.
  3. Provide a mapping of original images to corresponding web graphics.
  4. Provide a mapping of fonts used in each image.
Top