Best Practices for Text Editor

Headings

Headings (h1, h2, h3, etc.) are extremely important - not only for organizing content for the user, but also for SEO (search engine optimization) and accessibility. Headings are an indicator of content importance, as well as hierarchy. Each heading diminishes in size to emphasize these facts. 

Although headings range from h1 to h6, we will only cover h1, h2 and h3 in this document. It is rare to require an h4, h5, or h6 heading, but they are made available to you. 

Please note that each heading can be styled for font type, font size, weight, padding above/below, etc. This should not be done in the text editor. Instead, these styles should be maintained in the style sheet (CSS) for the site. If you are interested in styling your headings, please send a request to our support team (cms-support@lists.wisc.edu). 

H1 Headings

Every page on your site should use exactly one h1 heading. It should really only be used on the page title - the text that describes what the page is about. For example, on this page, the page title is "Best Practices for Text Editor".  

H2 Headings

H2 headings should be used as sub-headings of the h1 to break out major sections of your page. On this page, the title "Headings" has been given an h2 tag.

H3 Headings

H3 headings should be used as sub-headings of h2 content sections of your page. On this page, the titles "H1 Headings", "H2 Headings", and "H3 Headings" have each been given an h3 tag.

Fonts

Currently, WiscWeb CMS users have the ability to change font type, font size, font color and background color right from the text editor. However, it is very, very rare that text should ever need to be changed with these sorts of inline styles rather than a change be made to the style sheet for the entire website. 

Essentially, every time a user changes something like font type, a <span> tag gets added to their source code, creating what we refer to as "inline styles". If the font gets changed multiple times, multiple <span> tags will be added. These tags tend to override site styles defined in the style sheet (CSS). Ultimately, your source code for the page becomes more and more junked up and will start to look and act oddly. 

For best results, refrain from using these features of the text editor. If you would like to change the font type, weight, size, color, etc., we would really prefer for you to just send a request to our support team (cms-support@lists.wisc.edu). That way, we can just add the styles the right way.

Tables

This is a tough one. Tables used to be considered an acceptable way to lay out content on a page. Why are we discouraging them now? What happened? It's simple - smart phones happened.

Tables simply aren't mobile-friendly or what we call "responsive". They don't size down for smart phones well. This is especially true for tables with multiple columns and long lines of content. In mobile, portions of your table will get cut off, which results in the user is missing out on all of this information. 

The best practice is to limit table use as much as possible. In most cases, we will be able to find desirable, mobile-friendly alternatives for you. Typically this involves laying out the content in a column layout view, or perhaps offering it as a PDF, instead. If you have any questions about table use or want to sit down and plan out some alternatives to using tables, please contact to our support team (cms-support@lists.wisc.edu).