You get it, right?
You need great content if you’re going to use content marketing to build your website’s traffic.
But that’s not enough by itself.
If you just used plain text in all your posts, barely anyone would read them, no matter how good your writing and message were.
You need to make it readable.
And by readable, I mean two things:
- Content that is easy to read: the content is clearly separated in such a way that lets the reader quickly read it without getting lost or confused.
- Content that is fun to read: People read best when they are interested and engaged. The way you format content can affect the reader’s experience.
Some of this relies on picking the right topics and writing well.
However, a large part of making content as readable as possible is formatting it.
Marketers with web design backgrounds have no problem doing this…
But most marketers don’t have a background in web design.
Most learn to write better first but then never bother to learn how to format their content better.
Now’s your chance to get started.
First, you should read my article on basic formatting techniques to get your readers spend more time on your content.
Then, you should come back to this article and learn about these 5 advanced formatting tips that will take your content to the top levels of readability.
Tip #1: Designing a background that stands out
A large part of attractive formatting is finding ways to make your content stand out from the millions of other pages published on the Internet every day.
One tactic that automatically makes your content stand out, and also makes it more readable, is to create different backgrounds for different sections.
Having a color change, in addition to a well-written subheadline, makes it easy for anyone scanning the page to look for specific sections they might be interested in.
If you’ve never done it before, it might seem complicated. In reality, it’s fairly easy, and for most projects, you won’t even need to hire a designer (it will take some time, though).
First, pick the right colors: Typically, you’ll want 2 (max 3) different background colors.
You need to pick the right colors so that they:
- look good together
- are sufficiently different
Of course you want the colors to look good; otherwise, they will distract the reader in a negative way.
Additionally, if the colors are too similar, it will be hard for readers to tell that a new section has begun.
Finally, the colors should fit your overall branding color scheme so that people associate your brand with your content.
If you’re naturally good at picking colors, that’s great. But for the rest of us, I recommend a tool such as Paletton.
To use it, first click the “add complementary” button under the “monochromatic” default setting.
After that, you have two main options:
- click and drag either of the outside circles to change color schemes
- click and drag the center circle in and out to change the hue (brightness)
Ideally, pick one color that matches your brand (like green for Quick Sprout), and the tool will automatically suggest a good complementary color.
I recommend not going too bright with your colors; otherwise, your content will be harder to read. Likewise, you don’t want to go too dark either. Pick nice neutral colors.
Once you like the look of the preview on the right hand side, click each color individually. When you do, a popup will show you all the information about the color. Copy down the color code for use later.
Now, you need to apply that color to different sections of your content.
Second, apply CSS to each section of your content: Even if you don’t know any CSS, you can still probably handle this (although this would be a good time to start learning HTML and CSS as they are handy for any marketer, SEO, or business owner.)
Let’s take a look at one of my advanced guides. If you ever want to see advanced formatting in action, just look at any of the Quick Sprout guides.
You can see what’s going on behind the scenes by right-clicking anywhere in the content and then clicking “inspect element” (in Chrome):
A little console will pop up at the bottom. The HTML code is in the left panel, and the CSS is on the right.
You can assign CSS properties (that control the way your content looks) by either the “id” or “class” of an HTML tag (usually a “div”).
In this case, you can see that the CSS property that controls the background color of the top section is attached to the div class “step-g”.
You can specify the background color of a section by using the property:
background: color number
And you can set the text color using:
color: text color
Using the inspector, you can even change the color codes to see what the background would look like without actually applying the change:
Ready to do this for your content?
First, go into your post or page, and select the “text” tab if you’re using WordPress (or an equivalent button to bring up the HTML of the content):
This is where you will put in a lot of your time and effort.
You need to create divisions (“div”s) for each different section in your content.
While you’re doing that, assign a class to each division. For example:
<div class=“blue-background”>content here</div>
The simplest way to do this is to alternate background colors, e.g., apply the class “blue-background” to one section, then “orange-background” to the next, and repeat.
When you’ve done that for all your sections (or at least a few for a test), save your content. That’s the HTML part.
Now we need to add the CSS code for any visible changes to happen.
Go to “Appearance > Editor” in WordPress, where your theme files are stored.
You should be using a child theme so that you don’t lose any custom CSS when you update your theme in the future. If you don’t have one, create a child theme right now.
All you need to do is add your code in your child theme’s CSS file (hint: it says “.css” at the end of the name at the top). It should look something like this:
.blue-background {
background:#678EF9;
color: #FFF;
}
Make sure you have both sets of brackets – { and } – or you could cause some issues for your site.
When you’re done, click “Save.”
If everything went right, your content divisions will now have their own beautiful backgrounds.
Alternatively, create an image file to use as the background: If you take a close look at some of the Quick Sprout guides, you’ll see that the backgrounds are a little bit more complex.
You’ll see dotted lines and custom images in places that don’t seem easy to replicate:
You can make backgrounds like this one, but it will be harder. You may want to consider hiring someone to help you.
If you inspect any of these backgrounds in my guides, you’ll see that the CSS still contains a “background” property. But instead of specifying a color, it specifies a URL.
If you right-click the background URL and click “open,” you can see the background image:
I bet you can tell how it all fits together now.
These backgrounds aren’t necessarily complex—you just need to make sure they line up properly, which can be difficult.
Another potential downside is that there’s no easy way to make it responsive, which is why these guides are all static pages—they don’t scale to the screen size.
If you do want to try something like this (even for just a few sections), create a background in a program such as Photoshop, GIMP, or Canva.
I like Canva because you can find and insert a lot of great elements quickly.
Create a custom canvas that’s the size of your section, and pick the “lines” button from the menu on the left:
In this example case, I chose a dotted line.
It will appear on your canvas on the right, and you can easily drag it to change its size, position, and even color.
As you can see, it’s pretty simple to make.
The hard part is lining it up with all your text and making your own custom images. That is where you might need to hire a designer if you’re serious about creating a top-notch design.
When you’re done, download the picture using the button at the top:
Then, upload that URL to your CDN or media library.
Finally, instead of specifying a background color in your child theme’s CSS file, specify the background URL:
background: url(‘put URL here in the quotes‘) center top no-repeat;
And, voilà! You have your advanced backgrounds in place.
Tip #2: Attractive images don’t need to cost a lot
Very few people enjoy reading a giant block of text (maybe if they’re on a dial-up?).
The most common way to break up text is to use images.
But if you use the same stock photos everyone else does, your content will look like everyone else’s.
If you want your visitors to spend extra time on your content and be impressed enough to sign up for your email list, you need to find a way to stand out.
So, how do you stand out?
You need to have high quality pictures not found all over the web.
That leaves you with two main options.
Option #1 – Make full use of icons: This option is the simplest. It involves finding images that for some reason aren’t used very often.
In another one of my extensive guides, you’ll see many icon-like images that add a lot to the overall look of the content:
Sure, you can get these custom-drawn if you’d like, but there’s a simpler way that will work for most projects: go to the Noun Project.
Search for a general word that describes what you’re looking for, and you’ll get a ton of relevant icons in the results:
Although anyone can use these, I suspect the main reason that they are still relatively rarely used is because they aren’t free.
You have the option of using them free, but you have to credit the creator, which isn’t something you really want to do in the middle of your content.
However, you can also just buy a monthly subscription for $9.99 and use as many icons as you’d like. It’s a great deal provided you produce enough content for which you can use the icons.
Option #2 – Hire a designer: The other way of getting unique images is to make your own.
If you don’t have the design skills, you’ll need to hire a designer.
I get why marketers don’t like hiring designers: they’re an extra expense.
The best designers are expensive, while there are many terrible cheap designers.
You should be looking for a solid designer who might be lacking experience and doesn’t charge very much.
If you look for recent graduates, you can often find someone who is looking to build a portfolio and will work for under $10 per image (depending on complexity).
Post a job on any of the obvious freelance marketplaces for designers:
A final option is to make your own custom images, perhaps incorporating icons into your pictures. I wrote an in-depth post on making your own custom images that you might be interested in.
The science of picking the right fonts
It’s easy to see how picking the right font and font style can make a big difference in readability.
Change your website’s font size to 8, and see how many people will still read it. My guess is not many.
Or change your font to cursive, and you’ll see how quickly that’ll get annoying to read.
Finally, change your font to bright yellow if you want to give your readers headaches.
Those are the three factors you need to worry about: font size, type, and color.
Your body font should be at least 14 pixels. Many recommend at least 16px for maximum readability.
Your subheadlines should be at least a few pixels larger than your body copy, and they should be bolded.
All of that is pretty standard.
Where you have an opportunity to be a little more unique is in the font typeface and the color.
Picking the right font typeface: If you pick the same type typeface as everyone else, your content will look like everyone else’s. If that’s your goal, just stick with Times New Roman or Arial.
Of course, you also have the option of using different fonts for different pieces of content.
But if you’re trying to make a really distinctive blog post, guide, sales page, landing page, or some other piece of content, spend a few minutes to find a unique font.
There are over 682 fonts on Google Fonts alone, most of which are rarely used by others.
One way to help your subheadlines attract even more attention is to pick different fonts for your headlines and your body copy.
This is something I’ve done in many of my guides:
This is called font pairing. It improves readability just like complementary colored backgrounds do.
The two most common types of fonts are serif (with the hooks on the letters) and sans-serif.
A popular strategy is to mix one serif font with a sans serif font, creating even more contrast:
How to pick your font: I don’t recommend that you simply look through fonts all day long until you find the one you like. You have better things to do with your time.
Luckily, there’s a better way.
Your first option is to use Font Pair.
The site consists of font pairings chosen by experienced web designers. They’ve done all the hard work for you.
Start by picking a type of font combination on the top menu bar:
You’ll get a list of attractive font combinations.
The best part is that it’s easy to decide if you like them because the site shows you what they look like.
The heading, which is the name of the two fonts, is written in one font, while the example text in the paragraph below is in the second font.
Both fonts are displayed below the listing:
Your second option is to look at Typewolf—“The Site of the Day” section in particular, which features many different websites every day.
Essentially, design experts pick the sites with the best looking font and design. If you see one you like, you can find out the font names right there:
Finally, don’t be afraid to use color: Bolding subheadlines is a great way to make them stand out, but it’s not the only way.
In my advanced guides, I often made subheadlines stand out by choosing a high contrast color that went with the rest of the content.
This is especially important if you’re using colored backgrounds as black text may not stand out as much as it usually does (depending on the background color).
Tip #3: Guide your visitors by using color
When it comes to directing your readers’ attention, color is one of your greatest weapons.
If a page is all white but there’s a colored circle anywhere on it, guess where a person looks first? At the circle, of course.
Derek Halpern, the guy behind Social Triggers, reviewed all the research behind colors and action and came up with one conclusion:
Pick one “action” color for your website and train your readers to pay attention to it. Other than that color, your website shouldn’t have much color.
If you’re interested in the full analysis, here it is:
You can use this principle to make your email opt-ins and important links stand out more to improve your conversion rate.
The color that you pick doesn’t matter in most cases (there might be small differences). Just pick one color (two max), and go with it.
One great example is, not surprisingly, the Social Triggers blog.
The latest design is mostly black and white…except for the opt-in forms. Those are in a distinctive blue that draws your attention.
He has one in the sidebar that you see right away…
And he also has one at the end of the article.
This is a great place for an opt-in form because as the readers scroll down toward the end, they automatically have their attention shifted to the sign-up form.
You can do this for email opt-in, social sharing buttons, and even purchase buttons.
Be careful with backgrounds: If you do incorporate colored backgrounds for readability purposes, you need to make sure that your opt-in forms and other important elements have a high contrast.
If I had a green background and then a slightly darker green opt-in form, it wouldn’t draw much attention.
Always consider the end action you want your reader to take when picking background colors for your content.
Tip #4: Nothing is more entertaining than rich media (use it free)
You might know that I’m a huge fan of premium forms of content such as infographics.
Sure, they cost more to make, but when they are done right, readers love them.
One reason for this is that written content has many limitations. It’s often much easier to show something than it is to explain it.
Using images to explain complex data is a great way to make it easier for a reader to consume the information and make it more fun as well.
People process images 60,000 times faster than text.
But other types of media, such as video, are also more engaging than text.
Readers will often spend several minutes either watching a video or examining a great infographic.
The problem is that they take a long time to make. Or they’re very expensive to make if you hire someone to take care of the whole thing for you.
However, I have a couple of solutions for you that very few content creators seem to take advantage of.
Option #1 – Take advantage of embedding: Some topics are perfect for being taught through video.
Any complex procedure with several steps would take hundreds or thousands of words to explain, which would take a long time to read. The same procedure could be explained in minutes in a video. Additionally, it’s easier to understand this type of information when it’s presented in a video format.
Instead of making your own video every time you mention something that needs an explanation, why not use a highly rated YouTube video that someone else has made? You can find great videos on nearly every topic.
Instead of your readers going away from your site to look for more information, you give it to them in a video form right on your page.
The best part is that it only takes a minute to do.
Type in your keyword in the YouTube search box:
Then look through the top few results with the most views.
Click on them, and look at the ratings and comments. If you find one that’s almost 100% positive, you know it’s a solid video.
To embed the video, click on “share” below the name of the video creator, then click “embed.” Finally, copy the embed code—that’s the HTML you’ll paste within your content.
Here’s an example of how I’ve used an embedded video in one of my posts:
In this particular article, which was a list of Gmail plugins, I couldn’t do a thorough walk-through of all the plugins (or the post would have been much longer than the 5,000 words it already was).
I also knew that you would probably be interested only in particular plugins. By embedding the video of this particular plugin, I gave you the opportunity to read the short description of the plugin first to see if you were interested and then watch the video for a more detailed look.
Option #2 – Infographics can be overwhelming: Although infographics are a great way to communicate complex information, you can’t post a giant infographic along with a long article and expect the readers to take in both.
Besides, that would be prohibitively expensive.
What you can do, however, is take snippets of infographics that other people have published and mix them in with your content.
This breaks up your content with an image that is much more valuable than any standard stock photo you could find.
I don’t know a single infographic creator who would mind you using their work as long as you include a link:
The above picture would be perfect for any post about content marketing, and it came from an infographic I previously published.
Either download the infographic and crop it, or use a plugin such as Snagit to cut out a specific piece:
And there you go: a high quality engaging picture with virtually no effort or expense on your part.
Tip #5: There’s nothing a visitor trusts more than this (highlight it!)
Everyone loves to give advice, whether it’s in blog posts or person to person.
As you know, most of it is useless or not very convincing.
If a casual acquaintance offers you career advice, you’d probably listen, but not very well.
But if Elon Musk offered you career advice, you’d forget about everything else and pay full attention to him. Why? Because he’s highly successful—he’s an authority.
The same goes online: when you feature content from experts, readers pay close attention to it.
But most of the time, it’s hard to spot expert content in posts.
With good formatting, however, you can make it a lot easier. You want to make any input from experts the center of attention.
Even skimmers will slow down when they see it.
Here’s one example from Backlinko, where Brian makes an expert quote blatantly obvious with a bright green background:
And here’s another one from Authority Hacker, featuring a quote from a legendary book.
How you can make expert content stand out: There are tons of ways you could make an expert quote or contribution stand out in your content.
I really like how Brian does it, and it’s probably the simplest way for you to do it as well.
Once again, you’ll need to know some basic CSS to do this. The good thing, however, is that after setting it up once, you can reuse it over and over again with no extra work.
Here’s what a basic one would look like.
First, you’ll need the HTML:
<div class=“expertbox”>Type in your expert content here.</div>
For a very basic box, that’s all you’ll need.
If you want to put an image of the expert, which is a nice touch, you’ll need to add another “div” within the main box:
<div class=“expertbox”>Type in your expert content here.<div class>put image in here and name</div></div>
Next up, you’ll have to add CSS into your child theme stylesheet (refer back to Tip #1 for help with this) so that your box looks the way you’d like.
At the very minimum, you’ll need to add something like this:
.expertbox {
border: 1px dashed #A9D6A9;
background:#D8FFD8;
padding: 1.6em 1.6em 2.4em 2.4em;
}
Of course, you can pick your own colors, and you’ll probably need to play around with the padding values so that your text is positioned in your box the way you want it.
Conclusion
Formatting can be the difference between only your mom reading your content and thousands of people taking in your every word.
It’s often brushed aside in favor of spending more time on creating content and promoting it, but that’s a mistake.
Although those two parts of content marketing are important, so is formatting.
And because so many people ignore it, you can stand out if you push it to its limits.
If you follow just a few of the advanced tips in this article, you will ensure that your content is better than your competitors’ in the eyes of your audience.
Do you have a favorite formatting technique? I’d love it if you shared it in the comments below.
No comments:
Post a Comment