Best practices for online writing including the proper use of headers and document structure; abiding by the standards of the web style guide.
VIDEO TRANSCRIPT:
This video covers the best practices for page layouts, especially for basic pages with text content.
The style guide recommends focusing on a single concept throughout any given page.
These styling conventions allow for maximum skimmability without confronting users with walls of text.
It allows people to read the content in small chunks, and to provide multiple points of entry so they can more easily find relevant information on the page.
It's essential for long pages of dense information.
We'll start with a blank page.
Then we'll insert a title, "Programs," and style it as an H1 in the dropdown box. Formatting the first line as an H1 is recommended, and it is the best practice for accessibility and search engine optimization.
Next, we'll paste some text. We are using placeholder text for demonstration purposes.
We'll use this paragraph repeatedly to create content.
For this example, in our programs, it would be best to break up the content using subheads between the paragraphs.
Note that you mustn't skip subhead levels as they are essential to accessibility. Users with assistive devices like screen readers rely on these levels of structure to work correctly. For example, a Header 3 (H3) should only follow a Header 2(H2) which should only follow a Header 1(H1).
After the page title and introduction sentence, we're going to add a Heading 2 subhead about a particular program.
We're also going to divide this document into kinds of programs based on the audience.
Here we're adding a subhead, for students.
You can change this to a second-level heading by clicking on the styles dropdown at the top.
Then we're going to list each program for students with a third level heading and paragraphs of text by copying and pasting.
We also have programs for faculty, so we're going to create another second-level heading.
Since this is all just placeholder text right now, we can copy the text and paste it under the new header.
Save and close to preview it from inside the site executive interface.
As you can see we've got a list of programs, some intro text, a header, the third level header to break up the content, and then another second-level header for the next section.
That's one way of breaking up content for online writing.
"Methodology" would be another good header for something like this, so we'll add that as a heading 3 and add more text below it.
Let's add one more third-level heading called findings.
Check for any non-necessary divs that may have been added by opening the show blocks section and deleting any that aren't needed.
Then hide the blocks again.
Add another social program by copying and pasting, using the same procedure as before.
Click the icon to preview the page.
It looks like there's a rogue paragraph here, so we'll go back and edit the page, delete it, and then save.
The content writing conventions can be seen on this site in the style guide. [CUT: reading the URL out loud]
The URL for this page is displayed below.
There are plenty of tips for writing, as well as content editing and styling.
It's also helpful to use list items.
For example, we'll add a heading 3 here for our team and start adding names.
Then we'll add another heading 3 along with another paragraph.
Again, the purpose of these styling conventions is to allow for maximum skimmability without confronting users with walls of text.
It allows people to read the content in small chunks, so they can more easily find information on the page.