Website

On This Page

Overview

The look and feel of the Santa Fe College website is determined with functionality, compliance and the college brand in mind. The public-facing "sfcollege.edu" website is primarily maintained by a team of web designers and developers in Marketing & Communications (MarCom), while the password protected parts of the SF website, including eSantaFe and eStaff, are maintained by Information Technology Services (ITS). MarCom and ITS are partners in designing and optimizing the college websites. Advanced design guidelines for ITS programmers are currently in review.

This page addresses branding and accessibility guidelines for the network of content editors around the college who are trained to use Percussion, the content management system utilized on the website. These editors are responsible for updating pages with accurate information. Updates to the website are reviewed by MarCom for branding and 508 compliance and published in bulk after business hours, when site traffic is lowest. Updates typically take 24 - 48 hours to be published after being submitted. If edits are necessary, that timeline may be delayed. Site updates that are urgent should be brought to the attention of the director of MarCom.

American Disabilities Act (ADA) or 508 Compliance

Santa Fe College is committed to providing an electronic environment that is accessible to everyone, including individuals with disabilities, in accordance with the ADA (508 compliance). For more information about creating and formatting accessible content, including PDFs, go to the electronic accessibility section of the SF Accessibility page.

Writing for the Web

See also the Language and Messaging page in the Guidelines section of this Brand Guide.

Search Engine Optimization (SEO)

Search Engine Optimization (SEO) means writing and organizing website content so that users looking at your page can find exactly what they are looking for, and so when using a search engine, users are more likely to find your page. It is best accomplished by increasing the use and relevance of specific keywords, limiting content to what is meaningful and valuable, and using headings and navigation menu titles strategically.

Use page titles and make sure they are descriptive and relevant to the content on the page. Page titles should be written to portray the most specific to least specific information.
Write page summaries for any page that doesn't start with content (banner image precedes text) or has fewer than 500 words.
Link back to yourself often, and when appropriate, encourage other sites to link to you, too.
Avoid frames and iframes. They may generate content that is not in HTML format and will not be picked up by search engines.
Use meta tags, or "keywords," that associate with both the content on the page and what search terms might lead to the page.
Design clear and consistent navigation.
Be patient and get a head start! It can take up to six months for search engines to reindex your site. Don't expect immediate results.

Formatting for the Web

Following these formatting tips will help you keep the website content consistent and accessible.

Text

The standards for formatting text for the web have changed over the years. Here's a quick refresher:

Use italics to place emphatic stress on a particular word by using the <em> tag.
Use bold to emphasize the importance of a particular word or phrase by using the <strong> tag.
Avoid changing font colors or using underlined text, as this can cause text to look like a link.
Align text left. Justified text creates uneven spacing, making it challenging for some people to read.
Avoid placing text over patterned backgrounds. It is difficult to read for people who are visually impaired.
Do not add new fonts. The SF fonts are selected for optimal visibility by all users.

Lists

Lists serve many purposes. They can group related items together, create visual interest and show levels of importance or sequence.

Format ordered (numbered) or unordered (bulleted) lists as lists. Don't use asterisks or numbers to create a list manually.
Use ordered lists for instructions where steps should be followed in a sequence, or if you will need to refer to specific items on the list.

Headings

Use properly formatted headings to structure the page.

Do not use Heading 1 (h1) in the content area. Screen readers use H1 to navigate by, so it's reserved exclusively for page titles.
Use heading tags appropriately and hierarchically (for example: h1, h2, h3, etc.), using only one h1 header per page.

Tables

Tables are to be used to display tabular data, which is information that you might otherwise display in a spreadsheet or a grid. Examples of commonly used tabular data:

Curriculum and course schedules
Service, product and price listings
Comparison tools

Tables are not used to structure the visual display or layout, to structure regular content (paragraphs and headings), to center content on a page, or attempt to change colors or format of your webpage as a whole. When using tables:

Format table content to read left to right, as assistive screen reading software and technologies follow this pattern.
Add data to the gold header bar of SF tables. This will ensure a screen reader clearly identifies the data.
Add data to column and/or row headers

Attachments

Web pages are the most accessible way to display information – meaning that they are widely compatible between many browsers, screen readers and devices. Alternative file formats are not so universal, but are accepted on the SF website if deemed accessible. Title attributes should always be added for these files.

Acceptable alternative files:

PDF (.pdf)
Word (.doc, .docx)
Excel (.xls, .xlsx)
PowerPoint (.ppt, .pptx)
Image (.jpg, .png recommended)

All other file types are not accepted (i.e. .exe, .swf, etc.)

SF’s content management system (CMS) allows users to create and modify the contents of the current SF website. Pages that are no longer current and/or relevant will be archived. Please note that archiving is not a means of storage. Documents and files that are no longer accessible on the public SF website should be stored on a platform designed for long-term storage. If you have a large number of PDFs that are not accessible and do not need to be public facing, please contact communications@sfcollege.edu so MarCom can help you develop a plan for long-term storage.

When PDFs are helpful

If information spans six or more pages, use the Adobe software to create an accessible PDF.
If special characters, like math symbols, cannot be portrayed in HTML, create an accessible PDF.
If a form must be filled out electronically but printed for a signature, create an accessible PDF.

Ways to remediate inaccessible PDFs

Replace:

If the content spans 1-6 pages, convert it to web content using HTML. It's accessible and way easier to read on a mobile device.
If a form doesn't require a signature, convert it to a more accessible format (e.g. Qualtrics, Salesforce, etc).
If try as you may you cannot make a PDF accessible, replace it with a Microsoft Word document.

Replicate:

If the college is legally required to publish a file that is inaccessible, be prepared to provide an alternative version(s) of the same content.

Repair:

If the PDF file is from a scanned document, restore it using optical character recognition (OCR) in Adobe Acrobat.
If the PDF contains written comments and notes from a scanned document, OCR the document. Save the PDF as a Word document and use the Comments/Tracking tools in Word.
If there are no other options, make the PDF document accessible. For more information on making PDFs accessible, see the Electronic Accessibility page.

Note: It is not necessary to update the college logo or improve accessibility of older PDFs that are part of our archives. However, archived PDFs should be made accessible at the request of anyone needing assistance.

Designing for the Web

Templates

Certain pages are more oriented toward promoting the college and recruiting students. These pages use a more design-intensive template, so they will be more attractive to prospective students and larger community patrons. These sites require more time and energy to maintain, and so the number of departments that can use them are limited. More internal pages that offer information for faculty and staff use a more simple template.

The SF website offers two primary layout options: full width, and left sidebar navigation.

Below are the standard sizes of photos and their guidelines for use on our website: