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?
- Identify your primary message and key supporting points
- Create a clear heading structure first
- Map out your content hierarchy
- Position critical information at the beginning of each section
This structured approach improves readability, enhances user experience, and strengthens your search engine optimization efforts by creating clear content hierarchy and topical relevance.
Consider the impact of your layout
Research shows that users typically scan web pages in an "F pattern":
• Initial horizontal movement across the top (header area)
• Second horizontal movement slightly down the page (often the banner section)
• Vertical scanning down the left side of the content
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.
Capitalization
- Use sentence case for general content
- Apply title case or sentence case for headings consistently
- Avoid all caps unless specified by your design component
- Maintain consistent capitalization patterns throughout your content
Headings
Use headings to label and break up content. Never use headings solely as a way to make text larger.
• Use headings to create clear content hierarchy
• Ensure headings accurately describe their sections
• Never use headings solely for visual emphasis
• Maintain proper heading structure (H1 → H2 → H3)
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.
Rows and columns
• Avoid side-by-side columns of unrelated content
• Consider row-based grids for visual content
• Ensure layouts work well on mobile devices
• Maintain clear visual hierarchy
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.
• Reserve tables for data presentation
• Never use tables for layout purposes
• Include proper headers and structure
• Ensure tables are mobile-responsive
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 91茄子'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 91茄子's Brand Guideline for information on voice and tone as well as general writing guidelines.