7 Components Of Content Marketing Friendly Web Design

Content marketing is a popular way to boost your brand’s awareness and attract potential clients to your business. Publishing news stories, opinions, research and recommendations makes you look professional in your client’s’ eyes.

But simply posting content is not enough. Firstly, it has to be appealing to the users to make them want to read it, and secondly, it must be comfortable enough for them to read. Remember that in 99% cases, there is a lot of content already published on your topic. People can easily hit the “back” button and choose another article from their search results. So you can’t afford to ignore even minor details in your blog’s convenience and visual appearance.

In the last few years, my company has helped design and launch over 40 new blogs. We’ve collected loads of analytical data, conducted A/B tests and research on competitive performance. In this publication, we will share our findings on how to make a blog friendly and encouraging for marketing your content. We hope that you will find our tips useful for designing your blog to work to a 100% capacity!

At the end of the article, I will also share a method you can use to spot the rough edges on your blog, and immediately find a way to fix them.

1. Design

Our obvious starting point will be design. Design is the front gate of your blog – the thing by which every new visitor will form their first impression. There is a proven psychological pattern called the Halo effect, which happens when the first visible trait of an object is subconsciously transferred onto all of its other traits.

For example, if an attorney dressed with bad taste enters the courtroom, he will be treated as behaving unprofessionally, regardless of his actual professional level. Same thing with a website – if it doesn’t look nice, no one would be enthusiastic about its content, no matter how good it may turn out to be.

Good design is rather difficult to define in one paragraph because it depends on the wide array of visual elements. However, the main criterion – and purpose – of good design is to minimize distractions and make reading a comfortable experience.

Let us stress out two basic things that every good blog possesses in terms of design.

  1. Neutral background. Colors are tricky, and they tend to mess with our mind if we just place them here and there without second thought. Yellow or subtle green blog backgrounds may look stylish, but you can never be sure if your readers will share your astonishment. That is why every top blog in the world has white or transparent background. Even if your main site has a different background color, I strongly advise that you make it white for your blog all the same. Here is an example of how a dark-themed website uses a white-themed blog.
  2. No distractions. A cluttered screen is still a big problem many blogs face. Yes, we understand that you must use paid ads, banners, widgets and social share links (not saying the latter aren’t important, but nonetheless) in order to have your blogging efforts monetize. But put yourself in the reader’s position. Would you want to read the post if it’s surrounded by numerous distractions, which only obscure the view? Have a look at the interfaces of two blogs compared below. Ask yourself, honestly – which one would you prefer reading, if given the choice between the two?

 

picture1

 

For more methods and criteria of good design evaluation, consider checking out this comprehensive guide. You can even run a mini-quiz there to see how good-looking your site actually is to your visitors. Also, try browsing through Awwwards ratings for bright examples of well-designed blogs.

 

2. Typography

A font too small or barely comprehensible obstructs readability and requires extra concentration from the reader. Your posts definitely do not need that.

Generally, there are two types of fonts in the present-day typography:

  • Ornate fonts (so-called “Serif”) are fonts with small semi-structural details that act as ornaments to the letters;
  • Plain fonts (so-called “Sans Serif”) are the ones that do without the extra ornaments.

typography

 

Regardless of the style of font you choose, it has to be properly sized. Most studies agree that body text has to be no smaller than 14 pt, and some even argue that 16 pt is the happy medium. You’ve got to keep in mind that your content will be read by people, not robots – and people like to see the letters clearly. One of the bright examples of good typography is Medium.com. Notice how Sans Serif is used in headers and menus there, but Serif – in the body text of the articles.

 

3. Visual Appearance

A cleverly chosen font or font combination is not everything, however. To appease you reader, you must also make sure your text is visually appealing. Let’s look at the Vintage blog, for example. You can see that the body text there is:

  • split into short paragraphs;
  • aligned into a single column at the center of the screen;
  • uses bullet listing;
  • has major points outlined in bold;
  • accompanied by illustrations, schemes and infographics.

Why are these things important to follow? You see, our mind gets bored if we observe a repeating pattern. And text always seems like a repeating pattern, no running from that. However, we can trick our brain with smart use of headlines, images, lists and outlines, and the whole picture would not seem as monolithic. I have intentionally blurred the picture below to make the text incomprehensible. But you still cannot deny it looks reader-friendly, can you?

 

blurry

 

So, here is the list of ingredients to spice up your body text:

  • Short paragraphs help structure the article’s points in the reader’s mind. Plus, such text does not seem like one long – and potentially boring – reading.
  • Dense use of headlines is a must in a world where everyone is in a hurry. Headlines allow your reader to quickly scan the article and make the decision whether it is worth reading as a whole. It is especially important in the B2B segment when your audience are decision makers: managers or business owners. If they can’t scan the article, hey will probably close it right away, like turning the page of a paper magazine. Moreover, the proper use of headlines makes your writing process more disciplined and ordered.
  • Bullet and numerical lists also add up to the structuring of the ideas in the post. This way, points that are relevant to a single category are easier to memorize.
  • Illustrations are comprehended a lot faster than text, and have much more potential to invoke emotions or be memorized. Avoid using cheap stock photos or copy-by-copy images you find in Google. Make sure your illustrations look professionally done, and generate additional value for your piece of content. Do not hesitate to showcase your working docs, schemes, sketches, simple and complex infographics. Here is a really good example on how to illustrate your posts.

4. Page Structure

So, you’ve taken care to make your text look attractive. But how to lead your reader to the post page, so that they can see and appreciate all your hard work?

Let us talk about the structure of your feed – the main page of your blog. The feed is where your posts are listed, either by date, topic, category or other parameters. When the reader enters your main page, they get to choose which articles to read.

One of the best examples of proper feed organization is the Moz blog.

 

mozblog

5. Usability

All right, so your text looks good, and you haven’t forgotten to dress your titles nicely. Now let us make sure your reader gets a pleasurable experience browsing through your blog, and easily gets to the content they are interested in.

The common illness of many blogs is annoying pop-ups. Do you think the reader would want to sign up for your free newsletter, or download your free ebook if it’s the first time they have visited your blog? Unlikely. But what is more likely to happen is that they would close the tab with your pop-up and look for interesting content elsewhere.

Pop-ups are only fair when the user expects them to appear. One of the examples of a good approach to pop-up suggestions is Neil Patel’s blog. It would only offer free stuff to its registered users, who have already explored the blog multiple times.

One of the challenges many modern websites – and not only blogs – face is adaptability and fast loading on mobile devices. This year, the U.S. mobile search traffic has superseded the desktop. This means that people are actually more likely to read your blog from a tablet or a smartphone. When was the last time you checked how your blog looked on a small screen?

When we designed the blog for Apostrophe, one of the most popular political review mediums in Eastern Europe, we managed to decrease the loading time of each page to less than 2 seconds on mobile devices. And after only a month online, the number of page views per session increased by nearly 160%! People like it when the website is fast and easy to navigate. That fact alone turns out to be a strong online reading stimulator.

In order to deliver pleasurable experience to all your readers, you must ensure your blog is displayed and browsed properly on the small screen. To achieve that, consider the following things to implement on your blog:

  • Text adaptability feature. Simply scaling to a smaller size is not enough. The text has to hyphenate, and split itself into sufficient number of lines, depending on the screen size and orientation (horizontal or vertical).
  • Image compression. Without a doubt, illustrations have to be nicely rendered and pixel perfect, but for the mobile screens they have to be auto-compressed to decrease the loading speed and optimize performance.
  • Menu minimization. Your page header is most likely too wide to be displayed correctly on a vertically aligned screen. Most blogs today implement a ‘toast menu’ solution to show and hide the navigational elements. Make sure your blog does that, too.

 

moderndesign

 

There is a nifty tool to check your site’s desktop vs mobile loading speeds – Pagespeed Insights. Just insert your url and see how the whole blog, or a separate article fares on your reader’s devices. Helpful tips on how to optimize the loading speed are provided right on the spot, too.

If you maintain your blog for promotional purposes, it is probably the part of your main business website. And you certainly want your readers to somehow end up at your main website after they have read your posts.

Well, a proven way to achieve this is linking out to your website sections from your blog posts, and vice versa. That way you make your website and blog work in synergy for your business. See how it is done by Yalantis, for example.

 

yalantis

 

In the section of their website, which explains how they design their products, they have placed are a couple of quick illustrated links to relevant blog entries.

6. Subscription & Shares

 

Now we have finally come to the interesting part. The part which is responsible for converting your blog readers into business leads.

How does reader subscription work for you? It keeps your traffic flowing continuously. Let’s say you have published five posts over seven months. Each of these posts have generated different amounts of traffic. So, in this case your traffic over time continuity will look something like this:

 

nonsubtraffic

 

In other words, you can expect most readers for each of your posts only upon initial publication, and after that, the post will be gradually losing its popularity.

But let us see how having subscribers changes things. When you have each consecutive post read by an increasing number of people, this is how your blog’s traffic will perform:

 

subtraffic

 

So, how do we attract people to subscribe for our blog? Some think that forcing readers to do so is a good idea. However, earlier in this article I explained why it is not. A Subscribe call to action is obligatory, but it is better to place it at the end of the article, or at the bottom of the page.

When the user has read your piece and liked it, then they might consider subscribing. But if they’ve only started reading, or are just randomly browsing your blog, subscribing would probably not be their primary concern.

Now, on to the sharing. This is another awesome tool which works even better in synergy with subscription. Social media is where most users look for interesting content. The Facebook Q1 2016 Report suggests that an average user spends nearly 50 minutes per day liking, sharing and checking out what’s new on their feeds.

This is why social sharing options are a must for every post you publish. But then again, it doesn’t mean you have to pin them all over the place. Have a look at the Buffer blog, for example.

 

buffer

 

See how the social share buttons are ergonomically implemented and combined with the post’s reader statistics? It may be an even better idea to dub these buttons at the end of the article, so that the reader can share it after they’ve finished reading. However, avoid using these buttons too much. Here is an example of what your blog may turn into, if you’d be overly obsessed with social shares.

 

7. Performance Reports

At the start of this article, I promised to share the technique of tracking and improving your blog post performance. Well, here it is. In content marketing, one of the most valuable metrics for post productivity is the Bounce rate. Simply put, bounces are single page views, when your visitor closes your site’s tab after visiting only one page. Obviously, the lower the bounce rate, the better your post’s performance.

Every page of your website can be analyzed using the Google Analytics tool. This is a strong and popular instrument to evaluate how well a website performs. To use this tool, however, you should give Google some time to collect the statistically sufficient amount of data. In other words, to get page insights now, you should have integrated Google Analytics in your blog at least a month ago. In case you haven’t, do it right now, because without analytics you lose a lot of valuable information on your posts’ performance. Follow the setup instructions to get Analytics start collecting insights for you.

In order to spot the weak links in your posting chain, from the Analytics menu go to Behavior -> Content -> All Pages, and look for pages with both high Bounce Rate and high Pageviews. They are the worst performers, because despite being viewed, they tend to be closed quickly. If you work on these posts’ improvements, it will make your blog much more valuable to readers. Right now these pages are just turning down (bouncing) their visitors.

For example, if we request information regarding this particular page, we will see that it has a very high (85,76%) overall bounce rate. We have spotted one of the weakest parts of our blog.

googleanalytics

 

What does the high bounce rate mean?

There might be two reasons for it:

  • wrong visitors: people are coming from spammy sources or advertisements;
  • wrong content: your content does not really thrill the users who come to read it, or it is not presented in the right manner.

Having studied the performance report for this post, we realized that the search intention (estimate the website design cost by themselves) of page visitors (business owners) was quite different from what the article really touched upon (4 estimation techniques for IT specialists). Therefore, we rewrote the article so it could actually match the search intention of its visitors – determine the cost to build a website.

But we dived deeper into the subject, and find out that for the mobile version of our website, the bounce rate was even higher (87.80%).

 

googleanalytics2

 

This means that our post did not work to its full potential, especially for the people who read it from smartphones and tablets. Here is what we’ve done to mend this situation:

  • Brought down the size of images. The article had a lot of them, and this certainly slowed down the loading speed.
  • Added internal cross-links. The article had to lead readers to other posts, as well as to our main website.
  • Added links to similar and older posts at the end of the article. Our readers might have wished to learn more on the topic, so we gave them that opportunity.

You can see how neat and pleasant your readers’ experience may become if you take care to design your blog according to these simple principles. Even if there is a clear mercantile purpose behind your publications, they are still made for the reader, one way or another. And if your readers are happy, then you blog has every chance to become a thriving and popular medium.

 

Over To You

What do you think? What additional ways can web design improve your content marketing efforts? Share your experience in the comments.

The post 7 Components Of Content Marketing Friendly Web Design appeared first on GetResponse Blog – Online Marketing Tips.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s