The Ultimate Compendium of How to Enhance an Online Article Visually
40,000 years ago, humankind was in love with pictures…
Cave pictures. Whenever we ancient humans found a natural formation of rock that provided some degree of shelter, we’d draw all over it like a New York City graffiti artist.
The primal need to communicate with others visually hasn’t changed much, if at all, in the intervening years. And never has that been more true than in your online content.
Whether you’re publishing pages or blog posts for your online business, your readers require visually interesting elements to keep them engaged throughout your piece. One long blob of text just won’t cut it.
For one thing, our brains aren’t wired to enjoy reading plain text. Online, folks tend to scan rather than read. The human brain processes visual information 60,000 times faster than plain text.
We simply respond and relate better to visual information.
So if you want your readers to react positively and deeply to your content, include more than just text.
This post covers powerful-but-DOable options for presenting your information and content in visually arresting ways. Then we dive into some really advanced and (sometimes) highly technical methods.
Let’s dive in!…
BASIC VISUAL INTEREST
These are what one might call the “essential elements” of virtually every piece of content for an online business. If your page or post is lacking these, there must be a specific reason why.
- Featured Image – Whether at the top or somewhere near the top, every piece of content today requires an image that “represents” that article and helps the reader to understand the overall message. Ideally, the first image will be branded and include descriptive text on it, and will be followed by additional images sprinkled throughout the text. (More on that in a moment.)
- Paragraph Breaks and Whitespace – While subtle, the use of paragraph breaks and whitespace can help the reader move through your content and deliver additional emphasis to your text. Keep paragraphs short and activate the “voice.” In other words… Make your point and move on!
- Headings – After your initial headline or page title, break up your content into sections and use headings to indicate to readers that they’ve reached a new section.
- Lists (Bullets or Numbered) – Put a series of comments or items into a list. Bullets or numbers (like this one) help the reader to scan your content as well as provide understandable formatting for text. So… Break a long comma-separated “list-sentence” into a more readable “list-list.”
Now that we’re warmed up, let’s move on to the more challenging techniques.
ADVANCED VISUAL INTEREST
Strictly speaking, these elements or techniques aren’t required for online business content. But including additional images go a long way toward grabbing and keeping your reader’s attention.
Charts & Graphs
Remember: “images” doesn’t only mean pictures.
Charts and graphs exist to make it easier to explain and illustrate numbers and trends. Use them!
If you’re presenting a series of numbers, consider how you could turn them into a graph. And if you have just one or two numbers, consider how you might add more data to a graph to make your point even stronger.
For instance, what if I told you that, according to Andy Crestodina’s study, more bloggers were using multiple images in their posts in 2016 when compared to 2015? Doesn’t this chart convey that information even more effectively?
See how fast the trend is rising over the last three years? A table of numbers/years would have lost most of the impact. And charts like that are relatively easy to create.
I used a Google Sheet to enter the data, highlighted it, and used the built-in Chart feature to select my chart type and customize it. Canva now also includes charting capability for even more stunning images.
Show, don’t tell.
When appropriate (ex., when explaining a step-by-step process), screenshots can prove invaluable. It’s the next best thing to explaining it face-to-face.
Whenever talking about an app in an article, I always use my iPhone’s Home and Lock buttons to take a screenshot that I can then embed on the post.
For more complex and interesting desktop screenshots, I use Skitch from the team at Evernote. Skitch allows me to capture specific areas of my screen, as well as timed screenshots, and then mark up those screenshots with text and graphics to help illustrate the point.
Infographics take charts and graphs to the next level. They provide a creative arrangement of a great deal of information in a very specific, choreographed way.
Good infographics tell a story as you progress down the graphic.
This infographic from Donna Moritz of Socially Sorted illustrates the evolution of visual media in an interesting way, which leads the reader into the story.
Sometimes there are opportunities where an image would really help to emphasize a point you’re making, but no such image exists.
No problem. Create a custom graphic!
Canva, PicMonkey and Adobe Spark are all excellent tools for creating graphics with little to no budget.
Here’s one that I created within Canva to help illustrate how a content pyramid works:
This online business structure is similar to the three-tier approach outlined in the SBI! Action Guide, but tailored for bloggers.
GIFs are animated images, which means they’re able to communicate more within a few frames than your standard static image.
More importantly, GIFs are commonly used to inject humor into content and should be used whenever appropriate for that purpose. I suppose I really should tell a bad joke now…
“Quotation, n: The act of repeating erroneously the words of another.”
― Ambrose Bierce
Quotes, particularly when they’re formatted to stand out from your regular text, can be very effective at getting the reader’s attention and reinforcing a point.
This humorous quote from Bierce, for instance, suggests that we shouldn’t use quotes at all, because too often they misrepresent the meaning given by the person who wrote or spoke them. It’s an interesting juxtaposition from the point I’m making…
There are loads of quotes about quotes, but this one made you to stop and think, right?
Bierce’s point is well made, too. It would fit wonderfully in a piece about the dangers of quotes. So I leave you with this caveat…
Quote and cite the author correctly when sharing someone else’s sentiments. Make sure you really understand lesser-known quotes or you may shoot yourself in the foot with it.
A pull quote, on the other hand, is drawn expressly from the content itself. It’s used to highlight an idea or comment that’s been made, which then reinforces the concept in the reader’s mind.
Pull quotes can be plain text formatted differently or, more commonly, a quote graphic.
Note that the text of the pull quote repeats what’s been said within the normal body of text, though slight modification for context is certainly permitted. When italics don’t emphasize a critical point strongly enough, try a pull quote.
Click To Tweet
A click to tweet is an express invitation to the reader to click a link or button that then automatically generates a tweet of the indicated text. For example:
All you can change is yourself, but sometimes that changes everything!Gary W. Goldstein
Click To Tweet
Click To Tweet invitations are most effective when used to share dramatic statistics, poignant quotes, or startling conclusions from the text. To maximize response, use the kind of information that will make the tweeter look smart for sharing.
To create a Click To Tweet:
- Go to https://clicktotweet.com and click Basic Link
- Type or paste in the text you want shared.
- Add a link to your piece of content and make sure that you’re under 140 total characters (120 is better – it leaves room for others to retweet the entire message).
- Click Generate New Link.
- Use the provided link to make the text or button within your content linked.
And that’s it. Simple! You can add nice formatting if you wish, or just put (tweet this) in parentheses.
Note that it’s best to limit to 2 – 3 Click To Tweet invitations per piece of content. Studies show that after a third, participation drops dramatically.
Sidebars / Takeaways
Another technique we love to use in the SiteSell Blog, articles and forums is the sidebar or takeaway.
The idea is simple. Some simple css-formatting highlights and differentiates a piece of text. It’s often used for a piece of content that is appropriate, but that would have broken the flow of the main text (ex., a supplementary piece of related content).
Start a new table within your content and choose to use a single row and single cell. Insert your text and then change the background color and text color to be very different from your normal text. White text on a black background works well, for example. Ideally, you’ll decide for yourself a set pattern that still fits with your brand colors.
If you use WordPress, you may have a box shortcode available.
Related Content Links
This is also particularly useful when you want to interject a thought into your content, making it obvious that it’s different from the surrounding text, but still important.
Inserting related content links throughout an article to other pages and posts from your site is important. It widens and deepens the topic, also provides opportunities to link visitors deeper into your sales funnel. And yes…
We’ve used the technique in this sentence (you really should consider SBI! for your online business).
By the way, emojis are a “micro-visual” way to break up text. They’re usually more appropriate in emails and social media, but what the heck I needed to mention them in this article.
Instead of simply hyperlinking text within an existing sentence, we’re going to call out a related article and make it very obvious that the reader should check it out, like this:Returning to our more serious tone, there is a second strong format for related links.
Readers who are interested in learning more may come back to that link, or even open it in a new tab (to be sure they finish the original article). That improves your time on site stats, reduces the bounce rate, further immerses your readers into your site, and adds a little visual variety to your text!
Table of Contents
If your article or blog content is lengthy and includes a good number of sections, consider including a table of contents (ToC) at the beginning. It helps your readers understand the scope of your article (as well as navigate down to specific sections of interest).
To create a ToC within HTML, you simply need to add an “anchor” for each section. After you’ve typed in the text for your ToC at the top, link each item to its respective anchor. (For those of you who use SBI!, BB2 has this capability baked in.)
Of course, your ToC should appear close to the top of your article. It is best placed after the introduction.
Style it as best fits. A vertical orientation takes a lot of space. Two columns can work. And a horizontal ToC takes almost no vertical space – it is a strong option when there are not too many items to fit on one line…
Use CSS to place it inside a box with a different color background. If vertical, use about 40% of the column width. Consider floating it to the right with your text wrapping around it. Or use two columns, 80% width and center the box. We’ll leave this part to your graphic designer because they always have THE way to do it.