A Well-Oiled Website

Oil can graphicSo, you’ve made the decision to put up a new website. Whether it was done in-house or contracted out by an agency, everyone involved has spent a great deal of time to architect, design, develop and create content for it. In order to keep it looking great and easy to view, it must be well maintained. You don’t have to be a design guru to keep up with the overall craft of the site, you just need to pay attention to the already established styles.

Last month, Andrea Richeson talked about writing for the web. I’d like to expand on that and discuss how to stylize new content for readability as well as keeping the look and feel of your website consistent. Depending on how your CMS was set up, there may be several ways to make updates. The WYSIWYG editor leaves the user with the most room for error.

The WYSIWYG editor stands for “What You See Is What You Get”. It’s essentially a big blank canvas, left open for the user to enter content. The problem with this is the variables that come into play. Often times, users are copying and pasting from a text editor such as Microsoft Word or even an email, which can lead to unpredictable results. Fonts may not be in sync with what’s on the rest of the site, line breaks and spacing become an issue, links become broken, etc.

All of the above can be problematic but also remedied by referring to the existing style of the website and adhering to best practices.

Headlines

First off, headlines should match the actual font, font-weight and color as the rest of the site. The tools provided in the WYSIWYG editor should be very similar to those in your text editor. Assuming you’re starting at the top of the page, your first headline should be the largest. As you work your way down the page and deeper into the page’s heading hierarchy, headlines become smaller and sometimes, a different color.

Another item to pay attention to is the writing style. Is the first letter of each word capitalized or only the first letter of the title? Is everything lower-case? Try to keep your headlines short and never write in all caps. These are subtle details but necessary to keeping your website consistent.

Paragraphs

When viewing paragraphs or pages as a whole, make note of the alignment. Best practices say that left alignment makes for an easier read, as does non-justified text. Again, make sure your pasted paragraphs are consistent with the rest of your site, especially the font size. Text that is too light in color or too small makes it hard for most users to read. Make sure line breaks are where they should be and remove any strange characters that may appear.

When possible, break up longer stories into multiple paragraphs. Shorter groups of text are easier to digest online. Images and/or icons are also a great way to add some breathing room and add some interest to your page. They don’t have to be very big – in fact, thumbnails are preferred so users can click the image to view greater detail, if desired. Your WYSIWYG editor should have built in capabilities to do this.

Final Details

Finally, be sure to pay attention to pasted tabular data. Pasted tables can inherently take on a style of their own by nesting any styling. Make sure your attributes remain true to the rest of the site.

Pasted links can sometimes become broken as well. Double check that they are working correctly and that they open in the correct window. In the editor, you’ll have the choice to open in the current or “parent” window or to launch a new, “blank” window. Make sure your hover and active link states are consistent as well. As a rule of thumb, external pages should open in new windows, while internal pages can remain in the current window.

The creators of your website have provided you with a solid structure to suit your needs. Once you’re given the keys to your site, it’s up to you to keep it looking good and well maintained. While the WYSIWYG editor gives you great freedom, it’s still important to adhere to your already established styles to keep everything cohesive.

Be sure to read Polly Thurston’s article about optimizing images online.

Return to current issue

Let's get the discussion going. Please comment on this article.

About the Author

Jeff McAllister is TradeMark Media's Art Director. Jeff creates design concepts and interface designs on client projects.

Learn More about Jeff

Leave a Comment