Follow

Cleaning Up Your Site for A Clone

As a current, CMS4Schools customer getting a new design can be made easier by doing a site clone. However, you can start working on your current site to reduce the amount of time needing to be spent on your site after the site clone, especially if you are moving to a responsive site.  This article will go through recommended actions and workflows to prepare your current site for a new design.

If you are unsure if you should pursue a site clone for your new design, read the Determine Migration Path article.

When you are working on cleaning up your site for a clone, you will want to address each of these items:

Clean Up Pages

For each of page on your site, use our  Page Cleanup Checklist to review each page's content prior to a site clone.  Each step of the checklist will be explained in detail below.

When reviewing pages and content make sure you look in the following areas of your site:

  • Each Page Category
  • Faculty Pages
  • Faculty Bios (Users Database in the 4schools Admin)

Page Cleanup Checklist

Identify and Update Old Content

Why Update Old Content

  • Websites are most successful when the information provided is timely and relevant
  • Old content can cause confusion for users if it contradicts new content

How to Update Old Content

  1. Turn on "Allow Last Modified Date" in CMS4Schools Settings to help you determine the age of the content.
  2. If the content in a tool is outdated or unnecessary, choose one of the following options:
    • Make the tool inactive if there may be a need for this content again or if the content should be kept as a record of information.
      • If you need to keep the content for records, you may want to create an archive page and move that tool to the new page. 
    • Delete the tool if the content is no longer needed.
  3. If an entire page is out of date or unnecessary, choose one of the following options:
    • Inactivate the page so that users that may have the link can still access the page.
    • Unpublish the page if you want to keep the entire content of the page for your records.
    • Delete the tools on a page then delete the page as a whole if you don't need to keep anything on the page. 
  4. Update any content that can be immediately be updated.
  5. Add any content that can immediately be added.
  6. For any content that should only be on the site, make note of the page and create a document with the content that will be added later.

Remove Colors, Fonts, and Font Sizes

Why Remove Colors, Fonts, and Font Sizes

  • Colors must meet a certain amount of color contrast to be accessible
  • Fonts on new designs will work across all devices and platforms while other fonts may not
  • Font sizes on new designs are responsive and adjust to user's devices
  • Consistent fonts and colors create unified branding
  • Content that has not been originally "Pasted as Plain Text" may contain code that will break the look or responsive nature of a website

How to Remove Colors, Fonts, and Font Sizes

  1. Highlight all or part of the text within an editor
  2. Use the "Clear Formatting" function within the editor to remove extra styles
    1. Please note that this will keep structural items like headings, lists, and links but will remove bold and italics
  3. Add bold and italics back where it may be used to create emphasis within a paragraph

For more information about the Text/Graphic Editor that can be found in multiple tools, read our Copying, Pasting, and Formatting Content article. 

Create a Heading Structure

Why Structure Pages Using Headings

  • Headings are used to in organizing a page's content
  • Headings help screen readers navigate a page for accessibility
  • Headings in new designs have colors and fonts that match the design for consistent branding
  • Headings are a part of SEO (Search Engine Optimization)

How to Structure Pages Using Headings 

  1. Add or Update the Page Title in the Page Properties (H1 Heading)
    • Please note that this may be different and more descriptive than your link name
  2. Organize the Main Body of the page using H2 through H6 Headings
    • Headings should be used in an outline order for the structure of the page
    • Tool Headings can be added above each tool (H3 Heading)
  3. Organize the Right Sidebar using H3 through H6 Headings
    • Tool Headings should be added above each tool (H3 Heading)

Add Alternative Text To Your Images

Why Add Alt Text

  • Alt text is required for any image because of accessibility
  • Alt text helps screenreaders understand an image
  • Alt text shows when an image cannot be rendered for any reason
  • Alt text should be descriptive of the image

Where & How To Add Alt Text

For any of the following tools,  check each image to ensure it has alt text:

  • Text/Graphic Editor
  • Slide Show
  • Photo Gallery
  • Expand/Collapse Tool
  • Announcements Database

General rules about creating good alt text descriptions:

  • Should be descriptive of the subjects and activity within an image
  • Should not be a list of keywords
  • Should be specific when possible
  • Any text in the image should be in the alt text
  • Keep the text short
  • Do not include "picture of" or "image of" 

Make Tables Responsive & Accessible

Why Make Tables Responsive & Accessible

  • Tables should only be used to display relational data
  • Tables need Headers to be accessible
  • Tables may use captions for accessibility
  • Tables must have a percentage width for responsiveness

How to Make Tables Responsive & Accessible

 Within an editor check the Table Properties for the following properties to be set as follows:

  • Width should be a percentage of the page or section
    • 80% to 100% is recommended
  • Headers should be added
    • Select one of the options then update the table when the properties are saved
  • Caption may be added

For more details, read our Table Tricks article.

Add Horizontal Rules for Visual Breaks

Why Add Horizontal Rules for Visual Breaks

  • Create a visual break between sections of content on a page
  • Text-based or image-based visual breaks are not readable for screenreaders
  • Text-based or image-based visual breaks are not responsive

How to Add Horizontal Rules for Visual Breaks

  1. Delete any image or text visual breaks
  2. Add an HR through the functionality in the editor

Review Link Text

Why Review Link Text

  • Links that are directly on the page and not within text are not accessible
  • Links that are directly on the page and not within text will break responsively
  • Link text that does not have an object are not accessible

How to Review Link Text

  1. Replace any links directly on the page with link text
  2. Move the link for any "Click Here" items to the object instead of "Click Here"
    • Please note that it is best to restructure the sentence and remove the click here
  3. Add an object to any links that say something similar to the following:
    • View 
    • View More
    • Read More
    • Learn More

Review Lists Items

Why Review List Items

  • Items in a list should use the ordered or unordered list structure for accessibility
  • A list of all external links should use a Links Links tool or Quicklinks Tool
  • A list of internal links, external links, files, or text should use a Resources/News Tool

How to Review List Items

  • Make sure any lists in an editor are using unorder or ordered list structures
  • Move any list of external links to a Links List or Quicklinks Tool
  • Move any list of a combination of links and text to a Resources/News Tool
  • Move any list of files to a Resources/News Tool

Update Modules

Schools Database

In 4schools, access the Schools Database from the upper right. Add or update the contact information that you would like displayed in the footer for your district and each school. 

Users Database

  1. Delete any users that you no longer need to save bio and pages
  2. Inactivate any users that you may need to save their faculty bio or pages
  3. Upload new photos for everyone to get the highest quality images
  4. Update the default image, if it is out of date
  5. Use the Clean Pages instructions to clean up any faculty bios

Calendar Admin

  1. Delete any calendar categories that are no longer being used
  2. If you are using color coding for categories, make sure those colors are accessible against white.
  3. If you use rSchools, it's best to change anything with rSchools prior to the clone. 

Check For Broken Links

Broken links are an accessibility concern as well as make an awkward user experience for visitors.  We recommend running a search using a Broken Link Checker to find and fix broken links.  

Prepare Images

Modern websites use images to engage and attract visitors.  Prior to the site clone, we recommend gathering a set of images that you would like to use on entrance points and banners of the new website design.  

When selecting images, use the Website Image Guidelines and Specifications article for identifying high-quality images for your new website design.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.