Tips and Tricks I Learned as a Technical Writer (Part 2)

Last week I blogged about the way the visual system works and suggested some implications for blog post formatting. This week, I want to get specific. But first, if you didn’t read last week’s post and you’re wondering why bother, here are pictures of two blogs (I’ve attempted to hide the specifics). Which one would you rather read?

poorPost

goodPost

Even with images this small, most people would immediately choose the second one.

I went to the first blog because the headline in LinkedIn made it sound interesting. It probably is. But I didn’t stick around to read it. It just looked too long and intimidating. The second one, on the other hand, is inviting. It was easy to get the main points just by scanning.

As a blogger, that’s what you want to strive for. Given that you need to optimize your posts for scanning, the very first step is to make sure you have the tools to do so. In WordPress, the tool is your theme. If you’re not using WordPress, it might be your template or your CSS stylesheet. Whatever the case, you can’t build a scannable post if you don’t have the basic building blocks to do so.

At a minimum, here are things I would look for in a platform or theme:

Whitespace You’ve all heard that one before, but it’s true. Your theme should be airy. You want plenty of padding between the body (your posts) and any columns or chrome. It helps the user distinguish the “blog” from the rest of the site. Remember the proximity point from my first post? Whitespace helps create groupings that leverage that proximity principle.
Multiple heading levels I like to have at least three levels of headings. Headings are an obvious way to allow the user to scan your post and get a feel for the content. Having several levels allows for subheadings and lets you create hierarchical relationships in your post.
I don’t always use the headings as intended, though. Sometimes I use them as just a simple formatting technique to emphasize a sentence here or there.
Bold, italics, and colored fonts Bold is a must. I’ll often bold key sentences in paragraphs throughout my post, to call out all the high points. That way, if someone just skims the article, they’ll read the bold items and get the critical information. It’s nice to have a less heavy way to add emphasis, and I sometimes use italics for that. Italics are generally considered not as readable online, though, so use them sparingly.
Ideally, my theme gives me the opportunity to use colored fonts. Of course, you have to be careful with this for several reasons. Color-blindness is one. Also color is used to indicate links, so people may think that the text you’ve colored is a link. For that reason, don’t use blue (the conventional link color) for emphasis. I like a muted red, if possible, because most sites don’t use red for a link color, and it draws the eye well. It’s not a friendly color for the color-impaired, though. On the other hand, the emphasis isn’t critical.
Pull Quotes I’ve installed the Pullquote plugin for WordPress, and I use it frequently. I really like pull quotes because they draw the eye, break up the wall-of-words, and are a great way to highlight the best sentences in your post. I use them especially in my long posts, scattering them relatively evenly throughout the page. (I do wish I had a little more control over where they appear though.)
Lines I haven’t used the line technique that much, but adding lines between sections or paragraphs, either plain lines or graphical ones, is a good way to break up the page and group items. Your theme may not provide this. One way to get around that is to insert a graphic that’s an artsy line. Another technique is to insert a table with one row and one column and no left or right border, in order to set content apart. I used this technique on a couple of my posts to highlight an “advertisement” for people to take a survey I was conducting.box

These are some of the tools you should look for in your theme. Presumably, you have the ability to also insert graphics and use ordered and unordered lists (bullets), as well. Those are also important elements to use for scannability. Once you have the tools, you need to remember to put them to use. In the next post, I’ll talk more about some specific ways to use these various tools to make your post scannable.

Neicole M. Crepeau

Creator of TweetPackage.com, I'm a tech industry veteran with 25 year in the industry. I've done technical writing, usability testing, user interface design, and product and program management work. Most recently I've been applying a research and marketing perspective to social media and blogging about that on my personal blog, http://nmc.itdevworks.com. I'm also a mother of four wonderful children and wife of a terrific man--who also happens to be a fantastic software developer. 

Tags:

  9 comments for “Tips and Tricks I Learned as a Technical Writer (Part 2)

  1. September 28, 2009 at 3:34 pm

    Great article, Neicole. I have a formatting question for you. Often I need to make my paragraphs look like the ones where you listed what to look for in a theme. How did you do that?

  2. September 28, 2009 at 4:14 pm

    An excellent and highly visual tutorial, Neicole. Thanks!

  3. September 28, 2009 at 5:16 pm

    Thanks, Boyd! Hi, Mike. I used a table. If you don’t know HTML, it’s basically this:

    — turns off the grid lines
    — marks a table row
    — marks a column in the table, like “Whitespace”
    — marks the second column, the description; I also added because otherwise there wasn’t enough space between the rows

    repeated TRs

  4. September 28, 2009 at 5:20 pm

    Ooops!!! It took of the tags. Let’s try again with some spaces in there so it doesn’t strip them.

    — turns off the grid lines
    — marks a table row
    — marks a colum in the table, like “Whitespace”
    — marks the second column, the description; I also added because otherwise there wasn’t enough space between the rows

  5. September 28, 2009 at 5:21 pm

    Boy, this comment manager isn’t going to let anything that looks remotely like HTML get through. Well, if you’re not familiar with tables, try viewing the source on the page to copy my formatting. Sorry!

  6. September 28, 2009 at 7:43 pm

    I understand tables and HTML formatting. I am just amazed that this themed accepted it. I do not be believe the theme I use will accept tables. I am sure I tried that once without success. But you can bet I will try it again. Thanks so much!!

  7. September 28, 2009 at 10:05 pm

    I’m looking at The Bloggers Bulletin itself and I think it needs more white space and removal of “Categories” listed at the top under the header (after all, the categories are already listed within a sidebar widget). It needs multi headings, better font manipulation, and line spacing and so forth.

    I also think it’d be ideal if every post had a photo or some kind of media associated with it that could be see on the front page. Pictures always get my attention but my eyes will glaze over with too much text.

    Since Contributor photos hinge on the presence of a “plug-in” (now installed), this is doable. So please post photos/video, nice doodles whatever you need to make your case in your post.

    Me, my tastes lean towards a custom blog design. I’d like to see The Bloggers Bulletin have a unique template, unique header graphic/art, unique everything. I cringe when I see other blogs — group or not — using the same template as us!

    Btw, does anybody know of a WordPress template that might work better for a group blog?

    ———–
    9/29 Note:

    Managed to get rid of the “Categories” horizontal listing that was crowding the header. Finally just deleted the right side-bar; didn’t want to do that, but it did end up seeming to provide more white space. Basically I think the Bulletin could use photos/media/video with each post, key points in each post in bold, and if not a unique template design, then at least a unique graphic or header font of some kind.

  8. September 30, 2009 at 1:07 am

    Cool article, (I found this via the Linkin group). I do photography and like to blog, so thinking about the visual representation of blogs and how they combine with the images you use is always on my mind.

    I went to the last BarCamp in Berlin and talked about visual imagery for blogs, the SlideShare presentation is in my website link. I think the image and context given it to it by what you write is main thing which can stick in the mind of a reader, with the image creating a visual anchor that the rest of the post revolves around. I tried explaining this in German to a guy who was interviewing me and it didn’t translate so well.

    Thanks again for the cool post.

    -mark

  9. September 30, 2009 at 9:51 am

    Hi, Mark. You make an excellent point about images and the images in context sticking in people’s mind. It can provide an anchor and give some life and breathing room to the post, but also help keep the post in the reader’s mind, after the leave the site. Images have that power.

    Thanks for your comment!

    Neicole

Comments are closed.