Expert Advice: Formatting Your Blog Posts

2,300 Views

The quality of content on REW Blogs has been steadily increasing over the last few months, but not many options have been available for presenting these articles in an attractive & useful way. I'm here to introduce a couple of simple ways to quickly "dress up" your posts to make longer articles more approachable & easier to digest.

Some Simple Rules Before we Get Started

Starting in a plain-text editor is a great idea for many reasons:

  1. Distrations are kept to a minimum
  2. A text editor is less likely to crash
  3. Encourages logical flow & content structure
  4. Less likely to suffer from generated garbage styles and code

Flow & Rhythm

If you have a longer article, split it into 3 or 4 logical "chunks" seperated by headings (h2s). Your readers can get a good idea of the flow of your article at a glance and it's much less intimidating than a large unbroken block of text. For longer articles, break the sections into sections (much like this article does). It helps if each section has a similar length of follows a pattern (think of it as poetry or song rhythm).

Everything for a Reason

Write your article in a plain-text editor. There's no formatting options, no image widgets or dodads to distract you from the chore (I mean, joy) of writing. Now read it--it should make sense and stand on its own before we leave the text editor. Every piece should have a reason to exsist and enhance your work (notes to add support graphics or charts later is O.K.).

Prioritize Your Content

People have short time spans, put your most important details at the top--don't fill your pages with too much fluff (yawn!). Spend some time putting together some real content, writen by you--copy and pasting stats or listings into a post without anything else (support text, sources) is not useful to anyone and makes you look unprofessional.

Prerequisites

In the interest of brevity, We're going to assume you have a basic understanding of HTML here, have used basic tags, understand what classnames are and how to use them.

Working with Structure & Layout

A good content structure in an article is like a good frame on a house. If the frame isn't square, the rest of the house won't hold up.

REW Section

This helps break up your article into logical chunks of content.

<div class="rew_section">
<!--Your Content Starts here-->
<div>
<div class="rew_section">
<!--Your Content Starts here-->
<div class="rew_section">
<!--Nested Sections are OK-->
<div>
<div>

REW Pull

This indicates that the content should be pulled out of content of the article. Use with rew_aside or blockquote to indicate a pullquote or use with images.

<div class="rew_pull">
<!--Your Content Starts here-->
<p>This is an example of a pulled content.</p>
<!--Your Content Ends here-->
</div>

Working with Headings

Headings are often the first thing your readers will see and a well-structured document with section headings will make your articles easier to digest.

REW Hset (Heading Set)

<div class="rew_hset">
<h2>My Heading</h2>
<h3>My Subheading</h3>
</div>

REW Deck

Though technically not a heading, this always appears before the articles's (or section's) full copy. This is a short paragraph (1-2 sentences) that introduces the following.

<p class="rew_deck">Here's a couple of sentences that introduce our reader to the article's content in the form of a short paragraph. It should read like a "teaser".<p>

Working with Copy

REW Aside

This is a block of content that should be thought of as "outside the flow" of the document. It could be something related & of interest or some other note.

<div class="rew_aside">
<p>This is an example of aside copy.</p>
</div>

<--we can classify the block further by using rew_emphasis-->
<div class="rew_aside rew_emphasis">
<p>This is an example of aside copy that should have emphasis.</p>
</div>

REW Mute

This indicates some legal copy or other footnote that you don't want to dominate your visual space (i.e. de-emphasized page copy).

This pagecopy is provided as-is with no warranty, implied or otherwise. Read at your own risk, nothing here should be construed as medical or legal advice. Do not attempt.

<p class="rew_mute">This pagecopy is provided as-is with no warranty<p>

REW Code

Use this to display a block of HTML or other code.

<pre class="rew_code">
<strong>HTML Code Example</strong>
</pre>

Working with Images

Instead of merely decorating your page, images should have purpose and enhance your article. Photos, Illustrations and charts should reinforce your theme or Illustrate a particual point.

General Tips

Don't Break the "Flow": In most cases, we don't want images to break the readers flow, so we keep the image out of harms way on the right side of the document.

flow

Avoid whitespace "Rivers": Awkwardly sized images can create bad flow "rivers" in your page copy. If you image is fairly large and takes up 80% of the page width, for example, we'll be stuck with a small gutter that text will try and fit itself into, making your (un)readable lines one or two words a piece.

"Wrapped" Images

You can float an image to the right of your copy by adding the class "rew_pull" to your image. Pairing the rew_pull class with the rew_alt class will yeild a left-floated image.

<--Right-Aligned Image-->
<img src="rew_pull" src="path-to/my-image.jpg" alt="my image" />

<--Left-Aligned Image-->
<img src="rew_pull rew_alt" src="path-to/my-image.jpg" alt="my image" />

Utility: Exclude Image From Summary

If you have an image that is not appropriate (e.g. oddly shaped image, image doesn't make sense out-of context) to appear in the REW Blogs summary page, add the class "rew_exclude_from_summary" to the image element and it will not appear in the main blog summary pages.

<img class="rew_exclude_from_summary" src="path-to/my-image.png" alt="My Image">

Adding Captions to Images

You can add captions to images if the image needs context or further explaination. Use in combination with other classes, such as rew_pull to create sime interesting effects.

<div class="rew_figure">
<img src="path-to/my-image.png" alt="My Image" />
<label class="caption">This is my caption!</label>
</div>

<!-- use in concert with rew_pull to create floated, captioned images-->
<div class="rew_figure rew_pull">
<img src="path-to/my-image.png" alt="My Image" />
<label class="caption">This is my caption!</label>
</div>

Comments

Enjoy this post? Why not share with friends or add a comment of your own?

REW jon

Excellent advice Phil, thanks!

My next post will be greatly enhanced - though don't worry, I won't be implementing everything...

REW Val

I'll be bookmarking this blog Phil - thanks for the tips!!

LisaUdy

Wow! Excellent post Phil thank you. :)

Rew Lisa

The most eagerly awaited blog post ever! I've been using your information for weeks.. I hope that people take advantage of this information, it's amazing how much nicer it can make your posts look.

REW Phil

Thanks guys! There will likely be a "part 2" sometime in the future--I didn't have time to cover everything. Hope this helps! :-D

Share your thoughts…