Posted on February 20, 2010 - by Lisa Nalewak

Content Formatting Tips for WordPress Pages

WordPress is a popular content management platform that many web designers use to enable content management features on sites they build for their clients, meaning that someone at a client’s organization can access content on their website through an editor and make modifications to the content on a page as they like, without knowing any code or having to FTP web files up and down from their web server.

For the most part, our WordPress clients are fairly conversant with the content management editor (and if they aren’t, we train them), so learning how to efficiently use WordPress tools generally isn’t a challenge. What does become something of a challenge for our clients is understanding some design fundamentals for text and content layouts that allow for neat, professional looking web pages, and that helps each page clearly communicate its message or value proposition.

It is not uncommon for folks untrained in design and layout to try and embellish pages with too many fonts, typesizes, or colors in an effort to give pages some “pizzazz”, which instead leads to pages that look “too busy” or “messy”. Or, perhaps they are not sure how to break up text and arrange other elements on a page to give it proper visual hierarchy and make it easy and intuitive for a reader to follow. Or perhaps content isn’t being clearly communicated because there are not enough subheads or supporting graphics on a page to help tell the story at a glance.

To help, I’ve put together a quick list of tips to keep in mind when formatting pages. While these tips apply when laying out pages in WordPress managed websites, they also are general formatting principles that will help any document look more professional and polished.

1) Text fonts, sizes and styles

The same text elements on every page should be consistent. For example, all titles should be the same font, typestyle and type size. The same goes for subheads and body text.

2) Placement of graphic images in content areas

The size, placement and treatment of graphics on each page in a Word Press site should be similar. For example, if a large image is associated with an article, it should be someplace very visible within the body text of the article and above the fold and the text should always have the same margins around the photos from page to page. Images should be similar in size. Some clients prefer images to be in the same place each time. Some prefer placement variation. What is important is that each page is consistent in how the text and photos interact.

3) Splitting text into 2 columns

Splitting text into 2 columns helps add more white space to a page and makes large passages of text look more manageable, which makes it more likely people will read the content rather than skip over it.

4) Using subheads to split up large chunks of text, and to aid in the communication of messaging.

By using subheads in the body of text, you accomplish a few things: a) Users get a good sense of the main messages being communicated on a page by reading the title and subheads before having to read all the text, so you can communicate your main points faster. In addition, calling out the main ideas of text in subheads means you will enjoy reinforcement of your message or value propositions in the subheads as well as in the main body of the text, so you drive your point home more than once. b) Breaking up text using subheads makes a page look less “threatening” visually. When you break up text into smaller, “digestible” chunks, readers are more likely to read each bit than if it were presented in one long passage.

5) Addition of graphic under page titles

The addition of a graphic under page titles, like a rule line, (be sure it’s consistent across all pages) adds visual interest to the page and gives it a more polished appearance.

6) Inclusion of larger graphics or call-outs to each page to visually communicate messaging

The addition of graphics to a page can be extremely helpful in illustrating your messages or value propositions for the content on that page. Graphics can be photographs, charts, or even text that communicates your main points, but is laid out in a way that is graphically interesting and pulls a reader’s attention.

For example, a long passage of text on a single web page might explain the 3 steps of a “How To” process. To help communicate the main message of the article, create a graphic call-out that lists the “3 steps” in bullet points. Embellish it with graphically interesting (but appropriate) text, and perhaps supporting background graphics (but be sure it is still easily readable). Place the graphic near the top of the article.

This page now communicates the 3 steps of our “How To” process immediately upon hitting its URL. As a reader, I already understand the main point of this entire page of text without reading a single word in the main body of the article. Now that I’m interested, I’ll read the rest to get the full story.