It’s a well-known fact: we live in a visual world and good content equals good design. Having a highly visual, eye-catchy content it’s a very important part of creating content in today’s market.

This time I won’t waste your time with very obvious basic things like consistently used brand colors, on-brand logo usage, branded images, etc, but I want to share with you 4 essential design factors that will have a great impact on your content marketing results.

1. Conversion elements

We have already discussed about goals and objectives. Evidently, the highest avenue that leads towards these goals is the content itself, but your website needs additional conversion places where people will either put their information in or take a specific action. Here are the most common and useful solutions:

1.1 Subscription area(s)

It’s very straightforward: you need at least one place where people can put in their email address. You should place it above the fold in the header or the sidebar of your homepage. Having a second sign-up box in the footer section is also a quite common solution.

Here is a great example:

1.2 Resource page

Having a separate resource center – as a stand-alone web page – with the most important resources and tools incorporated in your website or frequently used by you, is also an efficient way to increase your conversion rates.

Check out this clean and straightforward resource page:

1.3 Call to action

If you are focusing on a given specific primary goal – for example, the promotion of a newly launched product – you are going to need conspicuous, engaging call to action elements placed above the fold to goad you visitors’ interest and curiosity.

Take a look at this amazingly simple and nice subscription-centered CTA:

2. Mobile optimization

I don’t want to make this article even longer than it is, so I won’t spend too many words on this issue. It’s an undeniable, well-known fact: being mobile-friendly is a MUST. If your website isn’t optimized for mobile devices you are going to lose at least half of your potential visitors. Period.

If you are planning to run a purely HTML-based website you are going to need strong coding skills to build it using one of the available coding techniques (for example, adaptive layout) and modifying an existing website in order to make it mobile-friendly, is even more challenging. The simplest and easiest solution is obviously a WordPress website with a professional theme that comes with in-built mobile optimization.

3. Social paths

Your obvious goal is to get your content shared on social media platforms as many times as possible, so you’ll have to give people the opportunity to share it easily and effortlessly. Similarly, if you want to increase your follower count you’ll have to display your profile links for every social platform to give visitors the opportunity to follow you.

Here's a great example:

Adding social sharing buttons to your website is extremely easy even for HTML-based sites. There are many easy-to use applications out there that will allow you to put some nice social media buttons on your site. These completely foolproof solutions will generate a simple and short HTML code for you, and all you have to do is to insert those few lines in your original source code.

Additionally, each social media platform has its own valuable collection of webmaster resources that can help you to create nifty share or follow buttons with similarly easy copy-paste methods.

And of course, if you are running a WordPress site, your plugin-based options are literally overwhelming.

4. Typography

Obviously, choosing an appropriate typeface (font family) for your brand is very important but many site owners doesn’t truly realize the importance and the impact of this major aspect. The whole topic is seriously overlooked by site owners, webmasters and web developers and the results are literally creepy and distressing: nice looking but completely illegible handwritten fonts, comic font styles used on burial websites, ridiculously small font sizes, font color that blends into the background color, etc. Unfortunately, the list goes on, but right now I don’t want to waste your time with these horrific rookie mistakes. Instead, I am going to share with you 4 essential typography-related considerations that will help you to improve your design.

One more thing … The web designers are using a specific language called CSS in order to manipulate the typography-related aspects of a given web page. If you are not familiar with CSS the following terms may sound a bit confusing to you, and that’s OK. What really matters is to see and to understand how these factors can influence the appearance and the readability of your content.

4.1. Line-height

The proportions of a given font family usually will influence the amount of vertical space between each line. Too little vertical space will cause a cramped body text and too much space will make your your text awkward and unnatural. What is important: line-height should always be a function of the font size!

In the typography field there is a unit called “em”, which basically is equal to the current font size. Now, in web design we are always using relative measurements, so let’s see an example to see how line-height and readability are influenced by the changing values if we are using a 16px (1 em) font size:

The most common practice in web design is to use a 1.5 em line-height. Considering the above example, a 16px font-size should be associated with a 24px line height.

In additional terms we refer to the spacing between lines as leading and when line-height is calculated, half-leading (0.25 em) is added both top and bottom of the line. Let’s see another example with a 36 px font size:

4.2 Font family (typeface)

Obviously, this is the very first typography-related question. With so many fonts available and so many factors at play, sometimes can be a quite tough decision, especially if you are planning to use more than one typeface on your website. So, let’s clarify a few basic aspects of typographic anatomy which will help you to choose the perfect font family for your content.

First of all, let”s compare the serif and sans-serif typefaces! Don’t panic yet, it’s easier than you may think. A serif typeface has addition strokes which terminate a main stroke and a sans-serif typeface don’t have any additional strokes:

Simple as that. So, which one is better? Well some people say that serifs are better because they are aiding the eye across the text making reading easier especially if lines are long. Others will say that sans-serifs are more recognizable and they are better for web. In my opinion: what we read most – serif or sans-serif -, we read best. Anyway, fact is, the serif typefaces have historically been credited with increasing the readability and they are still predominant even – or especially – in the offline world. On the other hand, the fact remains: many sans-serif fonts are more legible – at any size – than certain serif typefaces. As you can guess … you’ll have to decide for yourself. Test, test and test.

Now, there is another – in my opinion far more important – aspect that can have a huge impact on readability: the x-height. Basically, the x-height of a typeface describes the height from the baseline to the top of lowercase characters:

Generally, typefaces with a larger x-height tend to be more readable especially in smaller font sizes. On the other hand, a larger x-height will be associated with shorter ascenders and descenders and that means less space between lines, which also can have a negative impact on readability. The key is to find the right balance between font size, line-height and x-height.

4.3 Alignment

Have you ever wondered why so many websites and blogs are using left-aligned text instead of justified text blocks? It’s quite simple …

The mobile-friendly WordPress themes and the mobile optimizations strategies usually are based on so-called fluid (adaptive) layouts where the width of the text block can be difficult to pin-point. In these situations the ideal line length is somewhere between 60-75 characters per line. Additionally, in a justified text block will appear so called channels in the body of your content. Of course, the ragged edge produced with a left-aligned paragraph is even uglier:

To put it simply: you’ll have to make your own choice depending on your layout type, the size of your text blocks and of course, your personal taste. Or even better: make a test to find out which solution works better for your content …

4.4 Cross-browser compatibility

While each programming language – HTML, PHP, CSS, etc – has its own very clear and well-defined syntax, each browser will render the very same source code in different ways.

Just ask a web designer or developer about cross-browser issues and you’ll see his face turning pale green. It’s an extremely annoying and irritating problem and is especially true when we are talking about rendering fonts. Let’s check out the appearance of the very same source code in five different browsers:

As you can see in the above examples the very same source code will generate different outcomes in every major browser, so keep in mind: when building a typographic layout, being able to see the differences between the typography in each of the different browsers (or operating systems, platforms, devices, etc) is a major advantage. Also using so-called web fonts will help you to avoid these annoying rendering issues. The web fonts basically are “specially modified” fonts for use on websites using the “@font-face” CSS-declaration. The good news: any regular font (designed to be installed on computers) can be quickly and easily transformed into a web font using free online tools. For example:

FontSquirrel

https://www.fontsquirrel.com/tools/webfont-generator

Wrapping it up

The most important idea regarding this sub-topic is this one: NOTHING is arbitrary or random in a well-designed, user-friendly web page.

When you are developing a content marketing strategy for your business, EVERYTHING – conversion elements, social paths, typography, etc – needs to be carefully considered, and behind every single decision should exist a clearly defined purpose, one that is consciously aligned with your business goals and your content types. Which brings us to the next sub-topic … content types …