Standards for Spellings, Formats, etc. Used on Web Team-Managed Websites - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

Miscellaneous Notes

(Reviewed April 26, 2012.)

  • Standard size for people "portrait" photographs: 150px x 175px at 72dpi (example: for photos next to contact info)
  • Use empty alt attribute (alt="") on <img> tag of photos next to contact information - because if alt="John Jones" is used on the <img>, a screen reader reads that description AND the name of the person (which means that the name is read TWICE)
  • When an image has a link, make sure the <img> tag and the caption for the image are surrounded by the SAME <a> tag and use an empty alt attribute on the image; example: <a href="http://www.amazon.com/"><img src="/images/logo-amazon.gif" width="100" height="25" alt="" /><br />Amazon Logo</a>
  • Video/audio transcript filename: xxxxxxxxxxxxxx-transcript.html; title: Video Transcript: xxxxxxxxxxxxx
  • For and at all dates and dated information (example: schedules, individual dates in text on A&R web pages, etc.), insert a named anchor (i.e., <a name="value" id="value"></a>) with the values set to "[semesterYYYYdescription]". Examples: <a name="spring2012schedule" id="spring2012schedule"></a> or <a name="fall2012workshops" id="fall2012workshops"></a>. Then, all dates that need updating for Spring 2012 can be located by doing a search in the Dreamweaver site for: name="spring2012 and all named anchors starting with "spring2012" will be found and displayed in Dreamweaver's Search results window. This is so very helpful I cannot even say how much!!

Standards for Spellings, Formats, etc.

(Modified Reviewed April 26, 2012.)

The Web Team uses the following standards for the websites we manage. We do periodic reviews of the sites we manage to ensure they follow these standards.

No one else is required to meet these standards, but may choose to if they wish.

This page is meant as a quick reference for Web Team members. It will not, therefore, address the whys and hows of each item.

If any of these standards are found to not follow recommended web accessibility guidelines, they will be changed.

Spelling, Punctuation, Acronyms, Abbreviations, Hyphens, Case, Dates, Times, Ranges, Department/Division Names, More…

  • ohlone.edu - do not use ohlone.cc.ca.us
  • email (no hyphen)
  • online (no hyphen)
  • website (no space; lowercase unless first word in sentence)
  • web page (with space)
  • homepage (no space; referring to home.html, index.html, etc. - main page of a website)
  • Web - when referring to the World Wide Web specifically
  • web - when not referring to the World Wide Web specifically, as in "web design"
  • Internet
  • World Wide Web
  • Don't use WWW unless "World Wide Web (WWW)" is referred to first on the page
  • WebAdvisor (no space; capital W, capital A); link to /go/webadvisor
  • waitlist (no space; all lowercase)
  • Class Schedule - when referring to the searchable online Class Schedule; link to /go/classschedule
  • specify "printed Class Schedule" when appropriate and do not link to /go/classschedule
  • Catalog - when referring to Ohlone College Catalog - link to /catalog/
  • Building - not Bldg.
  • Room - not Rm.
  • Building 1 - not Building One
  • the College - when referring to Ohlone College
  • the District - when referring to the Ohlone Community College District
  • Division - when referring to a specific Ohlone College division (such as Health Sciences Division)
  • Department - when referring to a specific Ohlone College department (such as PTA Department)
  • Initial-cap job titles: Dean, Arts and Social Sciences Division; Counselor; Assistant Director of XYZ
  • Ohlone College campus in Fremont (do not refer to the Fremont campus as the "main campus" - this is an affront to the other campus!)
  • Ohlone College, Fremont campus
  • Ohlone College, Newark campus
  • Ohlone College Newark Center for Health Sciences and Technology
  • Ohlone College Newark Center
  • Ohlone College Newark Center campus
  • Newark Center
  • DO NOT USE: NCHST
  • DO NOT USE: OCNC
  • Building 7 (preferred use)
  • Student Services Center (Building 7), Fremont campus
  • Newark Student Services Center, Room NC1312, first floor, Wing 3 on the Newark campus
  • For general references: Fall semester, Spring semester, Summer term (no longer used: Summer session)
  • For specific references: Fall 2018, Spring 2018, Summer 2018; also: Fall 2018 Semester, Spring 2018 Semester, Summer 2018 Term
  • Dates:
    • Spell out names of months: January, February, etc.
    • Spell out names of days: Monday, Tuesday, etc.
      • In some data tables, abbreviations such as MWF or MW or T or Th may be used, but only when used with the <acronym title=""> tag (example: <acronym title="Monday, Wednesday, Friday">MWF</acronym> or <acronym title="Thursday">Th</acronym>)
    • When referring to a date, do not use January 1st, March 2nd, December 3rd, etc. - use January 1, March 2, December 3, etc.
    • When the year is not otherwise stated in close proximity to the date, include the year for dates so the site visitor knows exactly what date is referenced - example:
      • The test is held February 20, 2018 from 11:00am to 1:00pm.
      Exception: It is OK to not include years with dates in table data when the table itself is clearly labeled with a year - example table caption: Spring 2018 Blah Blah Blah
    • For month or day ranges in table cells or body text, use a single space on each side of the hyphen (Monday - Friday, June - August) (BECAUSE: Internet Explorer sees the range as a single word and won't word wrap a hyphenated word or phrase. It is preferrable to have table data word wrap to avoid extra long table cells, so use a single space on each side of the hyphen.)
    • When necessary to abbreviate dates in table cells (never do it in body text), use the full date in global date format: YYYY/MM/DD - think globally (some countries/people use DD/MM/YY or DD/MM/YYYY format instead of the (more common to me!) MM/DD/YY or MM/DD/YYYY format). If you do not use the global date format, specify in the table cell header column that the format is (mm/dd/yyyy) or whatever format is used.
  • Times:
    • ##:##am or ##:##pm - do not abbreviate times to 8am or 9pm; do not use space before am or pm (no space keeps the am/pm with the time instead of wrapping to the next line)
    • am - use immediately after the hour:minutes, without a space in between (9:30am) (not a.m. or AM or A.M.)
    • pm - use immediately after the hour:minutes, without a space in between (5:15pm) (not p.m. or PM or P.M.)
    • Use 12:00pm - not 12:00 noon or 12:00noon or 12noon or 12:00pm noon or 12:00pm Noon.
    • It is also permissible to use 12:00pm (noon) and 12:00am (midnight). Then, noon and midnight could be used thereafter on the page.
    • When indicating a range of times, use am or pm on both times (9:00am - 10:00am, 11:00am - 12:30pm, 1:00pm - 3:00pm) - this makes it absolutely clear when an event starts and ends
    • When indicating a range of times in body text and data tables (i.e., not inside a table cell), use "from" and "to" together (from 10:00am to 2:00pm) or use a hyphen surrounded by a single space on each side of the hyphen (10:00am - 2:00pm) (don't use "from XXX - YYY"!).
    • NOTE: Our styles are different from professional type rules for times which state:
      • 8:00 a.m.
      • 11:00 p.m.
      • 9:00-10:00 a.m. (when both times are in the same period)
      • 11:00 a.m.-2:00 p.m. (when the times are in different periods)
      • blah blah blah from 9:00 to 10:00 a.m. blah blah blah (range in sentences use "from" and "to" not a hyphen)
      • blah blah blah from 11:00 a.m. to 2:00 p.m. blah blah blah (range in sentences use "from" and "to" not a hyphen)
      • In fact, a.m. and p.m. are supposed to be small capped (not ALL CAPPED) which can be done by using the small-capped attribute of a font
      • These common rules were modified for the College website
  • When indicating a range of numbers (whether in body text or in a table cell), use a hyphen or en dash (&ndash;) without surrounding it with spaces (1-3 units, January 15-23).
  • Spell out first, second, third, etc. when referring to a floor or an ordered item; example: Room 1405A, Building 1, fourth floor, Fremont campus
  • Do not use # as an abbreviation for the word "number" or "Number" (# is a pound sign, not the word "number")
  • Do not use an ampersand (&) as an abbreviation for the word "and". Use & only when it is used in the actual name of an organization or department.
  • For lists of links in the body of a page, use the definition list tags (<dl>, <dt>, <dd>) when each link is followed by a definition, description, or summary.
    OR use the unordered list tag (<ul>) when each link is not followed by a description or summary.
  • Header images in the standard templates use the text "Department of XYZ" or "Division of XYZ" on the image
  • HTML page titles use "XYZ Department" or "XYZ Division"
  • For room numbers, use Room #### (no hyphen). For the first mention on a page, use Building #, Room #### then use Room #### thereafter as long as room number is the same
    • For Hyman Hall room numbers, use a hyphen after HH: Room HH-###, Hyman Hall, first/second floor, Fremont campus
    • For Smith Center room numbers, use a hyphen after SC: Room SC-###, Smith Center at Ohlone College, basement/first/second floor, Fremont campus
    • For Child Development Center room numbers, use a hyphen after CD: Room CD-###, Child Development Center, Fremont campus
    • For Newark Center room numbers, DO NOT use a hyphen after NC: Room NC####, first/second floor, Wing #, Newark campus
    • When using HH-### and/or SC-### and/or NC#### in a table, include a "key" following the table if Hyman Hall or Smith Center or Newark Center are not specified before the room number; examples: HH = Hyman Hall; SC = Smith Center; NC = Newark Center.
    • No room number is required for "Jackson Theatre, Smith Center at Ohlone College", "NUMMI Studio Theatre, Smith Center at Ohlone College", "Louie-Meager Art Gallery, Smith Center at Ohlone College", "Smith Center at Ohlone College, Jackson Theatre", "Smith Center at Ohlone College, NUMMI Studio Theatre", or "Smith Center at Ohlone College, Louie-Meager Art Gallery".
  • Use Theatre not Theater when referring to Jackson Theatre, NUMMI Studio Theatre, Theatre and Dance Department, and Amphitheatre at Ohlone College.
  • The full "Gary Soren Smith Center for the Fine and Performing Arts" is preferred and should be used whenever possible as the first reference to the Smith Center on a page. Note: Use "and" instead of "&". In a data table, it is permissible to use just "Smith Center" without writing out the full name on the page.
  • Use "Smith Center at Ohlone College" when not using the full "Gary Soren Smith Center for the Fine and Performing Arts"
  • Acronyms and abbreviations - See Acronyms and Abbreviations
  • Acronyms and abbreviations should use <abbr> tag with appropriate title attribute for first use on a page; examples:
    • <abbr title="Associated Students of Ohlone">ASOC</abbr> - example: ASOC
    • <abbr title="American Telephone &amp; Telegraph">AT&amp;T</abbr> - example: AT&T
    • <abbr title="English as a Second Language">ESL</abbr> - example: ESL
    The title attribute should indicate the full name of what the abbreviation is for. An alternate (and printable method) is to spell out the first instance of the term followed by the abbreviation in parenthesis and then use the abbreviation for the remainder of the page; example: Associated Students of Ohlone (ASOC).
  • For an elipses, use &hellip; (which displays like this: …) instead of 3 periods. No space before or after, unless at end of a sentence.
  • Common Special Characters: Use encoded entities as follows (nice list):
    • &#39; ' Apostrophe (note: &apos; IS NOT VALID and is not recognized by IE 7)
    • &hellip; or &#8230; … Horizontal Ellipsis
    • &mdash; or &#8212; — Em Dash (size of m in current font)
    • &ndash; or &#8211; – En Dash (size of n in current font)
    • &lsquo; or &#8216; ‘ Left Single Quotation Mark
    • &rsquo; or &#8217; ' Right Single Quotation Mark
    • &ldquo; or &#8220; “ Left Double Quotation Mark
    • &rdquo; or &#8221; ” Right Double Quotation Mark
    • &#8226; • Bullet (larger than the Mid-Dot ·)
    • &#8482; ™ Trademark Sign
    • &#247; ÷ Division Sign
    • &#188; ¼ Quarter Fraction
    • &#189; ½ Half Fraction
    • &#190; ¾ Three-Quarter Fraction
  • Use named entities for these special characters (nice list):
    • &nbsp;   Non-breaking Space
    • &quot; " Double Quotation Mark
    • &amp; & Ampersand
    • &cent; ¢ Cent Sign
    • &lt; < Less Than Sign
    • &gt; > Greater Than Sign
    • &frac14; ¼ Quarter Fraction
    • &frac12; ½ Half Fraction
    • &frac34; ¾ Three-Quarter Fraction
    • &laquo « Left Angle Quote Marks
    • &raquo » Right Angle Quote Marks
    • &copy; © Copyright
    • &reg; ® Registered Sign
    • &deg; ° Degree Sign
    • &plusmn; ± Plus or Minus Sign
    • &#247; &divide; division sign
    • &aacute; á Small a, acute accent
    • &eacute; é Small e, acute accent
    • &middot; · Middle Dot (Mid-Dot) (smaller than the Bullet •)
  • OK to use hyphen without spaces instead of en dash for numeric durations (example: 1-3 days, January 15-17, May 20-21). If use en dash, do not use spaces around &ndash;.
  • OK to use hyphen with one space on each side instead of em dash to represent a dash - do not use multiple hyphens for a dash (-- doesn't word wrap correctly in some browsers!) If use em dash, do not use spaces around &mdash;.
  • OK to use ' and " instead of curly quotes or smart quotes for ‘single quotes’ (&lsquo; and &rsquo;) or “double quotes” (&ldquo; and &rdquo;)
  • OK to use ' for feet and " for inches when following a number. Examples: 6' 2" (" must be &quot;) - OR use the proper encoding:
    • &prime; ′ for feet
    • &Prime; ″ for inches
  • Use an apostrophe where a letter or letters is missing:
    • Hall o' Fame
    • Rock 'n' Roll
    • gone fishin'
    • When talking about decades, use '90s or 1990s
    • When talking about ages or numbers, use 90s
    • Do not use an apostrophe before the s in '90s or 90s (don't use: 1990's or 90's - these are not possessive).
    • Use As not A's; example: He gets As and Bs. (As and Bs are not possessive.)
    • Use ABCs not ABC's; example: She knows her ABCs. (ABCs is not possessive.)
  • Do not use ALL CAPS, especially not for headings since they're already bolded and enlarged - or use CSS to change font to small caps for the heading. If you must use ALL CAPS (i.e., the client is stubbornly requiring it!), use it SPARINGLY and use <strong> or <em> tags around the word/phrase (so screen readers will get the emphasis too).
  • For emphasis, use <em> (which usually italicizes) or <strong> (which usually bolds). Do not use <i> or <b>.
  • It is proper (but not required by the WT) to include punctuation (comma, semi-colon, colon, period, etc.) following a word or phrase in the emphasized text. Examples: italicize, (the comma is included in the italicized text) and strong: (the colon is included in the bolded text)

Formats

  • CSS font sizes: set body font-size to 100% then set adjustments to font-size using em
  • Do not open new windows (unless absolutely necessary or otherwise makes sense in content and user is notified). Do not use target="_blank" or Javascript or any other method to open new windows, not even with a "title" attribute on the anchor (<a>) tag or "(new window)" on the link text. (This is for ease of usability for non-savvy site visitors, as well as accessibility for people using alternative technologies to browse our website.)
  • Use "USD" after dollar amounts: $18 USD, or $1 USD, $0.50 (50¢) USD - think globally (¢ is &cent;)

  • For contact information in staff or faculty listings etc., order each line of info as indicated:
    • Firstname (Nickname) Lastname, DegreesCertsLicenses
      Title
      Department or Division
      Voice (###) ###-####
      TDD (###) ###-####
      Fax (###) ###-####
      username@ohlone.edu
      Room ####, Building #, first/second/third/etc. floor, Fremont/Newark campus

    • Firstname (Nickname) Lastname, DegreesCertsLicenses
      Title
      Department or Division
      Voice/TDD (###) ###-####
      Fax (###) ###-####
      username@ohlone.edu
      Room ####, Building #, first/second/third/etc. floor, Fremont/Newark campus

    NOTES:
    • Optional: Department or Division - usually only when person is being listed on a website OTHER THAN that Department/Division site
    • Optional: DegreesCertsLicenses (don't include periods) - ex: PhD, MS, RN
    • Not everyone has a fax or TTY or TDD or Video Phone phone, so they are optional in front of a phone number. When "Video Phone" is listed, "Voice" may be used before the voice telephone number.
    • Do not use "Location:" or "Office Location" unless it is not clear that the location is, well, a location.
    • Do not abbreviate Bldg. or Rm. Use Building 1 not Building One.
    • Additional information about the person (such as office hours or special interestes) should follow the Location on a new line and be preceeded with a descriptive label followed by a colon and space (example: Interests: ).
    • If only one name appears, it is not necessary to highlight the name or to put the information in an unordered list (<ul>).
    • In a list of multiple names are used in the list, use an unordered list (<ul>) with one name on each bullet (and highlight the name), a paragraph tag for each <li>, and use the <span> tag with the "highlight" class around the name.
    • (###) ###-#### - do not preceed with label of "Telephone", "Telephone Number", "Phone", or "Phone Number", etc.; use a space before the opening parenthesis; use a hyphen between the 7 digits; if TDD number is listed, "Voice" may be used before the non-fax telephone number.
    • (###) ###-#### x#### - for extensions, use x#### - do not use "Ext." or "ext." or "extension" etc.
    • Place type-of-phone labels BEFORE the phone number so a screen reader user knows what type of phone number it is before it is read. example:
      Fax (###) ###-####
    • username@domain.com - do not preceed with label of "Email:" or "Email address:" etc. (always encode ohlone.edu email addresses)
  • Use the full telephone number format in lists, tables, and text. Do not leave off the area code or abbreviate a phone number to the extension. Site visitors may not know what the area code is or what the extension's prefix is.
  • Encode (use character entities) all ohlone.edu email addresses when used in the mailto link and when used in body text; optionally encode the "mailto:" in the href.
  • Do not use a mailto link on a person's name (there is one exception). Site visitors using AOL or Yahoo or Hotmail or computers without configured email clients will need to see the email address so they can write it down (or print the page). Exception: If the email address for that person is already displayed and linked to on the page, then the person's name can use a mailto link.
  • Firstname (Nickname) Lastname - Nickname is optional; if used, the person can be referred to later on that page by the nickname and lastname in lieu of firstname lastname.
  • Do not refer to people by only their firstnames or nicknames.
  • Some people are more formal than others. If someone wants to be referred to as Dr. or Professor, then use that title. Abbreviate Dr. Do not abbreviate Professor (do not use Prof.). Examples:
    • Dr. James Smith
    • Dr. Smith (after using Dr. James Smith previously on the page)
    • Professor Ann Johnson
    • Professor Johnson (after using Professor Ann Johnson previously on the page)
  • When indicating a person or organization/department to contact in a sentence, use the long form of the telephone number and/or display the email address with the mailto link around the email address:
    • Contact the Student Health Center at (###) ###-#### or username@domain.com for further information.
    • Contact Firstname Lastname at (###) ###-#### or username@domain.com for further information.
    • Contact Firstname Lastname at username@domain.com for further information.
    • Contact Firstname Lastname at (###) ###-#### for further information.
    • For additional information, contact Firstname Lastname at (###) ###-#### or username@domain.com.
    The phone number can preceed the email address but the entire page should be consistent. If phone number is a TDD, it must be labeled as such (example: TDD (###) ###-####)
  • Headings and column headings in tables should not be followed by a colon (the colon is read by screen readers each time the column is identified; example: The column heading "Course Number:" is read as follows: Course Number colon)
  • Where it makes sense (think about site visitors wanting to print the page of links), website off-site URLs (i.e., to non-College sites) used in the body text should always be formatted using http:// and linking to the URL; example: http://subdomain.domain.ext/
  • Lists of links should always be formatted using a definition list (<dl>, <dt>, <dd>) or unordered list (<ul>) with the URL assigned to the Link Text or Title, a <br /> tag, then the http:// link as text (October 28, 2004: This is a change from what we were doing - all pages with the old format have been changed):

    List of links with summaries using definition list:

    Link1 Text or Title
    Summary or descrption of the link. Blah blah blah. Blah blah blah.
    http://www.subdomain.domain1.ext/
    Link2 Text or Title
    Summary or descrption of the link. Blah blah blah. Blah blah blah.
    http://www.subdomain.domain2.ext/
    Link3 Text or Title
    Summary or descrption of the link. Blah blah blah. Blah blah blah.
    http://www.subdomain.domain3.ext/

    List of links without summaries using unordered list:

    • Link1 Text or Title
      http://subdomain.domain1.ext/
    • Link2 Text or Title
      http://subdomain.domain2.ext/
    • Link3 Text or Title
      http://subdomain.domain3.ext/

    Putting the URL on the Link Text or Title allows screen reader users to follow the link upon hearing the Link Text, instead of waiting for the URL to be read back. Putting the URL in the text allows site visitors to print the page of links and refer to the page for the URLs.

  • For complex images or Flash animations, etc. - do ALL of these:
    1. use "longdesc" attribute on the <img> tag for complex images (not for Flash animations or other non-<img> tag media) to refer to a web page containing a long description of the complex image:
      <img src="coffeedrinkers2008.jpg" width="400" height="500" alt="" longdesc="longdesc-coffeedrinkers2008.html" />
      AND
    2. use "d" link after the complex image:
      • use lowercase d surrounded by parentheses: (d)
      • link goes on the d only - does not include the parentheses: (d)
      • use "title" attribute on the anchor tag with "Long description of IMAGEDESCRIPTION."
      • Example of "d" link code:
        (<a href="longdesc-compleximage.html" title="Long description of Coffee Drinkers by month in 2008.">d</a>)
      AND
    3. insert a jump link tag after the image and d link where the natural flow of information continues:
      <a name="returnfromlongdesc" id="returnfromlongdesc"></a>
      AND
    4. create the "longdesc-name.html" web page:
      • use <dtml-var xtempl_longdesc_header.inc> and <dtml-var xtempl_longdesc_footer.inc>
      • the <h1> heading is "Long description of IMAGEDESCRIPTION"
      • at bottom of page (after the long description), include a jump link back to location just after the image:
        <p>Return to <a href="foodservices.html">Food Services - Coffee</a>.</p>

Recommended books about type (all target print rather than web which has limitations with regard to type):

  • The PC is Not a Typewriter (or The Mac is Not a Typewriter) by Robin Williams
  • The Non-Designer's Type Book: Insights and techniques for creating professional-level type by Robin Williams
  • The Elements of Style by William Strunk, Jr. (available online at http://www.bartleby.com/141/)
  • The Chicago Manual of Style