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 Position | Full Name | School District Email | Phone/Extension |
Principal | Jane Doe | jane.doe@email.com | x1234 |
School Office Manager | John Roe | john.roe@email.com | x1235 |
Accounts Payable | Sam Daniels | sam.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:
Position | Name | Phone | |
---|---|---|---|
Principal | Jane Doe | jane.doe@email.com | x1234 |
School Office Manager | John Roe | john.roe@email.com | x1235 |
Accounts Payable | Sam Daniels | sam.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.
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.
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.
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.