Content Styles

This is an evolving document. Please add to it.

Disclaimers

• Use the “small” element for disclaimers.
• Place them at the end of the page content.

Links and Labels

• Never use “click here” for a link.
• The link text should match the title of the webpage you're linking to.
• Use title case for navigation links.
• off-site links - will show symbol, do not make open in new window with target=“_blank”.

Maps

This section needs to be completed.

• Leaflet
• Include distance scale.

Multimedia

This section needs to be completed.

• Photos
• Photo Galleries
• Videos
• Images

Navigation

• Site navigation will always appear off-canvas on small-format and at the bottom-left on large-format.
• If local navigation is needed, it will appear above the site navigation.
• If the webpage is more than one level below the site section, a navigation link to the level one above the current one will appear above the site navigation (and below the local navigation if it exists).
• Navigation text should match the title of the webpage you’re linking to. If it is too long, you can shorten it but don't change any of the words.

Titles and Headers

• Use title case.
• No title with a colon (:) at the end.
• Short and simple is better than long and technical.

Writing Style

• Include at top of all webpages (example):

        
          // Webpage contact - Lisa Wald
          // Content contact/SME - Art Frankel
          // Created Jan 2015
          // Last updated 01/30/2015
        
      

• Use the Plain Language guidelines.
• “and” versus “&” - always use “and” in copy, and in headers and navigation links as much as possible, instead of “&”.
• U.S. not US.
• USGS not U.S.G.S., “U.S. Geological Survey”, “US Geological Survey”.
• “University of Washington” is preferred to “Univ. of Washington” (include “.” here).
• Organizations associated with a link are shown like this in parentheses:
  Special Event Page (Incorporated Research Institues for Seismology)
• “real-time” not “realtime”.
• phone numbers - xxx-xxx-xxxx
• 5000 not 5,000, but 10,000+ gets the comma.
• voice and purpose:
  • make science about people too, not just data and research, include photos of people.
  • explain scientific method by example.
  • teach something new about the science, not just the results.
  • think “fact sheet” for level.
  • tell a story.
  • off-site links open in the same browser window.
• width of text on page will be limited to ??? using the class ?

See also:

• Website Overview, Config, Variables, Functions, and SCSS Patterns