5 Advanced Formatting Tips to Maximize Time on Site and Conversions

design

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:

  1. 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.
  2. 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. 

Are you experiencing high bounce rate in your site? Then follow these 5 advanced formatting tips to reduce bounce rate and increase conversion.

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)

image23

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.

image28

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):

image10

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”.

image01

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:

image11

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):

image33

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.

image22

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;

}

image26

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:

image29

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.

image32

If you right-click the background URL and click “open,” you can see the background image:

image09

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:

image05

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.

image06

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:

image00

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:

image16

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:

image19

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.

image21

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:

image17

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:

image13

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:

image25

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:

image24

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:

image02

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.

image18

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…

image07

And he also has one at the end of the article.

image14

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.

image30

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.

image03

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:

image08

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.

image20

Here’s an example of how I’ve used an embedded video in one of my posts:

image27

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:

image15

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:

image04

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:

image31

And here’s another one from Authority Hacker, featuring a quote from a legendary book.

image12How 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.

Comments

  1. Neil, Its a great article.It was also an unexpected to learn HTML from you 🙂 by the way, it was a great portion.
    Recently, I was learning color physiology & I came to know that 82% of the products are sold has done with color.
    Using orange color in buyNow button increases your conversion rate.If you’re using Green then probably you’re doing the worst marketing as green never wins 🙂 For trust Blue color is best, Facebook is the damn biggest example of it. (So these are my tips :p)
    & Neil thanks for the conversion related articles.I made my first 100$ few days back through this article http://shouterbuzz.com/how-to-increase-adsense-cpc/ 😉 I think 50% off has great impact on conversion rates :p
    Today, I learned more & I will apply it on my blog for sure.Thanks Neil for all the great tips 😉

    • Deepak, it’s always great to hear from you on here as you provide insightful feedback.

      Color definitely plays a major role in all your marketing efforts and can be the different between making a sale or losing a visitor forever.

      Glad to see that you monetized! You should try to pinpoint exactly which percentage came from your optimization efforts. Go into GWMT and deep dive 🙂

  2. Great Post Neil,

    As an additional info I would suggest using the right WordPress theme for it. I would suggest a conversion oriented Blog WordPress Theme.

    Check it out:
    http://goo.gl/7tVSqg

    • Cristian, thanks for sharing. It’s very important to pick the right theme to maximize results.

      Tip: when provide links on comments make sure they aren’t short links. I want to see what the links are before clicking on them — as I am sure most others do too.

      Shortlinks are fine for social media like twitter and Facebook though 😉

  3. Hey Neil,

    What a fantastic post! This is so much full of useful information. I can’t wait to dig deep and start applying all these. Loved the post.

  4. Nice Tips

  5. I feel like I have a great designer who understands color, typography, and coding well enough to make my site look outstanding. Well, I’m happy with it anyway…hopefully other people are too!

    Love the expert box idea, I’ll ask her to implement that for me in our next round of updates!

    • Jessica, sounds like you have a great team.

      The expert box definitely provides a lot of value. Try it out and let me know the results.

  6. Once again great content. I love the length of the articles and how in depth they go. Because they’re so long I have one suggestion. Would you ever consider doing an audio blog version of these great pieces? That would make it easier for me and maybe others as well? 🙂

    • Justin, that’s a great suggestion let me think on it.

      In the meantime I provide a webinar on neilpatel.com that you should check out — it’s great spoken content from me 🙂

  7. The “Font Pair” link was worth reading the entire post, I’ve spent hours on this portion alone. Thanks for putting so much effort into your posts Neil, I think that could be #6 in this post.

  8. Corey, glad you found it helpful. Let me know how it works out for you — it definitely could have been on a standalone section.

  9. Hey Neil,

    Once again a great post! I’ve read few chapters of your advanced guide and I seriously love the way it looks. It really made reading fun. My favorite formatting technique is using unique fonts and blurred texture background.
    I’ve got one question though- I’ve seen many plugins (like visual composer) and themes (like Be theme) which provides short codes and builders for formatting advance content. Should they be used or not as they almost complicate the code?

    Once again awesome post, Neil!

    Thanks,
    Mayank

  10. Hey Neil,
    You made my day, such a great post. 🙂

  11. Each and every blog posts helps us to move towards our goal .Thank you Neil

  12. Denis at One Big Web :

    Thank you Neil for putting it all together. A few things had completely slipped off my plan (compatible fonts and a few others) so reading through your list is definitely helping.

  13. Great post Neil. I love using Canva and embed YouTube videos as well. Shall follow other tips too. Thanks for sharing.

  14. Patricia Taylor | Business Loan Officer :

    Terrific post! This post has really lended me a hand in my online business efforts

  15. Neil,

    You’re right, color is really important because it sets the mood and creates emotions. Using the perfect combinations of colors can have a huge impact on visitor response, especially when connected with the right content and products.

    I’m always uncertain about color combinations so thanks a lot for suggesting Paletton. It makes things a lot easier.

    Baig

    • Baig,

      Color is the biggest psychological metric to consider in marketing. It can make or break any campaign. I have found that orange works particularly well for my sites. When in doubt always test 😉

  16. Hi Neil,

    another one of your quality articles. I love the ones on design and I’ll be returning to this one again and again.

    Thanks so much!

    Regards,

    Karsten

    • Karsten, thanks for the positive feedback. Glad you find the posts on design helpful. Always glad to answer any additional questions and help 🙂

  17. Hi Neil,

    This is one great article. Formatting is almost everything when it comes to publishing an article. Infact i preached and hammered on it in one of my previous blog post: http://babsreviews.com/publishing-an-article-online.html

    Your article just gave me more insights on making my article appeal better to my audience.

    Thanks for sharing Neil,
    -Babs.

    • Babs, your blog post is very informative and you have the concepts down pretty well — keep up the great work!

      Glad I could help. As always, if you need help with anything else please don’t hesitate to ask 🙂

  18. Awesome post Neil, very informative.

    I wrote an article over a year ago with a remarkable overlap.

    If I can post a tip here as well with regard to font size, line height and line length.. there is an optimal mathematical relation between the three. They call this the ‘Golden Ratio Typography’.

    Cheers, Remco

    • Remco, would love to hear more about golden ratio typography — feel free to share some more in depth insights into it. I think it would be valuable to the readers!

      • I’d be happy to Neil.

        The basics of the golden ratio is that there is a mathetical relation between forms and functions. If they are in harmony/balance then content will automatically look more appealing.
        On the opposite, if things are out of balance they will take too much effort to read and it will scare off readers to actually read the content and engage.

        Imagine using a 16px height font, but using a screen that is 6 feet wide. It would be extremely hard to read the sentences on that screen. You’d lose track halfway a sentence, not sure where you lost track, making it hard to pick up where you left. This ‘unpleasant’ experience is a turn off for any reader.

        Now imagine using a much larger font size.. you would get less characters in a sentence which makes it easier to oversee. Even when using a 6 feet wide screen which is already rather inpractial by itself.

        The point is that our eyes and brains work ‘best’ within certain paramaters. The key being that sentences and paragraphs should be easy to oversee and digest.

        The golden ratio is a mathematical model for that theory.

        Far fetched? No, not at all. Math is full with numbers that occur naturally and everywhere you look. Pi is an example that everybody can relate to.

        If you want to know what I said about the golden ration on my blog just click on my name which will take you there (shameless plug, I admit).

        For the mathematical theory behind it people can read this article here:
        http://www.pearsonified.com/2011/12/golden-ratio-typography.php

        However, for direct practical use in setting up your styling (css) you could use the online calculator here:
        http://www.pearsonified.com/typography/

        Hope that helps.

        • Ramco, thanks for sharing. I’ve always known and read of math in relation to form function and beauty (symmetry) – your account and details here provide more information on the topic.

          Thanks for sharing I am definitely going to check out the two links you provided!

  19. Sometimes I wonder how you know all these things and how you can write such a massive informative article every day 🙂 are you sure you’re human?
    Really great article btw!

    Esteban

    • Esteban, I am indeed human — I just spend a lot of time writing and I am glad to see it pays off. If I can help people out that’s my only concern 🙂

  20. Hey Neil,
    This post is wonderful. Paletton tool is really good.
    Thanks for sharing this wonderful article.

  21. I’ve just started writing my first article so this post couldn’t have come at a better time, along with the post referred to at the beginning. The writing is going a bit slow but I hope I’m able to write faster as time goes on.

    Thanks for the tips.

    • Mario, as time goes by you’ll only get better. Keep up the great work and let me know if you need anything along the way!

  22. Great post Neil.

    I am a big fan and learn a lot from your posts.

    These 5 formatting tips to increase conversions are really cool especially the use of images. Noun Project is a new thing for me. Just loved it and thanks for the share.

    Let me add a few lines. Conversion rate and time on site can also be increased via some other methods like exit intent technology. There are different software that show popups to exiting visitors. It can also allow you to capture response of abandoning visitors with a survey. http://www.picreel.com/ allows you to do all this.

    But then again, it all comes down to formatting. The popup has to be well-formatted and it must have the power to hold a leaving visitor. Else it will not going to make much of a difference.

    Thank you!

    • Love the name 😉

      Glad I can provide value and you find everything helpful.

      You should do a little more research into Noun Project I am sure you’ll find a lot of helpful things.

      Thanks for sharing picreel.com I’ll have to check it out — I am always looking for betters ways to keep people on site and provide value.

  23. Thanks for the tips and also Shocked to know Color also plays the role in Conversions. Thanks for the post.

  24. Hello Neil

    Thanks for the great tips ?

    I have a Post suggestion, that bloggers like me might find useful.

    How to create quality images quickly for bloggers ?

    IF you could explain this it would help a lot of bloggers.

    Regards

    Abhay

  25. Wow, you should rename your website to:-Blogging for dummies or something, everytime I read one of your articles, I just feel like I really know nothing – I will have to follow this again and again! Thanks for sharing.

    • Amanda, while researching topics and content for the articles I learn a ton of new stuff as well. I want to provide people with value and this is the best way — by shocking their mind with new information 😉

  26. It’s amazing how a few design changes can really affect your sites look and feel, but also conversions. Great tips on webdesign.

  27. Thanks for the step embed video. I will try and look forward a good result.

  28. What about if I a publisher of Adsense, what would be my conversion?

  29. This is another wonderful post of your blog, Neil. I really want to apply all of these techniques to my new site!

  30. Really Awesome Article.
    This is an eye opener post for me.
    Now I should keep importance my blog design and color.
    Thanks for sharing.

  31. Theodore Nwangene :

    Its always good to ensure your website is well formatted because a poorly formatted website will be getting less attention.

    Having font size of 16mp is what i will recommend because it will make everyone to find it easy in reading your posts.

    Thanks for sharing.

  32. I will now focus more on my blog color and design. Thank you for the wonderful article.

  33. I came across thousand of blogs but never finding something that can help me increase my website traffic and conversion rate. Thank you for writing about advance formatting for maximize time on page.

  34. Hey Neil,This is a great post and most importantly i really loved learning CSS & HTML from you plus some of the external links you included were great like font pair.
    You talked about custom backgrounds and expert boxes and creating different designs inside content and you also provided the code snippets to go along.
    But i want to point out your’s and all others attention to this great plugin called Thrive Content Builder created by thrive themes.Its a solid plugin which creates beautifully designed custom backgrounds and a lot more to make your content stand out.
    For example,posts on authority hacker are formatted using this plugin and you also linked one of their post.

    • Abdul, glad you found the post helpful and I am happy to help out with CSS & HTML

      Thanks for sharing that tool — I am sure my readers will find it valuable. If you need any specific help please let me know.

  35. Posting content in words alone is a drab. It is really necessary to break your content in different ways to keep site visitors from reading all the way. I’m trying to do this now and I will use what you have suggested.

    • Greg — I agree. Images are what make people come back and really consume your content.

      Let me know how it works out and keep me posted on progress!

  36. I recently found the QuickSprout blog and I just simply want to say how happy I am that I did. You guys (especially Neil–obviously) rock at dishing out sound advice and quality, visually effective content. I look forward to coming back to this blog regularly. To all at QuickSprout: keep up the good work!

    • Jeremy, thanks for the support. I write all the content but there certainly is a team that helps make it look great. Looking forwar to hearing much more from you.

  37. this is great post and more from my expectations, when i seen the title i thought its a normal post with known info to how to create better content but when i open it and read your complete blog it was superb. whenever i read your hot topics on backlinks and traffic, first thing come in my mind about your presentation because that was superb. i used to be thought that how i can create this type of content because m not a professional coder and designer but after read this blog i have lil bit confidence that i am also can create this.

    lol i know i cant able to create exact perfect like you but yes i can create nearly. so thanks neil for this blog and helping us to become a professional in all fields.

    • Anurag, glad to help. Sounds like you are trying to find more backlinks to your site and that’s your main area of expertise. As you know great contextual content is the surest way to achieve that goal.

      Let me know if you need any other help along the way.

  38. Claire Greenhow :

    Thanks to this blog I discovered Canva and have started creating images for my website and infographics too which include icons, like this one https://www.professional-cv-writer.co.uk/2015/09/10-huge-cv-mistakes-infographic/

    Thanks for the tip about the Noun Project too, I am going to take a look at that to see how that can help me in my marketing efforts.

    I wonder what gem you’ll come up with next month for me to try?

    • Claire, I am sure I’ll come up with a slew of other things 😉

      I am constantly on the lookout and I hope others are too — I like learning new things!

  39. I loved the social trigger video. Its amazing. Thanks for this great post

  40. Hi Neil, thanks so much for your posts – always full of helpful information. The CSS and HTML examples are really useful, but something that also caught my eye was your comment about embedding infographics and YouTube videos in our posts. I’ve always assumed that I first need to contact the infographic/YouTube video owner for permission to use it. Is that not the case, as long as I include a “source: ……” link to the original infographic/YouTube video? If so, that certainly cuts down time having to wait for their responses.
    I’m quite new to blogging – if you get a minute, I’d value your first glance opinion/feedback of my website: http://PeasOnToast.co.uk

    • Mrs. P, glad to help. Glad you find all the tips helpful.

      I would definitely suggest you focus on making your content more in-depth and testing out design elements of your site to optimize for results. If you need help along the way please feel free to reach out.

      • Thanks Neil, I appreciate your offer to help along the way. It’d be great if you could point me in the right direction (your comment about content and optimizing), but your contact form pretty much makes clear that you’re already super busy 🙂
        PS, can I embed infographics/YouTube videos without first getting approval – see 8 Nov 2015 comment? Thanks for your time.

  41. As it’s a bit off-topic from your post, I’ve sent you a short email in response.

  42. Great, I’m inspired to use the “feature content from expert” block quote.

    Thanks Neil for sharing.

  43. I would like to thank you for the efforts you’ve put in penning this site.

    I’m hoping too ssee the same high-grade ontent from you later on as well.
    In truth, your ceative writing abilities has encouraged me to get
    my very own blog now 😉

Speak Your Mind

*