PMACS Development Standards and Best Practices
(rev. March 2017)
- Coding Recommendations
- Design Recommendations
- Accessibility Recommendations
- Best Practices for CMS Sites (Contribute + MODX)
- Requirements for Site Handoffs from Outside Vendors
Use HTML5 responsive code as validated by the W3C (World Wide Web Consortium)
HTML5 is the current standard and ensures better compatibility across browsers and devices, as well as ensuring better search engine optimization (SEO).
- Why Validate? (W3C)
- Web Authoring Standards (Web Design Group)
- 3 Reasons Why Responsive Web Design is the Best Option (Search Engine Watch)
- Use of the <embed> tag
Test and deem acceptable on all browsers supported by the University.
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.
- Mobile devices
- Other exceptions can be made for intranet applications so long as they are clearly spelled out in the “technical requirements” section
Specify font sizes in rems instead of points; reserve points for the print style sheet only, if needed.
- Cross-browser and cross-device compatibility
- Allows the user to specify font size via his/her browser preferences
Internet Explorer fallbacks
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.
- 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.
- Avoid Underlining for Emphasis on Websites
- HTML5 <em> tag (W3Schools)
- HTML5 <strong> tag (W3Schools)
Design for a minimum screen resolution of 1024x768 pixels.
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.
- Mobile devices
- Other exceptions can be made for intranet applications so long as they are clearly spelled out in the “technical requirements” section.
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.
Users may have slower connection speeds or lack the required plugin or application.
A warning at the top of the list is sufficient if an entire list of items is of the same documentation type.
- 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.
- Accessibility: Users with disabilities and impairments are unlikely to be able to view Flash content.
- 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
Flash, Ajax, etc. may be appropriate for certain limited applications.
Avoid using frames and iframes
- 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
When there is no viable alternative to using an iframe.
Additional Design Resources
- User Experience Basics (usability.gov)
- 10 Usability Tips Based on Research Studies
- 7 Best Practices for Improving Your Website’s Usability
- 3 Important User Experience Guidelines
- Visual Design Basics (usability.gov)
- 7 Key Principles That Make a Web Design Look Good
- 5 Basic Principles of Graphic Design You Take For Granted Everyday
- Information Design: Edward Tufte
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.
- 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
Content used within these technologies is often not editable in Contribute or MODX, presenting a potential maintenance issue for PMACS.
- 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.
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).
- 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
- Provide original images (PSD, EPS, etc.)
- Provide original documents used to produce PDFs, Flash files, etc.
- Provide a mapping of original images to corresponding web graphics.
- Provide a mapping of fonts used in each image.