Attention-Grabbing Graphics You’ve Been Neglecting In Your Blogs and Articles

If you’re at all savvy about making good blogs, you use some photos or illustrations to introduce your post at the beginning, to break up long sections, or as part of charticles. You know people like pictures better that lots and lots of words.

But, there are honored traditions in books and magazines of using other kinds of graphic elements to make points and garner attention. For example, I’ll bet you’ve used horizontal rules (lines) to set off sections and make transitions. I’m sure you’ve seen publications that use fairly fancy horizontal rules.

If you’re careful to use such graphics with restraint and good taste, you can make your writing pop in ways that you can’t do otherwise. You may not be able to use these with all topics or formats. But with the right topics or the appropriate kinds of documents, these can make a real splash. They almost always work well with humor — as long as you’re good at writing humor. There are a number of styles, formats or topics that almost cry out for such treatment.

Fancy horizontal rules. Also known as lines, bars or dividers.

You’ve probably used ordinary horizontal rules with the <hr> tag. And you can style them a little with CSS, but not much. If you want to use something with a little more pizzaz, why not just place an image of a divider that you like? And if you have trouble getting the image to center, one quick trick is to place your image within <p></p> tags and style the paragraph to text-align at center.

Here are a some examples that took very little time to create in Photoshop, adapt from public domain, or make with font faces and rasterize:

And here are some more elaborate ones that I got from my favorite paid provider, iclipart.com:

If you want to try some without having to clip and modify them yourself from an old book or without having to get a subscription to a service, you can get a free set of 10 colorful dividers from my Productivity Tools page or directly download them here: http://superperformance.com/tools/10webdividers.pdf . They’re mine and come with a license for both personal and commercial use.

There are plenty of free ones you can find by doing a search, but so many folks steal stuff and pass it off as their own work, I’m just not inclined to trust the freebie sites.

(P.S. Make sure that your license for your font allows it if you’re including font faces as part of a design you use commercially. That might affect you if you are making web pages for other people. If you’re not sure about your rights, talk it over with your lawyer.)

Printers’ Ornaments/Icons.

What we now call icons used to be available as printers’ ornaments. These tiny graphics can spiff up all kinds of things. But mostly you’ll find them used in articles/posts as bullet substitutes and for headline or chapter title emphasis. You might also see them used on buttons.

Another popular use is to combine them with dividers to make the dividers fancier without making them too elaborate.

Finally, you’ll find them used extensively by themselves at the end of chapters or sections. They kind of put a pretty “that’s all folks” at the end of the topic.

Not only can you get them from the same sources as dividers and clip them, you can also find them as ornamental fonts and simply type them the way you use any font. Of course, you’ll have to convert them to images to use online, but at least you can get excellent print quality. And remember that there are plenty of them in the printers’ supplies catalogs I linked to above.

Here are some examples from the font Bodoni Ornaments:

Frames/borders/layout backgrounds.

These are easy if you do the whole thing as an image. Just use old printers’ frames and borders around any images, including images of text, and you’ve got more attention-getting power. I’m for making it easy. (Of course, you can also get frames and borders from any number of graphic elements providers, as well as finding some built in to your Photoshop or your other graphics programs.)

However, if you can write CSS3, you can design a text box you can type in that has any kind of frame or border you like. Think, for example, of the beautiful old illustrated borders used in children’s fairy tale books. You could actually make an offset text box with an illustrated border to house a quote from a favorite author or a comment of your own about your topic. You’d only want to do it this way if it’s important to have the text as text for SEO purposes, as it might be in very short posts.

And don’t forget layout backgrounds. Not many folks use these except for digital scrapbooks or for their personal Facebook pages and suchlike.

Novelty display fonts.

I, and others I know, like to occasionally use special fonts for headings and/or subheadings individual posts or articles. Or in block quotes on just one page.

While solutions like Google Web Fonts, and others, have allowed us to use a more extensive variety of fonts on the web, those solutions are primarily adapted to CSS effects across the website or blog. And it is especially difficult with blogs. We simply can’t work with typefaces on the Web in the same way we could do in print.

The easiest way to use the stylish fonts we want for special one-post or one-page use in headlines and subheads and other elements is what we’ve been doing for some time: just find the font you want and make text images in Photoshop or whatever graphics program you use. Then place them where you want them.

I started using this method a long while ago when I wanted to do a holiday article for kids and liked an effect I could get with headlines spelled out with alphabet blocks. (Yes, there’s a font for that. And, no, it wasn’t an article for the superperformance.com site.)

Don’t be intimidated by the limited stock of web fonts and the inability to use them for just one page or one post. There are times you just want to tell a particular story and the right font can lend atmosphere. Or, for that matter, it may be an essential part of a short-term marketing theme. If printers could do this in the 1700’s, you can do it even better with images now. Imagine how much it could affect a Halloween story to have a font with letters that drip blood for the headline in just that one story.

Sure, the search bots can’t read it as text, so your on-page SEO is a tiny bit affected, but you can make up for that in other ways.

Section or content-box backgrounds.

You’re not limited to grey and white as backgrounds for your content. You can emphasize your block quotes, for example, with textures or even faded images for backgrounds. This is a more subtle way than using frames or borders, yet it can be quite striking.

Here’s an example, but just to give you an idea of what I mean when I say content-box and block quotes backgrounds:

It can be a simple texture like the “Yankee Doodle” box background below or a bit more colorful like the blue one (you would use white letters) but not much more color or texture. And these work well without framing.

___________________________________________________________________

Closing Thoughts

Remember that this is an area where a little goes a long way. Use a bit of this or that in your articles or blogs. Where it fits. Just as you wouldn’t write a lot of paragraphs in red to emphasize your message, restrain yourself.

Don’t use this stuff in designing your blog or website as a whole. It gets boring at best, but probably annoying.

Also remember that graphics can slow down your page-load times. If you’re careful not to over-use graphics and you keep their file size small, you can still get your pages to load fast enough.

I recommend that you take some time to study what other bloggers and webmasters have done well with these, and what they’ve done that doesn’t work. Look at vintage magazines that used printers’ ornaments and rules. See how they used them. Or abused them. As an example, try The Harvard Illustrated Magazine you can browse online — or download — at http://archive.org/details/harvardillustra01univgoog .

Just be careful to tread the line between grabbing attention and creating chaos.