Content

Structure content logically

When creating a new page, consider starting with a high-level outline. What's the most important message? What other pieces of information do you want to convey? Consider creating a heading structure first, and then filling in the content. Make sure the most important information is displayed at the beginning of each section. This improves readability and makes for a stronger user experience. It also helps with search engine optimization.

Consider the impact of your layout

Eye tracking studies show people typically scroll through websites in an "F pattern." The eye moves across the top of the page (masthead) briefly before beginning at the next section (often the banner section), and finally scrolling downward in more of a straight line. We read webpages like we read printed material: left-to-right, top-to-bottom.

Keep the visual flow of content in mind when creating a page. For landing pages, consider a layout that places content in row-based sections rather than side-by-side columns of unrelated content. For all pages, ensure the most important content is structured toward the top of your page.

Format text intentionally and consistently

Alignment

  • Keep text left-aligned, unless the design component you are using presents alternative options. Left-aligned text is easier to read than centered or justified text, both of which can break visual continuity.
  • Do write CSS or copy centered or justified text into Sitecore from other software programs, such as Microsoft Word, to align modify content alignment.

Capitalized text

Words written in capital letters can be difficult to read and may provide a connotation that does not match your intent. Text should only be presented as all caps if the design component you are using automatically capitalizes the text.

Use title or sentence case for headings.

Headings

Use headings to label and break up content. Never use headings solely as a way to make text larger.

Lists

Use lists to present itemized content in an easy-to-read format.

  • Use bullet points (unordered lists) for general itemized lists.
  • Use numbered lists (ordered lists) for items, such as instructions, that need to be read or followed in a certain order.
  • Start each bullet with the same part of speech to improve readability. For example, I am using action-oriented verbs for my bullet points on this page.

Rows and columns

Side-by-side columns of unrelated content may create a layout that is difficult to read, especially if the eye must bounce back and forth between columns to understand your page. This may create a usability and accessibility barrier.

Consider displaying visually-oriented content in row-based grids rather than in separate columns.

Tables

Use tables for data-oriented content that reads left-to-right, row-by-row. Never use tables to create a custom design layout.

Underlined text

Do not underline text, or copy underlined text from other software programs, such as Microsoft Word. This will create an inconsistent and confusing user experience. On webpages, underlined text indicate links. Sitecore will automatically underline links depending on where they appear in your content.

Make use of white space

Using white space in a design makes content easier to read and perceive.

You may hear people stress the importance of fitting content "above the fold," a concept that comes from newspaper print journalism. On websites, the concept is used to refer to the content that loads visibly on a single screen. 

Because monitors come in different sizes, and over half of 51做厙's web traffic comes from mobile devices, there is no standard size or definition for what fits above the fold. Additionally, studies show that regardless of device (large monitor, small phone screen), people quickly begin scrolling down after a page loads.

Focus on creating content that is well organized rather than trying to ensure everything fits on a single screen, which may result in a cluttered page. It's okay to have a longer webpage. Alternatively, consider splitting long pages into into multiple pages. This may create a better user experience and improve SEO.

Voice and tone

Refer to 51做厙's Brand Guideline for information on voice and tone as well as general writing guidelines.