PMACS Web Team

Best Practices

(rev. August 2013)

General Design and Coding

  1. Use HTML5 responsive code as validated by the W3C. Do not use deprecated code.

    Justification: Current standard. Use of validated, responsive code ensures better compatibility across browsers and devices, as well as ensuring better search engine optimization (SEO).
    Supporting literature: Why Validate? (W3C), Web Authoring Standards (WDG), 3 Reasons Why Responsive Web Design is the Best Option (Search Engine Watch)
    Exceptions: Use of the <embed>; tag JavaScript code or CSS IE hacks that might not validate.
    Helpful links: W3C’s validator, HTML_CodeSniffer
     
  2. Test and deem acceptable on all browsers supported by the University.

    Justification: 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.
     
  3. Design for a minimum screen resolution of 1024x768.

    Justification: 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.
    Exceptions: Mobile devices.
    Helpful tools: Auto-resizing tools exist as extensions in Safari and Firefox
     
  4. Specify font size in rems instead of points; reserve points for the print style sheet only, if needed.

    Justification: Accessibility; cross-browser/device compatibility; allowing the user to specify font size via his/her browser preferences.
    Supporting literature: Relative is the new absolute: the rem unit, Font sizing with rem
    Exceptions: IE fallbacks
     
  5. Ensure that basic accessibility rules are met - e.g., use ALT tags for all images and provide alternative text for all images that contain textual information.

    Justification: Accessibility
    Supporting literature: WCAG, Penn's Accessibility Guidelines
    Exceptions: Sites where the audience is pre-selected to not include those with visual disabilities - e.g., the Admissions Status page or small-scale intranet applications whose user base is known and unlikely to change.
     
  6. Ensure that all pages have a unique title. Use meta tags where appropriate.

    Justification: Aids in search engine indexing
    Supporting literature: 8 great on-page SEO techniques
    Exceptions: None.
     
  7. Avoid use of Flash, Ajax, or other similar technologies where it is superfluous and interferes with the user experience. Do not design Flash-only sites or Flash intro pages.

    Justification: Accessibility; printability; compatibility with some 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 users' ability to get to the content they are 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.
    Supporting literature: Why Flash-based websites are bad, Flash: 99% bad
    Exceptions: Flash, Ajax, etc. may be appropriate for certain limited applications.
     
  8. Avoid use of frames and iframes.

    Justification: Accessibility; makes printing, bookmarking, and searching difficult; bad for SEO.
    Supporting literature: Using iFrame: SEO and Accessibility Points, Frames: Good or Bad?
    Exceptions: When there is no viable alternative to using an iframe.
     
  9. Warn user of links to documents that require a plugin or external application (e.g., PDF, DOC, MOV) and provide file sizes if unusually large.

    Justification: Users may have slower connection speeds or lack the plugin needed.
    Exceptions: If an entire list of items is of the same document type, a warning at the top of the list is sufficient.
     
  10. Avoid using the underline tag or style except as a style for links.

    Justification: Underlining items which are not links is confusing to the user since the convention on the web is that only links are underlined.
    Supporting literature: Avoid underlining for emphasis on websites
    Exceptions: None.
     

Best Practices for Sites Maintained via Contribute or our Web-based CMS

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

    Justification: Accessibility; separation of content and format; code is less complicated than using tables; allows for more design control in Contribute.
    Supporting literature: WhyTablesAreBadForLayout, The layout is dead, long live the layout
    Exceptions: None.
     
  2. Be selective in the use of JavaScript, Ajax, or Flash; be wary of ongoing maintenance issues.

    Justification: Content used within these technologies is often not editable in Contribute, 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.
     
  3. Limit the use of custom styles in favor of predefined HTML tags.

    Justification: Use of custom styles requires that we explicitly allow access to those styles in Contribute (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; 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.
     

Requirements for Site Handoffs from Outside Vendors

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

 

Other Resources for General Design Advice

 

Online Distribution of Full-text Publications

Most publishers place severe restrictions on the posting of full-text articles on public websites. If you wish to provide full-text articles online or via email, we strongly recommend you consult with the University's Scholarly Communication Librarian, Shawn Martin to verify that you have the rights to do so under your contract with the publisher. For more information, please refer to the ScholarlyCommons website.

Top