Writing for the Web
Teaser Content is one to two sentences that should draw the user in, giving a quick synopsis of what the user will find on the page.
Headings are important not only for ease of reading a webpage, but it is critical for accessibility. Heading tags, or h tags, are followed by screen readers to move down the page in logical order.
Each page should only have one (1) H1 tag. This is the Display Name field in Cascade. Do not use more than one (1) H1.
This should be your first H2 (Heading 2)
The H2 is your subheading. It should be specific to what the content directly below it reads. Search engines look for content within an H tag that is relevant to a user's search.
The content in this area should be easily digestible—people scan for information on webpages and don't want to read through blocks of text:
- 2-3 sentence paragraphs
- Use bullet points for lists that have three (3) or more items
- Use plain language, not institutional jargon
- Get straight to the point
This is where you can use an H3 (Heading 3)
H3 tags can be used as a subheading for H2 content. Subheadings should be used in descending order. Search engines look for "H" tags for Search Engine Results Page. Screen readers also read content in order of H tags.
Continue with this hierarchy as needed.
- Do not use headings simply because you prefer the font style or size - they are essential for screen readers to follow the page in a logical order.
- Do not bold or italicize headings - this is non semantic markup and is not needed and can be an accessibility issue.
- Do not underline headings or text - this can be confusing for users who may click thinking it's a hyperlink.
Example Without Formatting for Web
The content below is the same as the content above, just not written in a web-friendly format.
This should be your first H2 (Heading 2)
The H2 is your subheading. It should be specific to what the content directly below it reads. Search engines look for content within an H tag that is relevant to a user's search. The content in this area should be easily digestable—people scan for information on webpages and don't want to read through blocks of text 2-3 sentence paragraphs, use bullet points for lists that have three (3) or more items, use plain language, not institutional jargon, and get straight to the point.
This is where you can use an H3 (Heading 3). H3 tags can be used as a subheading for H2 content. Subheadings should be used in descending order. Search engines look for "H" tags for Search Engine Results Page. Screen readers also read content in order of h tags. Continue with this hierarchy as needed. Note: Do not use headings simply because you prefer the font style or size, and do not bold or italicize headings.
Scrolling is okay! We do it all the time without thinking.
If you think the page you're creating is too long, then consider:
- Is all the information you're putting on the page relevant?
- Is there information that can be condensed?
- Am I trying to make this webpage replace personal interaction?
Users will scroll as long as the information is relevant, interesting, and easily digestible. Users prefer scrolling to clicking away to other pages that may or may not have the information they want.
Clicking is decision-based. Scrolling is not.
Fewer Clicks = More Reading
That is not to say that you shouldn't have internal or external links on a page−you should, if it is there to offer more information to the reader−like downloading an application, or directing them to information that lives on another internal page. It also helps with SEO.
Here is some great information from Moz about writing for the web.