Authoring and formatting content on your website is a fun and creative process. But, there’s so much more at work behind the scenes that can quickly become overlooked next to the surface appearance of a page. Being conscious while you work about best practices for desktop and mobile responsiveness, web accessibility, common human behaviors and search engine visibility will help you to enhance the experience and engagement on your site for every visitor.

In this blog, we’re going to dive into nineteen (yes, there are that many!) content formatting errors that can interfere with a website visitor (or search engine) finding and/or experiencing your content as intended. Let’s dive in!

Part 1: Improper Use of Headings

Heading tags are an important and often mistreated part of every page. They signal to search engines and assistive technologies “hey, read this first, and then this” and so on.

1. Using an Inconsistent Heading Order

Using headings in an inconsistent order sequence has visible and non-visible consequences for accessibility and your overall visitor experience. 

What are the Consequences?

Incompliant with Web Accessibility Standards
Heading order matters for users of assistive technology that provide an indexed listing of page headings include the tag used before the text. Out-of-sequence tags create a disorganized puzzle for visitors to figure out. 

Bad User Experiences
Visitors subconsciously look for consistent patterns. An H1 heading at the top of the page tells them where they are. H2 headings (and H3, H4, etc.) break content into scroll-friendly sections. If the first heading on the page is sometimes an H4, or the next page has an H1 followed by an H3, then an H2, the pattern of structure is broken and visitors can feel disoriented. 

Poor Search Rankings
The order of your Headings tells search engines like Google the order of a page. When you don’t use a logical sequence or keywords, it can negatively impact your search rankings.  

How to Make it Right?

• Establish heading rules and require that all editors stick to them. All pages must follow a traditional outline format. 
  • The page must start with H1.*
  • You cannot have an H3 without a H2, or an H4 without an H3, etc. 
• Check your H1 - H6 styles. Test them in a descending stack and their visual hierarchy should be immediately apparent on screen. Most Finalsite websites have a Style Guide page where you can review your heading styles, and Composer’s content editor has a heading styles drop-down for easy application while you work. 
• Don’t like ‘em? Change ‘em! If you find yourself skipping your current H2s or H3s because you don’t like the look, talk to your Support team or Client Success Manager for options to change the style. Easy fix! 
  
  *If your site design includes the H1 within an upper banner, such as on the Fisher College website, your text content in the white/body area of the page may begin with an H2 or non-heading accent style. 

2. Lengthy Paragraphs / Pages without Sufficient Headings

Pages that contain huge swaths of paragraph text without sufficient subheadings are equally problematic because modern website visitors like to scan a page before deciding to read it. They will look at images, then headings, then pick and choose which sections are relevant to their needs.  

What are the Consequences?

Incompliant with Web Accessibility Standards
Long paragraphs and pages lacking visual breaks (subheadings, images, etc.) are a challenge for visitors with dyslexia, a language-based learning disability that affects 15-20% of people.

Bad User Experiences
A visitor who cannot quickly determine if they can find what they want in an overwhelming wall of text will simply leave. This is especially true for mobile visitors, which accounts for about 50% (or more) or school website traffic.

How to Make it Right?

• Write concisely. 
• Segment your text into small groups with meaningful titles using your site’s subheading styles. 
• If possible, intersperse content with images and other media (see #_ and #_ to avoid image mistakes, though!)

3. Using Heading Styles to Enlarge Regular Text Paragraphs

It can be tempting to want to increase the font size of text to emphasize it. Even if it’s in the right order, it’s still bad practice to use a lower heading style to enlarge a block of text that is not a heading. 

What are the Consequences?

Accessibility
When reviewing the heading list for a site, a large block of text using a H_ style will dominate and overwhelm the list. 

Bad User Experiences
Intermittently using heading styles for larger text lessens the ability for that style to call attention to it as a proper header on other pages. 

How to Make it Right?

• If you have the ability to change the size only, please do that. 
• Check to see if your website’s style guide offers other enlarged font styles that are not part of your headings set. 
• If you are unable to do either of the above, it is better to leave the text in your default size and find other ways to bring attention to it using more engaging layouts, accents, or images. 

Part 2: Poor Image Use

4. Not Using Alternate Text for Images

With modern website CMS capabilities, there is no longer any excuse not to put appropriate alternate text (alt text) for the visually impaired on your website, as required by the ADA.  

What are the Consequences?

Accessibility
Images are just pixels, 1s and 0s. Site reading technology and visitors who have disabled images on their browser cannot see your photo at all. Excluding alternate text leaves them out. 

How to Make it Right?

• All new images you place on your site need alt text. Period. It must be descriptive and clear to explain the image. For example, the picture at right could have an on screen caption of “Learning to Ride!” beside it, but the alternate text should be similar to, “Young girl riding bicycle with training wheels in a park, assisted by two parents.”
• If an image has text in it, the alternate text should make that clear as well, “Rounded 3D graphic button that says, “Inquire Today!””
• Most website content management systems, like Composer, will have inputs to make adding alt text fast and convenient. 

5. Placing Long Stacks of Large Images or Videos on a Page

Photos and videos are a great window into the life of your community, but if you stack them one after another it can be frustrating for visitors to scroll through them all. In addition, large files (300KB or more) loading in a long stream can have a negative effect on your page load speed.

See for yourself at https://clientsuccess.demo.finalsite.com/too-many-unformatted-photos

What are the Consequences?

Bad User Experiences - Scrolling
For both desktop and mobile the appearance of a long, unstyled set of media is cluttered and appears unprofessional. This is especially true if the amount of scrolling impedes a visitor’s ability to get to written information lower on the page.

SEO/Bad User Experiences - Page Load Speed
Having too many photos trying to load on the page at the same time can slow the page load speed, resulting in lower Google page quality and frustration for visitors on mobile devices or slower speed internet connections. 

How to Make it Right?

• Regardless of layout, if your page will have a lot of photos on it, be sure to resize your images to a smaller width and file size before uploading. 900px wide is large enough to fill the content area of most websites in a desktop browser — meaning you don’t need to upload the full resolution file that is 4,000px wide. This will help to ensure faster load times—paired with Composer's Resources module, photos can also be automatically optimized for even faster load speeds on mobile devices.
• If possible use your CMS tools to create photo grids or galleries that play the images in a slideshow or space them evenly in a grid. For 4-6 photos, use your CMS layout options to create columns and place the photos into the columns separately. In either case, it helps if the photos are all the same shape or if you can group similar shapes together in the set.
• Optimize your images before uploading to save even more site speed. Tools like ImageOptim and TinyPNG can help optimize images without losing quality before you upload.
• For news stories, Composer users can set Posts to open in a dynamic page with a Resource Gallery alongside it. Attach Resources to the Post instead of placing them in the content/body and they’ll format themselves

Get inspired by these great examples!

Webb School of Knoxville Art Extravaganza

The Gilman School Faculty Directory

Woodlands Academy of the Sacred Heart Campus Tour

6. Using More than One Navigation Control Option for Slideshows

Slideshows are a great interactive way to have visitors view your photos and videos. Most slideshows can be controlled with a navigation set, such as forward/backward arrows, or a dot for each photo. It can be tempting to give visitors as many choices as possible, but you should really only give them one. This also applies to any scrolling feeds, such as news Posts and Calendar events. 

What are the Consequences?

Bad User Experiences
Multiple navigation tools crowd the content. Arrows on the sides, dots below: where do your visitors focus first? If it’s not the images... not good. 

How to Make it Right?

• Use a single navigation style for each slideshow. We recommend arrows, as user testing shows those are more likely to be clicked, even though the dots are often more aesthetically pleasing. 
• It’s ok to use different styles throughout your website, but if you have two or more slideshow elements of the same type on the same page (images, news posts, etc.), have them all use the same one. 

7. Uploading Image-Only Infographics

Infographics are a popular way to share lots of information at a glance — and when they’re built into your website design to respond to mobile, they look and work great! However, we often see schools upload infographics made in a tool like Photoshop or Canva to their website. And while those images might look great, they aren’t going to work great. Large, full-image infographics can only be seen well by desktop visitors with wide browser windows. For most sites, that's less than half of your web traffic. The rest of your visitors will struggle to see them legibly, if at all.

What are the Consequences?

Accessibility
The content of these images is completely unreadable by screen readers. 

Bad Mobile User Experiences
Your visitors on a mobile screen will see a version of the image so shrunk down, it could be illegible. When that is the case, they will have to spend a lot of time zooming in and scrolling around partial views of the graphic to see it all. 

Poor SEO Indexing
When all of that valuable text about your organization is in an image, search engines can’t see it, so that page cannot be ranked for the terms you have included. 

How to Make it Right?

• For all situations, the best option is to use an alternative live text-based layout with accent graphics that are supplemental, not critical, to understand the information. 
• For accessibility, at a minimum, you should provide a plain text version of the information next to it on the page. Do not attempt to resolve for accessibility by filling in the alt text with all of the words from the Infographic. The alternate text field does not offer the needed structural tags to make it anything but one huge run-on paragraph.  

Get inspired by these great examples!

The Hill School | At a Glance

Cristo Rey Network | At a Glance

St. Bernard Academy Timeline and FAQs

Part 3: Neglecting to Consider the Experience of All Users 

Over 50% of internet users are on a mobile device, and over 3% of your visitors could be using a screen reader. If you’re not considering how they experience your site, it is imperative that you start. 

8. Not Planning Mobile Stacking Order for Multi-Column Pages

The stacking order of a page on mobile is controlled by the columns of a page and the placement of content inside of them. On a page with two columns, everything in the right one will push down under the left one once the screen gets small enough. Designing your pages with only desktop in mind can create UX issues for your mobile visitors.

What are the Consequences?

• Loss of Context and Clarity of Information
  The most common consequence is that the order you want your visitors to experience your content in gets jumbled. Important information that may have been placed on the upper right portion of the page can end up in the middle, or the bottom. What if your visitor doesn’t scroll down far enough to see it? A call to action link without the original neighboring context could be unclear, skipped, and cost you an inquiry, applicant, or donation.

How to Make it Right?

• Test your content for how it will stack up on mobile devices. Every page matters. 
• Use smaller layout element grouping tools in lieu of broad page layout templates. This will allow you to plan your page content in a panel-like format to ensure related items stay together and stack in smaller groups. 

9. Linking to PDF Downloads

We get it. It’s easier to upload a PDF with important information to your website. To address their response to COVID-19, especially, we’ve seen many schools provide links to PDF downloads, rather than adding the information into the website itself.

However, PDF downloads are cumbersome for mobile visitors and largely unreadable by screen readers. Having PDFs as alternatives to live content is great, but if your critical community updates are only in PDF format, you are letting down a portion of your community. 

What are the Consequences?

• Accessibility
  PDFs, which are essentially an image, are challenging for screen readers to parse. Opting to share critical updates in PDF-only format is willfully exclusionary, at best. 
• Bad Mobile Experiences
  PDFs will often get downloaded to the visitors’ mobile devices, taking up their storage space and opening in another app or program, taking them away from your website. Additionally, PDFs aren’t responsive — so viewers will need to do a lot of pinching and zooming to read the content.

How to Make it Right?

• If you must have PDFs on your site, offer a link to a live text only version of the information in either a Google Doc or sub-page of the website. 
• The best solution is to just create the content as live text within the website pages in the first place. This is especially important for public health/safety updates, critical scheduling changes, tuition, financial aid, and application processes. Other great, but overlooked, areas to work on making accessible include searchable live text student handbooks and curriculum guides, monthly publications/magazines, and email newsletters. 

10. Using Tables

Tables are problematic in code structure. For example, a table can only shrink its total width as small as the combined widths of the shortest word in each cell. Further, CSS (cascading style sheets) rules allow the table’s minimum structural width and any manually assigned widths (table, column, cell) to be dominant over the defined widths of the page area or browser window. In flexible width sites, this rigidity can work against you. 

See for yourself at https://clientsuccess.demo.finalsite.com/no-more-tables.

What are the Consequences?

• Bad User Experiences
  Tables with fixed widths can often overlap other columns of text, reducing legibility. 
• Bad Mobile Experiences
  On smaller mobile devices, if a table’s fixed or minimum width is wider than a visitor’s device, it can actually just extend off the right side of the page. This can cut off part of your content completely, making it unreadable. 

How to Make it Right?

• Avoid tables, and seek alternative layout choices wherever possible. If you have multiple columns of content to display, consider using one of Composer’s layout elements to help structure your content.
• If you absolutely must use a table, do not apply fixed pixel widths, such as 500px or 50px to any cell, column or table attribute. If you need control of the widths, use percentages. Set the table to 100% wide so it will flex to the best possible ability. If you set cell widths in percentages, make sure they add up to 100% total for all columns. 

11. Unbalanced Column Lengths

People have some natural expectations on how content will format. When a page doesn’t flow in an expected way, such as having the left side of the page being much shorter than the right, your visitors can feel that something is off. 

What are the Consequences?

Bad User Experiences

• The large white space/gap can be interpreted as something is missing/broken or didn’t load. Screen shot - https://clientsuccess.demo.finalsite.com/too-long-on-the-right
• The right column can be perceived as causing them excessive scrolling.

How to Make it Right?

• Try different column width options. If you have a ⅔ + ⅓ layout, and the information in both is equivalent, try going ½ + ½. 
• If the right column includes feeds of news, blogs, events, or social media. Reduce the number of posts and include a “Load More” Posts button. 

Part 4: Overcomplicating User Engagement and Navigation

Anything you do that adds to a visitors’ total time to consume your content must provide a value greater than the cost of the effort. This is especially true for interactive elements that must be clicked to reveal the desired information.

12. Excessive Use of Accordions

Accordions are typically a very clean visual element and can help to organize related snippets of content that are a bit long to all be out on the page at once, but not quite long enough in character count for their value to be of equal cost to click through to a separate page. But things can go sideways with accordions when multiple sets of very small amounts of information are placed into an accordion set. 

What are the Consequences?

• Bad User Experiences
  If each panel of the accordion has less than three reasonable size sentences in it, the cost of all of those clicks for so little information is too high. 

How to Make it Right?

• Remove the accordions. Group the content in a nice set of heading/supporting text pairs and allow visitors to scroll/skim the topics that way. 
• If you want to highlight each part a bit, consider a callout style or placing the content into small rows of 3-4 topics to add visual interest. 

13. Oversized Accordion Sets that Fill the Entire Page

Most often seen on FAQ-type pages with lots of questions, this creates a massive wall of boxes that your visitors must attempt to scan and decide which panels they actually need to open

What are the Consequences?

Bad User Experiences
This huge bank of panel headings is overwhelming to view and time consuming to scan. 

How to Make it Right?

• Having a robust FAQ, portal, or other page that uses accordions can be done well! The key is to cluster them in related topic groups so that visitors can quickly identify the ones that are most important to them. Use headings and layout elements to group into smaller sets across the page. Group questions by related topic such as academics, admissions, campus policies, boarding/student life, tuition/financial aid. 
• Even in sets of 8-9 panels, do not sort alphabetically. Group questions by theme/topic. 
• With a smaller group of information, it is ok to let a page of questions exist without accordions. Just be sure to still group by topics using appropriate heading tags. 

Get inspired by these great examples! 

Grace Brethren Schools | Safe Reopening

Le Lycée Français de Los Angeles | FAQ 

14. Nesting Too Many Interactive Elements Together

It is tempting to try to file and organize information to a fine point. However, every click on an accordion or tab element is a choice and an increase to the “cost versus value” balance. This is true for accordions within tabs, accordions within accordions, tabs within accordions, tabs within tabs, scroll panels within either accordions or tabs, and more. 

What are the Consequences?

Not Considering the Value of Visitors’ Time
All visitors have a certain amount of effort they’re willing to give (the cost) before they receive what they are looking for from you (value). Nesting multiple elements together adds clicks before they can get to the value, running the risk that you will lose their attention.  

Overwhelming Options
Overcomplicating the effort required to get to your content risks confusing/frustrating both the technically savvy and non-savvy visitors.  

Disappearing structure
On Composer sites, tabs turn into accordions on mobile, so you can end up with accordions inside accordions.

How to Make it Right?

• Eliminate at least one set of choices/clicks and use standard headings in the regular flow of the page for the first set of groupings. Visitors will scan those headings first and then visit the accordion/tab set they actually need.

15. Redirecting the First Page of a Website Section to a Subpage

Visitors and search engines alike are expecting an intuitive path from the homepage to interior content. Your main navigation bar should be the quickest, most direct way to high quality content that gives them the quick gratification that they’re in the right place. This is especially critical for new visitors. Forcing that first page to be a redirect to another page (for example, sending someone to a “Curriculum Guide” page when they click “Academics”) is bad for SEO and creates navigation loops.

What are the Consequences?

SEO
Google is indexing your site in a content flow like a family tree. Having that first level page lacking content and just re-routing to a 2nd or 3rd level page reduces the value of the information on your site. 

Bad User Experiences
Auto-redirecting visitors who have clicked on a first level link is disorienting. For example, if a visitor clicks on Admissions in the top bar, they have chosen that as their path instead of any of the other pages available to them in a drop-down menu below it. To reroute them to How to Apply or Admissions Process is pushing them down the funnel too fast. That same visitor may also try to click the page they are now on in a secondary menu for the section. The page they’re on reloads, creating a navigational loop, and they may assume something is broken. 

How to Make it Right?

• Remove the redirect from the first level page and place content of true value on it. 
• Do not redirect sub-level pages back up to the landing page from a navigation list, either. If you need to link from a sub-level page, do it in the body of the page content.

16. Creating Blank Pages that have Sub Pages

A blank page signifies a visitor isn’t in the right place, yet some schools rely on blank pages as a way to facilitate navigation experiences. This is not a best practice because you are relying too much on the visitor to figure out what to do next. They need clear directionals when you want them to take action.

What are the Consequences?

SEO

• Blank pages provide no value to your search rank  

Bad User Experiences

• A blank page appears either thoughtless or broken. Visitors will assume you do not have the information they need and leave.
• Visitors likely will not notice a secondary navigation menu if the page is blank. Especially on mobile, where those types of menus are often pre-collapsed and require a click/tap to expand them.

How to Make it Right?

• Consolidate the sub-pages into the main page. Reduce the number of clicks required to get the information your visitors need. 
• If there is too much information to consolidate (over 500 words per sub-topic), place the topic names, with a brief summary of them and a link to the subpage within the main page. This will at least help the visitor to scan the available topics and choose the one they need, regardless of their device (desktop, mobile, screen reader). 

Get inspired by these great examples!

American Embassy School | Student Life 

John Burroughs School | Academics

Fairfield Prep | Student Life

17. Using the Default Link Color on Non-linked Text

With the exception of headings, it is not a best practice to use the same color as your default text link color. For example, without clicking, which of the blue text items in the sentence below is a link?

Our Academic Honesty Policy is an integral part of our Student Honor Code. 

What are the Consequences?

Bad User Experiences
Causes frustration for visitors who may think that text with just color applied is in fact a broken link.

18. Using Overly General, “Click Here” Type Text for Links

Every link has two sides: an offer/expectation of results and a destination. When the offer part of the link uses older, general text, such as “click here”, “here”, “click”, “more info,” or other similar phrases, it creates three issues: 

What are the Consequences?

Accessibility

Some screen reading tools, such as AudioEye’s Ally toolbar provides visually impaired visitors with a list of all of the links on the page. This is fantastic, unless all of your links in the list look like this: 

Here, Click here, Click, Download, More info, More info, Page.

Because the list of links is out of context of their normally surrounding text, it’s imperative that they be descriptive of either the offer/reason you want them to click it or the destination. 

Bad User Experiences
For visitors without screen readers, “click here” type phrases are outdated and unmotivational. 

SEO
According to moz.com the phrasing you use for your link text does matter for search engine relevance factors of the destination page. Generic text like “click here” does not send a strong relevancy signal to Google. 

How to Make it Right?

• Eliminate generic link text from your pages, with the exception of “read more” type links for news/blog posts. 
• Use descriptive text for your links that is relevant to the context and content of the destination page. Help all of your visitors, human and SEO robots alike understand what they will get or where they will go if they click your link, such as "download the basketball summer camp brochure", "our curriculum guide", "giving page", "donate online now"

19. Opening News Posts in a Pop-Up without a Unique URL for Each Post

News and blog posts are important content for your website. Your team spends a lot of time writing them and collecting images or videos to include. While opening your posts in pop-ups looks nice and passes accessibility rules, they miss out on some key reputation building features. 

What are the Consequences?

Bad User Experiences
A parent can’t copy the link of a pop-up window to send a story directly to grandpa. And, pop-up content may not be translated by webpage translation tools. 

SEO
Google can’t see your content in modal pop ups as unique to itself. It doesn’t get indexed as a page that they can serve to searchers on the very topics you’re writing about! The best it might do is link to your homepage or a blog index page and then let them scroll back in time until they find it. 

Marketing
Your website and social admin teams can’t copy the link of a pop-up window to share a new blog post on your social media accounts and drive traffic back to your website. 

How to Make it Right?

• If your website CMS provides it, adjust your news/blog posts to open the full story in a full page that allows every post to have a unique URL that can be indexed by Google, tracked by Google Analytics, and shared with others via email or social media. Composer websites can do this on a dynamic page, so you can set it once and forget it. 
• Read these 6 simple changes to enhance your website’s news section to get started today!

Key Takeaway

When you’re a busy school communicator, it’s easy to focus on “getting it done” rather than “doing it the right way the first time.” (Hey, we’ve been there, too.) But when you don’t focus on all those tiny details that add up, your site’s user experience, accessibility, and even performance could suffer.

---

---

As a Client Success Manager at Finalsite, Jenn loves to guide and encourage school website administrators in how to follow best practices for creating engaging and effective websites for their communities. After studying online and interactive design at Lock Haven University of Pennsylvania, she has been assisting schools, colleges, and non-profits to create websites for over 14 years.