Montreat College Website Style Guide

Requesting Edits

Request projects through the MarComm Project Request form. Include all images as separate attachments (don’t embed them in Word or Google Docs).

Turnaround time

• Minor edits (submit 1 week before due): Text changes, addition or removal of fields on existing forms
• Moderate requests (submit 2 weeks before due): Substantial text or image changes to a page; updated image requests; new form or page
• Major requests (several months): Launch of a new website or section of a website or redesign or rebranding of an existing website or section

Brand Colors

Montreat College Brand Colors

Montreat primary colors

• Blue #0a2240
• Gold #aa9767

Alternate colors for template grid

• Medium gray: #54565a
• Light gray: #d9d8d6
• Teal: #00a5b5
• Light brown: #ceba88
• Greyish blue: #113f68
• Turquoise: #0c5466

Carolina Cyber Center Brand Colors

Updated on 3/15/22

• Dark Blue: #171a45
• Light Blue: #65c0ec 
• Red: #ef4123 (limited use on web: header and footer buttons only)
• White: #ffffff
• Medium Blue: #3064ae (print only)

Style Guide

Montreat College follows the AP Style Guide. This summary of some key points is adapted from a summary by Prof. Jack Gillespie of Rowan University.

Alumni years

Format alumni names as First Name Last Name Year. Examples:

• Annie Carlson ‘04
• Jen ’03 and Justin ’01 Barbour OR Justin ’01 and Jen (Haynes ’01) Barbour
• Andrew Bobilya ’95, Ph.D.

Titles

• Titles used in front of names:
  • Official titles are usually capitalized, e.g. President Paul Maurer, Registrar Fred Miller.
  • Occupational titles are not usually capitalized, e.g. attorney John Smith or editor Gertrude Miller
  • Mr., Mrs., Miss and Ms. are not usually used except in obituaries.
  • In a first reference to a person, use and abbreviate the titles Dr., Gov., Lt. Gov., Rev., and Sen. After the first reference, use last name only, e.g. Rev. Rachel Toone on first reference and Toone on second and later references. 
  • When used in a direct quote, all titles except Dr. and Mrs. are spelled out.
• Long titles go after names and in lowercase, except for words usually capitalized, e.g. Daniel Bennett, Montreat College director of student life.

Academic Degrees

• Usually do not use abbreviations
• Form:
  • associate degree
  • bachelor’s degree
  • master’s degree
  • doctorate
• Use abbreviations (e.g. B.A., B.S., M.A., M.B.A.) when referring to many individuals and abbreviations are needed to avoid cumbersome length
• Only use abbreviations after a full name, set off with commas
  • Good: Don King, Ph.D., spoke.
  • Not good: King, Ph.D., spoke.
  • Not good: Don King Ph.D. spoke.
• Do not use two titles with a name (e.g. Dr. Don King, Ph.D.,)

Acronyms

• Common, widely known acronyms can be used without explanation (FBI, CIA, YMCA)
• Use acronyms in parentheses after an organization name, e.g. Southeast Collegiate Cyber Defense Competition (SECCDC). The acronym may be used later in the article. (This is a Montreat College-specific exception to the AP Style Guidelines.)
• States are not abbreviated when they stand alone. They are abbreviated when used with a town or city, except for Alaska, Hawaii, Idaho, Iowa, Maine, Ohio, Texas, and Utah. For example, Alexandria, Va.; Montreat, N.C.; Austin, Texas.

Addresses

• When a street is given without a number, never abbreviate. Examples: Lookout Road, Assembly Drive
• When a numbered street address is given, abbreviate Ave., Blvd., and St. only. Alley, Circle, Drive, Road, Terrace, and Court are always spelled out. Examples: 103 East State St., 201 Lookout Road
• For numbers in street names, spell out First through Ninth and abbreviate 10th and above.

Creative Works

This guideline reflects some exceptions to the AP Style Guidelines use by Montreat College.

• Use italics for titles of books, movies, operas, television programs, works of art, magazines and newspapers. The Bible is not italicized but the same capitalization rules apply.
• Put quotation marks around titles of plays, poems, songs, lectures, and speeches; do not underline.

Money

• Dollars: Use $ with arabic numbers, e.g. $3, $15.
  • Include cents if it is not an exact dollar amount, so $3.65 and $3 are correctly formatted but $3.00 is not 
  • For amounts over $1 million, abbreviate with the appropriate word and up to one decimal point of precision, e.g. $1 million, $1.3 billion (but not $1.31 billion)
• Cents: For amounts $0.99 or less, use an arabic number and the word cent or cents, e.g. 1 cent, 3 cents

Time

• Centuries: Spell out the first through ninth centuries, using lowercase; For all other centuries, use the Arabac number with the appropriate ending, e.g., 10th century, 11th century. Century is always lowercase unless it’s part of a proper name, e.g., 20th Century Fox.
• Decades: Use arabic numerals and add s with no apostrophe, e.g. 2010s, 2020s.
• Seasons: Do not capitalize unless part of a formal name, e.g. Winter Olympics.
• Months:
  • Abbreviate where possible when used with a date, e.g. Jul. 4, Dec. 25.
  • Use the full month when it stands alone, e.g. September.
  • Use the full month when used with a year and no date, e.g. March 2020. (Do not place a comma between month and year.)
• Dates and days:
  • Do not add st, nd, rd, or th to dates, e.g. July 4 and Dec. 25 and not July 4th and Dec. 25th.
  • Do not use “on” before dates or days, e.g. “July 4” and “Thursday” and not “on July 4” or “on Thursday.”
• Hours:
  • Use a.m. and p.m., not am/pm or AM/PM or A.M./P.M.
  • When a time is exactly on the hour, do not add the colon and two zeroes, e.g. 1 p.m. and not 1:00 p.m. Use the colon and minutes with all other times, e.g. 1:15 p.m. and 1:36 p.m.

Dimensions

• Use arabic numbers and no abbreviations (e.g. inches, feet, yards) to indicate depth, height, length and width. For example, the road is 20 feet wide, and the car is 8 feet long.
• Before a noun, hyphenate adjectival forms, e.g., he is a 6-foot-7 power forward standing on a 92-by-49 basketball court.

Numbers

• Usually spell out large numbers, e.g., thirteen million, four trillion.
• Use figures for 10 and above, e.g., nine trucks, 13 cars.
• Spell out whole numbers below 10, with these exceptions:
  • Use Arabic numbers for acts of a play, addresses, ages, aircraft names, TV channels, chapters, congressional or other political districts, course numbers, court decisions, dates, decimals, distances, earthquake magnitudes, election results, formulas, fractions, handicaps, heights, highway designations, latitude, longitude, miles, model numbers, monetary units, with No., page numbers, percents, political divisions, proportions, ratios, recipes, room numbers, route numbers, scene numbers, scores, serial numbers, sizes, spacecraft designations, speeds, telephone numbers, temperatures and years.
  • The First through Ninth amendments to the United States Constitution are spelled out and capitalized. The 10th and above use figures and the appropriate ending. If used with a number, amendment is always capitalized.
  • Court names use Arabic numerals and endings and capitalize court, e.g., 5th Circuit Court.
  • Fleet designations use Arabic numbers with appropriate endings, e.g. 6th Fleet.

Punctuation

• Do not use a comma before the last item in a simple series.
• Always place periods, commas, and semicolons inside quotation marks, whether a full quote, partial quote, or quote used for emphasis.
• Place question marks and exclamation points inside quotes when they only apply to the quoted matter and outside quotes when they apply to the entire sentence.
• Use ellipsis marks to designate an omission in a quote or an incomplete thought. Place a space before and a space after the ellipsis marks.
• Hyphenation:
  • Use hyphens to form compound words and in numbers
  • Use suspensive hyphenation to reduce the words in a sentence, e.g., We offer two- and four-year degrees,
  • Hyphenate compound adjectives unless the first word ends in ly; e.g., odd-numbered years, newly discovered manuscript. Give age as an Arabic numeral if included in a compound adjective, e.g. 5-year-old boy.
• En-dash (–):
  • Use an en-dash to indicate date and number ranges, e.g. 9 a.m.–11 a.m.
  • Use an en-dash to make complex compound adjectives clearer, e.g. North Carolina–Tennessee border or Pulitzer Prize–winning journalist
• Em-dash (—):
  • Use an em-dash with a space before and a space after, except at the start of a paragraph
  • Use an em-dash to mark an abrupt change in a sentence (an abrupt parenthetical thought)
  • Use an em-dash to set off a numbered series within a sentence when that series requires commas but would otherwise itself be set off with commas
  • Use an em-dash for author attribution, e.g. —Shakespeare
  • Use an em-dash in datelines, e.g. MONTREAT, NC — President Paul Maurer announced …

Images

Image Formats

• Logos: Save as SVG, selecting outlining in the Adobe Illustrator export process.
• Images requiring transparent background: Save as PNG
• All other images: Save as JPG with a compression level of 80% of uncompressed quality (80 in some programs, 20 in others)

Image Dimensions

• Page Headers/Hero Images: 2000x550px
• Half-width image blocks: 1000x550px
• Profile pictures: 800x800px

Page Elements

Elements Used in Page Design

• Header/Fullwidth Images: Unless the page is hidden from Google, 1 per page to keep the page within Core Web Vitals
• Half-Width images: Also in limited quantities to keep the page within Core Web Vitals
• Text
• SVG Icons: Must be created by Montreat College’s graphic designers; SVGs downloaded from the internet can have embedded viruses
• YouTube / Vimeo Video Embeds
• Buttons
• Forms

Elements With Restricted Use

• Accordion: An accordion is a vertical stack of boxes that can be clicked to reveal content associated with each box. In an accordion, only one can be open at a time; opening one closes another. This does not play nicely with either SEO or Accessibility best practices. Both encourage content to be visible. In particular, this should mainly be used on pages hidden from Google search results and is particularly discouraged from pages that should rank well in Google.
• Toggle: A toggle is like an accordion except that multiple toggles can be open at once. The same usage restrictions apply.

Elements Not Used

• Image Slider: Incompatible with SEO best practices; hidden content and pushes page past Google’s Core Web Vitals thresholds
• Video Slider: Incompatible with SEO best practices; hidden content and pushes page past Google’s Core Web Vitals thresholds
• Autoplaying video: Not ADA Compliant
• Tabs: Hidden text incompatible with SEO best practices
• Pop-ups: Google calls pop-ups that obstruct users’ view of the content intrusive interstitials, and they rolled out an update penalizing these in February- March 2022

SEO

Montreat College seeks to follow Google Webmaster Guidelines and comply with SEO best practices.

Google Says do:

While there are hundreds of ranking factors, Google has indicated that three are the most important:

1. Content
   1. The most important thing is that the page has the content that matches the user’s query
   2. The content also needs to be authoritative and comprehensive; the exact word count depends on the field and the competition for that query for is often around 2,500 words
2. Links
   1. Google penalizes any artificial methods of link acquisition it detects, and it’s good at detection; best practice is to make content so good that others recognize it as authoritative and want to link to it, preferably without begging
3. Core Web Vitals
   1. The page needs to perform well in these areas (discussed for several years, fully live across the search index by March 2022):
      1. LCP (Largest Contentful Paint): The length of time between when the page starts loading and when the largest element visible to the user (e.g. image or text block) is fully loaded 
      2. FID (First Input Delay): The delay between when a user clicks something (e.g. a link) and the browser can act on that click
      3. CLS (Cumulative Layout Shift): How much the page’s layout shifts during and after it loads.
   2. Pages with more than one fullwidth image are almost certain to not pass Core Web Vitals
   3. The more scripts are present on a website (e.g. live chat, Hotjar, Google Analytics, Google Tag Manager, Facebook Pixel), the less likely the page is to pass Core Web Vitals
   4. It is okay to make a page that does not pass CWV if it’s hidden from organic traffic and for users targeted from other avenues, e.g. email promotions, social media promotions, or PPC ads, and search engine traffic is not desired. But key navigational pages should follow CWV if either that page or its subpages matter in SEO
   5. Core Web Vitals does not rank a page by itself; a page that loads fast but does not answer the user’s query will not outrank a slow page that answers the user’s query. But for most high value queries, two or more pages reasonably answer the question, and when they do, Google will rank the page that passes CWV above the page that doesn’t.

Google Says don’t:

Google’s Quality Guidelines state that they will specifically penalize sites that break these rules:

1. Don’t make sites for search engines instead of primarily for users
2. Don’t deceive your users
3. Don’t attempt to cheat to improve search engine rankings
4. Don’t participate in link schemes like buying and selling links, trading links, or “extensive” guest posting links
5. Don’t make pages with little or no original content (Independent studies tend to indicate 200 word minimum as a general rule of thumb)
   1. If we want to rank for several related keywords, we use them as multiple subheadings on one page (discussion)
   2. Moz recommends creating content 10 times better than all competition
6. Don’t hide text or links
   1. Anything with the intent to deceive or hide triggers major penalties and removal from Google
   2. If text is hidden in accordions or expandable boxes it won’t trigger a manual penalty because Google doesn’t think there is necessarily intent to deceive, but Google tends to treat such content as though it doesn’t exist or is at least de-prioritized because when someone types a search query into search Google wants to send them to a page that shows the answer to their query without any additional clicks needed
   3. Google also specifically encourages html description / transcript of videos for accessibility and SEO
7. Don’t participate in affiliate programs without adding sufficient value
8. Don’t load pages with irrelevant keywords
9. Don’t use text as images
10. Don’t use pop-ups that obstruct users’ view of the content (which Google calls intrusive interstitials) (Particularly emphasized in search results after March 2022).
11. Don’t create pages with duplicate content. Exception: If one is needed for a marketing campaign, it needs to be (a) hidden from Google and (b) links from the public site need to point to the public page, not the unlisted page.

Accessibility

Montreat College needs to comply with WCAG 2.1 AA.

Policies

1. Text is presented as text, not as images (Google policy, WCAG 1.4.9)
2. All non-text content (images, videos, etc.) need text alternatives (Google policy, WCAG 1.1)
   1. Alt text for images
   2. Captions and descriptions for videos
3. CAPTCHA is not used unless there are alternatives for those with sensory challenges (WCAG 1.1.1)
4. Information is not communicated with color alone (e.g. red/green) since 9% of men and 1% of women have a form of color blindness (WCAG 1.4.1)
   1. This includes links; they need to be underlined, bold, or otherwise visually distinct by a method other than color alone
5. Minimum contrast ratio between foreground and background is 4.5:1, except that large text headers can be 3:1 (WCAG 1.4.3)
6. The site is keyboard navigable (WCAG 2.1)
   1. Keyboard navigation has no traps (WCAG 2..1.2)
   2. When navigating the site by keyboard, there is a visual indicator of the active link (WCAG 2.4.7)
7. Video does not flash more than three times per second (WCAG 2.3.1)
8. Each page has a title (h1) that displays its topic or purpose (WCAG 2.4.2)
9. Sub-headers indicate sections of the page (WCAG 2.4.6, 2.4.10)
   1. For SEO purposes, these are structured, e.g. h1 h2 h3 h3 h2 h3 h3
10. Links convey meaning (not simply “click here” or “learn more”) (WCAG 2.4.4)
11. A breadcrumb indicates the user’s location within the site’s hierarchy (WCAG 2.4.8)
12. Menu / navigational order is consistent across a website or a subsection of a website (WCAG 3.2.3)
13. PDFs cannot [should not] be used unless specially formatted to be fully accessible (documentation) or we provide an accessible alternative
    1. But even if a PDF was formatted to be accessible, it’s still a bad idea for SEO. Best practice for SEO is content that stays at an unchanging link once updated.
    2. It’s also not best practice for SEO since content that is not mobile-friendly (responsive) is penalized in search engine ranks (Google’s web.dev) because it is not a good experience for mobile users, which are more than half of most sites’ users
14. It’s highly encouraged to not require links to open in a new window, but if a link does open in a new window, there should be a warning (WCAG)
15. Optional but recommended: Links except text links (e.g. buttons) are at least 44×44 pixels (2.5.5)

User Interface/User Experience

User interface and user experience best principles include:

1. Keep the interface simple (usability.gov)
2. Create consistency and use common UI elements (usability.gov)
   • This applies to predictable and consistent design between pages (uxpin.com)
     • If some pages have a menu, all pages should have a menu
     • Menu/header design should be consistent layout between all pages
   • It also applies to using predictable conventions between websites
     • Users know how to use standard menus, menu dropdowns, and hamburger menus (though the latter is not optimal for accessibility); they do not know how to navigate a site where menus are inconsistent or where there are no menus
3. Design for short attention spans (Adobe)
   • Attention span decreased from 12 seconds to 8 seconds by 2015 (TIME), and has probably decreased more since
4. Users prefer gradual redesigns to noticeable changes (Adobe)

Privacy

U.S. and global privacy law is constantly changing and increasing in complexity. Most laws are dealt with at the site level, but one consistent principle applies to content creators: Users need to be told how their data will be used and agree by opting into its use.

C3 Forms

Blue Background

• The form’s background color is #171a45.
• The font is Lato. All form fields are in all caps while text being entered in fields can be mixed case.
• The fields fill 100% of the iframe.
• There is 10px spacing between the fields.
• Labels appear above fields. The size of the font in labels is 1.3em and its color is #ffffff. There is 2px padding below the label and above the field. The star to indicate that a field is required is also #ffffff.
• The text entered in a field is #000000 and its size is 1em. Padding above and below the text is 15px, padding to the left and right is 18px. Background color to the text is #ffffff.
• The text, paragraph, and dropdown fields all have white backgrounds. Their borders are colored #65c0ec color with a 5px width a 20px border radius (rounded corners).
• If a form cannot be successfully completed, it needs to have an error message (text color: #ffffff) that specifies which fields caused the form fail and why. There also needs to be a distinction between form fields left blank and form fields inaccurately filled. For instance: “Email address is required” if the email address is a required field and left blank, or “Valid email address is required” if something is in the field but is not a valid email address.
• The submit button has a background color of #65c0ec. Rounded corners have a 20px border radius. The text size of the word “SUBMIT” is #171a45 and its size is 1.6em. Its font weight is 800, and kerning is .2rem. There is 10px padding above and below the word “Submit,” and 20px to the left and right. 
• When the mouse hovers over the submit button, the background color changes to #171a45 and the text color changes to #ffffff. There is a 5px wide border with a #65c0ec color and 20 px rounded corner border radius.

White Background

Same as Blue Background, except:

• The form’s background color is #171a45.
• Form field labels change from #ffffff to #171a45.