To maintain the consistent design and user interface features of the website, it’s critical to follow the styles and design strategies outlined below. There’s nothing like incongruous design decisions to make a site look unprofessional. Elements such as large red text, random fonts or colored boxes for emphasis rarely achieve their intended goals and only serve to lessen the overall integrity of the website.
Built-in styles
The templates created for American Centuries include built in styles that automatically control design elements such as:
- color
- typography
- layout
- design of menus and navigation
Therefore, never apply these sorts of styles yourself. If you select the correct template and use the correct headings and block elements, the visual styles will take care of themselves. This simplifies the job of editing the site and ensures design consistency and correct coding.
Headings
Headings, by their HTML definition, always exist on their own line. There are five levels of headings: (H5 and H6 are essentially identical).
- H1 is reserved exclusively for page titles.
- H2 is used as a subtitle for major sections of pages
- H3 is all caps and is the next level down of subtitle
- H4 is smaller and used as minor section subtitle
- H5 is the same size as the paragraph text but is blue and bold.
Never use a bolded and/or underlined paragraph block as a heading. Not only is this not the correct visual design, it thwarts screen reader technology that vision impaired visitors rely on to understand the editorial structure of the page.
Lists
Bulleted and numbered lists are their own type of block. A series of paragraphs with numbers at the beginning of the paragraph is NOT the same as an actual numbered list even if it looks the same. Like using an H5 heading rather than a bolded paragraph, using real lists supports accurate screen reading and also maintains the site’s design.
Links
Don’t ever use underlining for emphasis — the only text that should be underlined are links. Link text should always match the title of the page that is being linked to. More info about links is here.
Using the outline view, copying and pasting from Word documents
Tip
it’s a good idea to get in the habit of opening the “Document Overview” panel while editing. This lists all the blocks that comprise the main content area of the page. The more you’re aware of blocks, the better you’ll be at creating pages that use the correct blocks and that don’t contain extraneous, empty blocks.