Style Guide

Remember: “Strength Through Consistency”

This page demonstrates how certain elements should be formatted on this website in order to maintain brand consistency.

Addresses

1234 Main Street
Springfield, CA 00220

Contacts

Schools

Bold Job Title, Name Extension
email@email.com

Examples:

Principal, Jane Doe x1234
jane.doe@email.com

School Office Manager, John Roe x1235
jane.doe@email.com

Departments

Bold Job Title 
Name 
Phone x1234
email@email.com

Examples:

Accounts Payable
Sam Daniels 
(333) 555-1212 x1235
sam.daniels@email.com

Dates

Examples – Short (M/D/YY):

9/10/11
5/6/78
8/9/10

Examples – Medium (Month, Day, Year):

Sep 10, 2011
May 6, 1978
Aug 9, 2010

Examples – Long (Weekday, Month Day, Year):

Saturday, September 10, 2011
Saturday, May 6, 1978
Monday, August 9, 2010

Times

Use full notation (9:00 am instead of 9 am). There should be no periods (.) after the “a”, “p”, or “m”.

Examples:

9:00 am
10:30 pm
11:15 am

Tables

In general, avoid using tables unless absolutely necessary. They do not work well on mobile devices.

Instead of this (not mobile friendly):

Present PositionFull NameSchool District EmailPhone/Extension
PrincipalJane Doejane.doe@email.comx1234
School Office ManagerJohn Roejohn.roe@email.comx1235
Accounts PayableSam Danielssam.daniels@email.com(333) 555-1212

Do this (mobile friendly):

Principal, Jane Doe (x1234)
jane.doe@email.com

School Office Manager, John Roe (x1235)
john.roe@email.com

When tables are absolutely necessary:

If you must use a table (for example, when there is a lot of data to present and presenting it in paragraph format simply will not work), be sure to use table styling that makes it easier to read. For example, bold column headings and “striped” rows are easier to read. Finally, make sure you add the class “table-responsive” in the advanced settings for the table block to make it swipe sideways on mobile devices.

Example:

PositionNameEmailPhone
PrincipalJane Doejane.doe@email.comx1234
School Office ManagerJohn Roejohn.roe@email.comx1235
Accounts PayableSam Danielssam.daniels@email.com(333) 555-1212

Images

Banner Images:

A series of Banner Images (shown at the top of pages) are provided by EDPress. More images can be added to this selection upon request, but they must meet certain quality and legal guidelines, as they will be available for use on the rest of the website pages. Talk with your District about having new photos made available.

Featured Images:

EDPress provides a library of pre-approved, accessibility-friendly, diverse images for you to use on your website. However, you are able to upload your own images for use in posts and on pages.

If you do upload your own image, please make sure the following guidelines are followed:

Crop Square

Makes sure the image is cropped to a square shape (not rectangular). This makes the image work better with social media.

Teacher And Young Male Student Smiling At The Door Of A School Bus
Correct
Young Male Student Smiling At The Door Of A School Bus
Incorrect
Young Male Student Smiling At The Door Of A School Bus
Incorrect

No Text Overlay

This is an accessibility issue: visually impaired website visitors are unable to read the text on an image. Make sure there is no (or very little) text on the image. Simply use an image without any text on it, then include your text in the copy of the web page.

I Got My Covid 19 Vaccine! Orange Stickers
I Got My Covid 19 Vaccine! (Correct)

Vaccine Logo
(Incorrect)

Provide Descriptive Alt Text

This is also an accessibility issue. Visually impaired visitors use alt text to understand an image’s content. If you use poorly worded alt text, it will provide a negative experience for visually impaired visitors.

Teacher And Young Male Student Smiling At The Door Of A School Bus
Correct Alt Text = “Teacher And Young Male Student Smiling At The Door Of A School Bus”
Teacher And Young Male Student Smiling At The Door Of A School Bus
Incorrect Alt Text = “School Pic”

File Names

Files to be uploaded (board agendas, minutes, reports) should include a date at the front of the file name itself. This helps to quickly find and organize files year-over-year. The date format should be YYYY-MM-DD. Also, do not use spaces in filenames, as they are translated into “%20” in HTML, which is confusing.

Your objective in naming files should be that those who follow after you will be able to easily identify what the file is by simply looking at the title.

Correct Examples:

2032-01-01-Board-Meeting-Agenda.pdf
2032-01-01-Board-Meeting-Minutes.pdf
2035-05-22-School-Accountability-Report-Card-Main-Street-Elemenrtary.pdf

Incorrect Examples:

Board Meeting Agenda.pdf
boardminutesjanuary.pdf
SARC mainst.pdf

File Titles

In Related Downloads and file links within the content of a page it is important to provide a human friendly file title. By default EDPress will use the actual file name (eg “2021-08-24-accountabilty-report.pdf”). You should be sure to provide a more friendly name for the file (eg “August Accountability Report”).

Typography

Heading Styles:

Do not add bold to headings (bold is determined by the main style sheet)

Do not underline headings (this appears as a false link)

Do not use ALL CAPS HEADINGS (All caps is something that should be set in the main style sheet. Can also be considered “yelling”.)

Heading Hierarchy:

Use headings in the proper hierarchy. This is important for search engine indexing.

(H1) Fruit Varieties

(H2) Bananas

(H2) Apples

(H3) Honeycrisp

(H3) Gala

(H2) Oranges

(H3) Navel

(H3) Mandarin

(H4) Cuties

Fonts

Do not use fonts other than what is called for by default. Add bold and italics as needed, but generally avoid underline, as that is perceived as a dead link.

Colors

In some cases, you have the option to select a color from the site-wide preset color palette. For example, with table cell backgrounds. This should be done only when absolutely necessary for the sake of visibility (ie, white text on a black table cell background makes sense). In general, do not change colors.

You'll Love It Here!

  • Award-Winning, Tuition-Free Neighborhood Schools
  • All-Day Kindergarten Offered at all Schools
  • Engaging Before and After School Care Offered at all Schools
  • Exemplary Staff Dedicated to Educating, Supporting, and Nurturing ALL Children
  • Innovative Educational Programs and Academies Including:
    • Arts and Music Education
    • Spanish Language Immersion
    • Science, Technology, Engineering, Arts, Mathematics (STEAM)
    • Online, Home School, and Blended Learning Programs
  • World-Class Physical Education Facilities

Enroll Today!

ESS +      District +

District Spotlight

Spotlight on Maryland Ave Elementary

Check out our latest Spotlight Story showcasing what makes Maryland Ave so special! 

More

Spotlight on Bancroft Elementary

Check out the wonderful things happening at Bancroft Elementary School!

More

Academy Program Offerings Dazzle with Music at Spring Valley Academy

Enjoy this video about amazing students at Spring Valley Academy, an International Baccalaureate Middle Years Programme School.  Academy enrollment is now open until December 2.

More

Get the La Mesa-Spring Valley Schools App

Install
×