Styling Quality Articles For Easy Reading

Article Styling Techniques

Presenting easy-to-read articles takes a little practice and some trial-and-error styling. This short tutorial reveals some of the styling techniques I use.

The main techniques I use include the following:

• Create a visually pleasant reading environment.
• Pay careful attention to the post title.
• Write short paragraphs.
• Micro-bold the beginning of each paragraph.
• Use lists, where appropriate.
• Use a section-header to separate article sections.
• Give special attention to images and captions.

I try hard to make my articles easy on the eyes. The background color I use, #fffef2, is easy on the eyes and shows text, color, and images to good effect. I use Verdana as my first-choice font and use a large enough font size so that the text is easy to read. Figure 1 is a skeletal HTML template showing how I created the article environment: Note: I would normally use an external Cascading Style Sheet(CSS) to tell browsers how to display the article. However, in this tutorial, I used inline styling using the "style=" attribute: the CSS code is placed between the quote marks of the style attribute.

I also try my best to help guide the reader's eyes from paragraph to paragraph. I use "micro-bolding" as a visual aid to accomplish this.

"Micro-bolding" means bolding the first few words of a paragraph to help the reader's eyes move from paragraph to paragraph. More and more, I style the beginning of every paragraph in my articles this way. I have not always done this. You will see a lot of content on my sites with, and without micro-bolding. I think that when you have a chance to read content of each type, you will find the micro-bolded content more inviting and easier to read.

I sometimes think the eyes, like the brain, prefer to take in "chunks" of information. Presenting information in meaningful pieces is, I believe, more effective than confronting a reader's eyes with an unbroken sea of text. The first and most important "chunk" of an article is, of course, the title.

I display my article titles in large, bold text—and I add color to the title, as well. If the title is good, a reader can absorb what the article is about—at a glance. A glance is all your hard, creative work might get after a visitor first finds your article. In that first glance, the title must be compelling enough to entice the visitor into reading further.

Headline Analyzer is an online tool that can help you create compelling titles for your articles. For example, the title, "Styling Tips for Articles," received a score of 25% after analysis: the title didn't significantly involve the reader. After working with the analyzer tool for awhile, I arrived at the present title, "Styling Quality Articles For Easy Reading," which received a score of 83%. Which title seems more compelling to you?

I also use lists to make it easy for a reader to find and absorb important content. List items, set off from the main text body with their bullets or numbers, help the reader focus on important content and absorb it quickly and easily. Lists, a good title, and "micro-bolding" all help readers absorb the content—even if they just skim the article.

I often divide longer, more complex articles into sections. Figure 2 shows the HTML I used to style a section header. If you visualize the section header as being just a box with some text in it, it will help you understand the styling. There is a border around the box and spacing above and below the box (margins). Only the top border is displayed. Inside the box, there is a left-aligned section title. The styling fixes the space between the title and the top border (padding). The border and the text are maroon. I like to use my own styling for images and captions. Figure 3 shows how I style a centered image and caption. It should be noted that the "src" for the image needs to be the full URL to the image. Left and right-aligned images require a little more attention to display them neatly—particularly if you desire to add captions. A left or right image and caption at the top of a paragraph can be neatly displayed if attention is given to the CSS padding and margins (Figure 5, 6). I do use a smaller font-size for the caption. However, if it is desired to place a small image below the top of the paragraph, it is probably much better to add the caption as part of the image (Figure 4). Because I use left-aligned text, the text does not flow around right-aligned images as neatly as for a left-aligned image.

Figure 7 shows the HTML code I use for left and right-aligned images and captions. For an image, such as Figure 4, no caption would be used. Also, for Figure 4, the top-padding was reduced to .5em. Placing and styling images and captions is often a trial-and-error process for me: I make a styling adjustment and preview the results untill I get the look I want. Using styling techniques, like micro-bolding, in order to make articles easier to read, does takes a little extra work. At the very beginning, the title must be carefully crafted in order to be compelling enough—with just a glance—to entice the reader further into the post. Micro-bolding can help the reader move from paragraph to paragraph. Using short paragraphs and lists can help present your content in small pieces, or "chunks," that can be absorbed with greater ease—even if your reader just skims the post. Together, the techniques I have touched on in this short tutorial can help you write quality articles with style and that are easy to read.