On-page content structure
Most users don’t read - they skim. Make it easy for them to find what they need by structuring your content clearly and logically.
Using images
Learn about the importance of using images in your content.
Headlines and sub-headlines
- Use keywords: To reassure users and search engines that they’ve landed in the right place, your top headline should include your top keyword (if applicable) and summarize the on-page content as specifically as possible.
- Be specific: Remember, users can come to your page from a number of places. Whether they came from the SERP (search engine results page), a homepage link, or a direct search - your top headline should accurately identify what’s on your page.
- Length: Your top headline should not exceed more than three lines (visually) on a mobile screen.
- Sub-headlines: Most users skim, so they’ll likely be scanning your section sub-headlines to determine where they need to land. Be specific and strategic when labeling each section.
- Use sentence case: Use sentence case for all headers. Avoid headers in all caps. Avoid ampersands (&) in headlines.
Keep content “scannable”
Keep it brief and stick to what’s essential. Accurately-labeled headlines and brief, scannable sections will help users find exactly what they need without having to read through the whole page.
Break content into chunks
It’s good practice to break information into small, easy-to-digest chunks and avoid lengthy sections of text. Content that looks hard to read is often skipped over.
Best practices:
- Limit sentences to 15-20 words and paragraphs to 2-3 sentences.
- Make it scannable with bullet points, indented text, bolded fonts, and numbered action steps.
- Use images to reinforce key messages quickly and attract an audience.
- Use color to guide the audience through the page, highlight key areas, and add visual interest.
Follow the Z pattern
Most people's eyes will automatically go to the top left corner and then work their way down to the bottom right when reading a webpage. To keep readers engaged, well-designed pages follow a “Z Pattern.”
|
That huge wall of text can be pretty hard on the eyes. It’s missing important |
This piece follows a great Z pattern. White space in between chunks of text, images, headlines, and call-to-action links are all where they should be. |
Helpful tips
- The “Bite” is your headline. Make your headline short, relevant, and powerful.
- The “Snack” is a short summary paragraph at the top of your piece.
- The “Meal” is your actual written piece. Remember the principles laid out on this page, and your reader will walk away well-fed.
- To see how the strategy works, check out this great way to use the “Bite-Snack-Meal” approach with your content.
Mobile users make up the majority of online consumers. Typically, a mobile user will only look at the first two screen-fulls of content before deciding to read on or click away. Take a look at how a mobile-first approach can make a significant difference in fulfilling your users' needs.
Call-to-action that requires a user to take an action. “Download Now” buttons, click-to-call icons, links, and forms are all examples of CTA’s. CTA’s should be visually highlighted, and content will likely be structured around these goals.
Words or phrases users input to search engines.
Traditionally h1’s in HTML*, top headlines serve as the overarching title of your content. These are also called headers and heading tags, and they are essential for UX and SEO.
Make sure your top headline accurately describes your content and includes a top keyword if possible. Bonus points if your headline directly addresses popular queries bringing users to your content. For example, if “how to renew a license” is driving traffic to your site, it’s a good idea to shape your top headline around this search so users know they’re in the right place.
*On Ct.gov sites, top headlines may be h3’s, h4’s, etc, instead of h1’s.
Lower in the hierarchy than top headlines, sub-headlines are the succeeding titles for the subsections of your content.
If your top headline is an H1 in HTML, your sub-headlines will be H2’s, H3’s, etc.
Search engine results page.
A style of webpage / print design that draws a reader’s eye downward and across the page using visual cues. See more “Z pattern” examples here!
Related pages
Writing for mobile devices
Making sure your content is optimized for mobile devices.