DO NOT use font styling in your Rich Text WYSIWYG editor

This web page looks the way it does because of a combination of HTML and CSS.  These 2 technologies are the primary languages of the web.  However, very few people who publish web content know HTML & CSS.  This is okay though; very few people who drive cars can build a car.

Using font types, sizes, colors and background colors in a WYSIWYG editor is WRONG

Rich Text (WYSIWYG) editors enable content authors, who know nothing about HTML, to create HTML.  However, there are good & bad practices with regard to HTML & CSS.  When Rich Text editors are poorly configured these tools make it easy for unsuspecting authors to accidently ruin their web site.

Using font types, sizes, colors & background colors in a Rich Text editor will eventually ruin your web site

Most Rich Text editors (and CMS’s) enable authors to arbitrarily select new fonts, font sizes, font colors and background colors.  However, these tools should not be used!  In fact, these tools should be entirely removed from the toolbar.

Understanding why these features are destructive requires some basic HTML & CSS knowledge.  Here is a simple example:

<a href=”http://gabesumner.com”>This is an important link.</a>

The HTML shown above defines a web link (like this).  These links are easy to create using a Rich Text editor.  However, this is an important link and the font should be bigger and red.  This is also easily accomplished using the font size and color features…

Creating an important link using in-line styling in a WYSIWYG editor

However, this is what these features do to the HTML:

<a href=”http://gabesumner.com”><span style=”font-family: verdana; font-size: 24px; color: #c00000;”>This is an important link.</span></a>

The Rich Text editor injects in-line styling directly into the HTML.  This looks fine and it’s easy to understand why many authors are entirely happy with these results.   Eventually, however, this in-line styling will create insidious challenges for the web site.

What will in-line (or ad-hoc) styling do to your web site?

Occasional use of in-line styling won’t create many problems for the web site.  However, as the web site grows and in-line styling multiplies it creates visual inconsistencies between pages.  Each time authors compose content they are arbitrarily deciding what, for example, an important link looks like.

This lack of consistency creates usability issues for web visitors.  Each page in the web site is redefining the visual interface.

Using arbitrary in-line styling in a WYSWIYG editor makes each page feel like it's a new web site

The other challenge arises when the visual style of the web site needs modified.  This might be due to a simple redesign, or it might be needed to adapt the web site to a new form factor (phones, tablets, etc.).  When styling is injected directly into the content it becomes extremely difficult to modify.

Using pre-defined styles will make authors more productive and produce better results

Instead of arbitrarily sprinkling ad-hoc styling through the web site, authors can work with web developers & designers to establish a menu of pre-defined styles.  Once established, these styles can be used by authors to style content:

Use pre-defined styles in a WYSWIYG Rich Text editor

Behind the scenes, the Rich Text editor is applying pre-defined class styles to the content.

<a href=”http://gabesumner.com” class=”ImportantLink”>This is an important link.</a>

In this example, the “ImportantLink” class was pre-defined.  The styling associated with this class (font size, color, type, weight, etc.) is defined outside the web content.  This class could be used thousands of times and, if it needed restyled, modified in a single place.

The pros of pre-defined styles vastly outweigh the cons

Pre-defined styles take some extra time (initially) to define.  In addition, content authors might feel limited when they encounter new scenarios for which pre-defined styles do not exist.

However, once established, pre-defined styles are easy to use, produce rich results, and create a consistent visual experience throughout the web site.  Furthermore, these styles can be easily adapted by web developers & designers if needed.

Long-term, web site management will be much easier when in-line styling is avoided.