Accessibility + SEO

Best Practices

Aenean accumsan, tortor vel ornare consectetur, ex urna eleifend erat, iaculis tempus nisi magna non arcu. Etiam vitae facilisis velit. Donec malesuada tortor dolor, a semper quam mattis ut. Nulla placerat, elit a finibus malesuada, velit nulla pellentesque lacus, ac dignissim risus lacus eget tortor. Aliquam erat volutpat. Sed vulputate aliquam vestibulum. Mauris condimentum ultrices justo, nec tincidunt nunc ullamcorper eu. Etiam ac imperdiet metus. Nunc vitae feugiat neque, eu pretium orci.

Headings

In this section: Style Examples & Best Practices

Heading Style Examples

Numerous heading classes or styling options are available in primary blue, charcoal, or white in various sizes. These 3 colors are best practice for readability and high contrast over light or dark backgrounds.

Giant Blue

Giant Grey

Giant White

Big Blue

Big Grey

Big White

Medium/Large Blue

Medium/Large Grey

Medium/Large White

Medium Blue

Medium/Large Grey

Medium/Large White

Small Blue

Small Grey

Small White

Also see: When you would like to increase the font size of a paragraph beyond the standard "ssi-type__body" class, for example on the "intro text" contained in a hero or featured area, you may use the class "intro-paragraph"

This is an example of an intro paragraph. The text is a bit larger and the line-height is a little roomier. The goal is to the set the text apart from the rest, and give search engines a description of what this page or section is going to be all about.

Heading Best Practices

Headings should describe the page or section's main topic. It is important to make headings meaningful for both users and search engines.

Ex: "Phonics Books for Struggling Readers" vs "Open up their world with the right reader"

The first example above explains to a search engine what kind of content will follow on that page, therefore increasing visibility in search results and site traffic. This is also best practice for keeping our website accessible. Also see Writing Guidelines

Designating a heading as level 1, 2, 3, 4, 5, or 6 should done for semantics, not strictly visual presentation. (i.e. Don't make text into a heading just because you want it to be big and bold.) For example, there may be a one off case where the h1 at the top of the page is not the largest text, and an h3 lower down may be styled more dominantly. Or, if you want to highlight important text, use the <strong> element to make text bold rather than using a heading. Style (use CSS) for presentation, write code (HTML) for semantics.

Example Page Heading Structure:

Back to Top

Writing for the Web

Best Practices

Content is king.

Keep content short and concise. Reducing text ensures the important information is most prominent for both humans and machines. Headings should outline the subject of a page in a hierarchy of up to 6 levels (h1-h6.)

Content on the web should answer questions for quick-skimming users and should be considered differently than writing for printed literature. Breaking down information into lists can be helpful. The introductory paragraph is the ideal place to help users and search engines understand what a page is about. Use keywords.

Avoid links that say “click here,” “learn more,” or anything non-descriptive. Some links or buttons may be read out of context, and should make sense to stand on their own in 2-3 words. Also see Links + Buttons

Keep content current and do not copy/paste content from one page to another. Websites with content repeated across multiple pages may rank lower in search results.

Brand Voice and Tone

Copy Voice

Copy voice allows us to create a relationship with our customer. It’s how we build trust, Customers know who we are and what to expect from the products we offer, so they feel comfortable in our brands and their buying decisions.

Our voice is a reflection of how we want our customers to see us: as a knowledgeable, trusted source of information, products, lesson plans and curriculum. We are approachable, passionate about education, the success of students as our top priority, proven, reliable, current trends and issues, updates in standards... xxxxxxx

xxxx straightforward, relatable, authentic, conversational, we use copy that explores and explains the benefits and value of the breadth and depth of our products.

Copy Tone

Copy tone changes based on who we are speaking to. We adjust our copy to meet the needs of the customer, just like in normal conversation.

Based on your audience and subject matter... - celebrating holidays and awards will have a less formal tone, as compared to a straightforward and fact-based tone for subjects like funding, curriculum standards, or literacy.

Web Copy Tone
We speak to the customer like we’re a team. We are here to help them navigate purchasing products that provide the best possible educational solutions for their students and classroom.

Email Copy Tone
Do not use we or us/ speak directly to the customer/teacher as a resource to help them teach ?

Social Copy Tone
Conversational, a helpful informative source for ideas, teacher resources, and lesson plans.