Updated: December 19, 2016
You just don’t understand how great life was back in the days.
The early 2000s were a good time for bloggers because you could get away with ugly design. There weren’t many blogs around and Content is King was true.
You don’t live in that world anymore.
People now expect a decent experience when they go to a site because they know they can just as easily disappear to another site that has similar content.
Fortunately, there are a ton of awesome themes and designers around to help you create an experience that is awesome for your audience.
Unfortunately, there are themes out there that just don’t do the job correctly. They have some elements that look pretty, but those elements don’t do enough to save the design.
Sometimes it isn’t the theme’s fault, it’s your fault.
You dive into the theme’s admin panel and start to make tweaks which lead to more tweaks which lead to even more tweaks. Before you know it you have a Frankendesign that you love because you made the changes, but your audience doesn’t really enjoy it.
Or maybe you are the type of person that thinks they have an awesome design eye and so you make tweaks to your site on your own and create your own them. The result is that you end up calling your ugly kid the most beautiful child in the world.
You might be the type of person that thinks the design of a blog doesn’t matter that much as long as it isn’t ugly. You are probably also the person wondering why your blog isn’t growing.
The design of your blog has such a huge impact on the success of your blog that there is no reason to overlook it.
Why Design Is Important
Let’s think about the goals you have for your blog.
- Make money
There might be more goals, but almost everyone has these in common.
Let’s take a look at the first goal.
Build an Audience
My wife hates to go into stores like Ross, Marshalls, or TJ Maxx. Not because she is snooty and only likes expensive things. She loves the idea of these stores because you can get awesome deals.
She hates them because they are always a mess.
Clothes are thrown around. Nothing is where it should be. It’s total chaos and it doesn’t make any sense.
She used to give it a shot and ignore all of these things, but eventually, she had enough.
Clutter gives her anxiety and it’s hard to enjoy your shopping experience if you are suffering from anxiety. Even though there are great clothes at stupid low prices, she won’t go back to any of those stores no matter what city we are in.
Your blog is the same way. You want your visitors to have an inviting experience. Their first interaction with you is through your design. What is the first emotion that you want them to feel?
Have you ever been to an Apple store? They are the most well-designed stores in the world. Everything is clean and organized and it makes you feel like it is the main store in the world. Their presentation helps them build trust with their customers.
Your design helps you build trust with your audience.
In 2004, if you had an ugly blog you could still build trust with people. A lot of people that got popular back then still have ugly designs today, but it works for them because they have an audience.
It’s very hard to get a blog off the ground if you have an ugly design. You are stacking the deck against yourself and blogging can be hard enough without adding more obstacles in your way.
Do you think it’s hard to build an audience if you are chasing most of your potential audience away?
Here’s the thing, you can’t make money if you don’t have an audience. It’s impossible.
However, if you have an audience who enjoys your design then you’ve built some trust with them. Your wonderful design can now guide them towards the goal of buying something.
Great design builds up your authority rating in a person’s mind and the more authority you have to them, the easier it is to sell.
Could you imagine buying a $5,000 TV off of Craigslist? It probably happens every once in a while, but the majority of the world wouldn’t do it. Craigslist’s design works well for cheaper deals because that is the expectation the design creates.
This is one of the main reasons why Craigslist works so well. Its design gives the impression that you can get a good deal.
Apple, Tesla, or Rolex couldn’t get away with a design like that. They wouldn’t make any money. If you are only selling $5 e-books then you might be able to get away with a crappy design, but if you are selling $997 courses then you want to make sure your design earns the trust of the user.
So with all of this talk about good and bad design, what are some design flaws that blogs do that greatly hurt their chances of success?
The Major Design Flaws that Blogs Have
Each blog is different. One blog might have a design flaw that no other blog has because it totally depends on the purpose of a blog and a page. However, we are going to go over the most common flaws that blogs have when it comes to design.
There is nothing worse than going to a blog post with the expectation to read something awesome only to realize that the font size makes that impossible.
Think about it? What’s the most important experience for your readers?
Their reading experience!
If you don’t make that as awesome as possible, then nothing else matters. Too many blogs use such a small font that there is no point in even trying to read them.
Sure anyone could bump up the font size, but it’s just as easy to click the back button and read something else.
There is absolutely no reason to try and cram as much of your blog post above the fold as possible. Studies have shown that people have no problem with scrolling.
When working on the theme for Obstacle.co, I started with the post page and in particular the actual post itself. I did this because this is the most important experience across the site so I wanted to nail it.
The font size allows for easy scanning and doesn’t tire the eyes. Nobody every complains that the text is too large.
Check out this section captured from another blog:
This isn’t terrible, but it can be improved. For me, it strains my eyes and I couldn’t finish the blog post. Here are some slight tweaks to the same paragraph and note the difference in readability.
Both images are a bit blurry due to the image compression, but you can still see the difference that a small increase in font size can do. In this case, the original font was 16px and I bumped it up to 18px in the second image.
The minimum font size you should be working with is 16px and that is dependent on the font you are using. 16px in one font can look completely different in another font. It’s like women’s jeans. Sizes differ across brands. When it comes to sections with large chunks of text I go with a minimum of 18px.
If you are keeping a smaller font size just because it looks cool to you then you must remember that the experience isn’t for you, it’s for them.
Social Media Sharing Buttons
As you are reading this do you notice anything distracting you on the screen? You shouldn’t because there is nothing but the post itself.
Now go to another blog and trying reading the latest post. Are their social media buttons always present no matter where you scroll?
It’s like they are following you asking for a donation.
Click me! Click me!
What happens is that people read pro bloggers telling them they need to add these buttons to make it easy to share so their audience adds them. If you see everyone else doing it then it must be working, right?
In this case, you’d be wrong.
In 2014, Luke Wroblewski did a study on the click-through rate for these buttons. What he found might surprise you.
Here are the numbers:
- 0.2% 6.8 million page views 14,078 share link clicks. (source)
- 0.6% 4.7 million page views 30,000 share link clicks. (source)
- 0.17% 8 million page views 14,000 share link clicks. (source)
- 0.07% 450,000 visits 298 share link clicks. (source)
- 0.085% 46,000 page views 39 share link clicks. (source)
- 0.075% 45,000 page views 34 share link clicks. (source)
- 0.085% 13,000 visits 11 share link clicks. (source)
- 0.77% 10,182 page views 79 share link clicks. (source)
- 0.5% 8,000 visits 34 share link clicks. (source)
- 0.01% less than 0.01% click on share on Twitter/FB (source)
- 0.29% on 1,981 shares (source)
Pretty shocking right?
If you think about it, it makes total sense. Most people on social media are consumers. They aren’t there to share any content, they are there to consume it. When they do share something it’s usually within the platform itself. They like it. They retweet it.
Now the weirdos like you and me that do like to share content on social media usually do so by manually doing things. If I like something and want to post it to Twitter, I will copy the URL, fire up Tweetbot, and post it in there.
I never, ever use the social media sharing buttons. Odds are you don’t either so what makes you think your audience will?
Now having these buttons isn’t a bad thing. The problem is that these buttons are usually in places that kill the reading experience. Some sites have the buttons hugging the content so closely, you have to wonder if the content is going to get a restraining order.
Let your audience read your content and then share it.
Look at how Obstacle.co flows. While reading this post there are no distractions. The design of this page encourages you to read the whole post. Once you’ve read the post and hopefully liked it, then you can share. This site has social media sharing buttons but they aren’t in your face begging you to do something you might not want to do.
Don’t be a beggar.
You seem to be every blogger’s best friend. For some reason, this is where they want to stick every single little left over design item that doesn’t get its own section. You are like that weird drawer in the kitchen with random objects in it.
But here is what most bloggers don’t understand about you: you are often ignored.
Because websites have been around for so long and everyone has seen a two-column site before, they have developed something called sidebar blindness. This means that they completely ignore the sidebar because they know it is usually filled with junk.
If you were to check the conversion rate on any forms or ads you have in the sidebar you will find that they have the lowest click-through rate of any item on your page.
Sidebars are convenient, but they can also get in the way. You do not have to get rid of your sidebar, but you also don’t have to clutter it up. If you want it to stand out as something more than a junk pile then be very selective about what you put in it.
Also keep in mind that when people are reading your amazing content, usually the content will extend further than the sidebar. So is your expectation for people to do some action in the sidebar and leave your post before they finish, or should they scroll back up and perform an action once they do finish?
The best-designed sidebars are the ones with the least in them.
Same Page Syndrome
Not every page on your site is created equal. Some serve completely different purposes than the rest of the group.
For example, your About page probably shouldn’t resemble one of your post pages because the about page has a different purpose.
It’s like making every room in your house look like the livingroom. It just doesn’t make sense.
Too Many Fonts
There are a ton of great fonts out there, but that doesn’t mean you need to turn Pokemon trainer and try to catch em all.
The general rule for design is that you stick with 2 fonts for a design. This keeps thing simple. I either go with a single font or one font for headings and another for body copy.
That way the reader’s eye isn’t constantly adjusting to all of the madness that lies before them. Instead, they know that when they encounter a larger serif font that means it’s a new section in the post.
If you aren’t quite sure how to pair your fonts, Canva has an awesome post on pairing fonts. If you’d like to see some examples of fonts being paired then here are three sites that do just that for you:
- Font Pair
- Type Genius
- Just My Type
Lack of Visual Hierarchy
In the design world, you will often hear about visual hierarchy. It means that each element on your page follows a specific hierarchy and has its place in the world.
Looking at the page you are currently on, the top section of the page (the hero) has the title of the post which is the largest font on this page. This lets you know that it is the top dog, the most important thing. As you scroll down the page you see H2 and H3 headings along with paragraphs. Each a different size to reflect where they sit in the hierarchy of things.
H2 is the second largest font on the page and it lets you know that it is a major section of the post. H3s in the post let you know that they are subsections of the H2s. However, you wouldn’t know this if they were the same size.
If the H2 and H3 stuff are a little confusing then take a look at this simple guide to basic HTML.
Every good blog post has images. The problem with images though is that you can do a lot of things wrong to ruin the experience for your audience.
Every great blog loads quickly. There are a number of factors that can contribute to load time and the size of the images on your site is one of them.
The larger the image, the longer it takes the page to load.
You might not notice it because all of your images will be cached (saved) in your browser since you are the first one to see your post. After you see an image, your browser adds it to its own personal save box and loads it up from there instead of downloading it again.
Unfortunately, your readers don’t have that luxury so when they first hit your site, they have to download every image on a page.
As you know, if a page takes too long to load you will just give up on it.
So how do you ensure you have the smallest image filesizes? Well, there are a number of different ways.
- If you are saving your image as a jpg, you can dictate the image quality. For my jpgs I usually save them at 70%. That means the image quality is 70% of the original. Fortunately, you don’t really notice a difference.
- If the image is larger than what can be shown on your page then you can decrease the image dimensions. For example, if you have an image that is 7000×4000, that is going to be too large for any page and the file size is probably huge! What you can do is open an image editing program and decrease the image size to maybe something like 1600×1200. That is a little more reasonable. If you can get it smaller than even better.
- Add some effects like blur or decrease the saturation. If you add a blur to your image it can decrease the file size because there are less things to process. Of course, you do not want to do this if you want your image to be crisp. Same thing applies to making your image black and white.
Images Don’t Fit
Your blog probably doesn’t do crazy layouts with regards to your blog posts. Odds are your blog post looks similar to the one you are reading now. Everything is in a specific order, top to bottom. If that’s the case then you want your images to be a good size and span at least the width of the paragraphs.
For Obstacle.co, all images within a blog post are at minimum the width of the paragraphs and usually more. It gives it a nice breakpoint in the flow and doesn’t look out of place.
In the context of web design, your blog can be one of two things:
- Fixed width
- Fluid width
Fixed width is when each design element has a specific width. For example, the paragraph you are reading now has a specific max-width meaning it can’t exceed a certain width.
Fluid width means that the design elements expand to the width of the browser.
Some designs will mix fixed and fluid widths. Looking at this page you can see the top navigation expands the full width of the browser. It’s fluid width.
But as mentioned before the paragraphs are fixed width.
Why are we talking about this? Because you never want your paragraphs to be fluid width in desktop browsers. Long line lengths are a huge pain in the butt to read.
Imagine you bought a book and the pages expanded to however far you could spread your arms. Would you want to read that book? You might give it a shot, but after a while, you’d find that your eyes get tired.
Remember, this is all about creating an experience that is perfect for your readers, not you.
Contrast is the difference between two colors. The lesser the contrast between two colors, the harder it can be to see any differences between them. This is why it is always recommended to have black text on a white background as it provides the largest contrast.
However, some designs like to go with a lighter gray font on a white background because it looks nicer. It does look nicer, but it is much harder to read.
The same can be said about white text on a darker background. In limited amounts it is okay, but when you try to use it for your whole page it can strain your reader’s eyes.
Looks Crap on Mobile Devices
This is one of the biggest design flaws that blogs suffer from today. A large group of people will come to your site via mobile device. They don’t think about themselves being on a smaller screen and therefore they expect the same experience.
When your site looks worse on mobile than it does on the desktop then you have provided an inferior experience. This reflects badly on you and your brand.
Mobile versions of blogs seem to go one of two ways:
- Everything is stripped down, including the styles so what the reader is left with is something that looks like it was written on paper.
- Everything remains so the blog tries to recreate the exact same design on desktop.
Neither of these is correct. You are aiming for something in the middle where you aren’t showing everything that you show on the desktop, but you are providing the same awesome experience.
The First Impression
You’ve heard the expression Content is king and many times it is. However, the first impression of your blog comes from your design. An amateur design makes people feel as though they are reading amateur content.
One of the best ways to launch a blog like a rocket is by putting out an awesome design that helps to increase your authority.
So why do so many beginning bloggers skimp on their blog’s design? Sure it will cost you money to find a great theme or to have one designed for you, but it will cost even more in time to try and establish yourself as an authority in your field.
How do you ensure your site has a quality design? If you’re on WordPress you can buy yourself a quality theme. The idea of spending money on a blog you’re just starting might sound icky, but if you are treating your blog as a business then this is one of the best investments you can make.
If you want something a bit more custom then you shouldn’t hesitate to go looking for a designer. Do you think it’s a coincidence that all the top bloggers have custom designed sites? The more popular a blogger gets, aka the more money they make, the more they seem to focus on the design of their site and tightening things up.
No matter what you decide to do, don’t put your design on the backburner. It’s the front you are presenting so you want to put your best foot forward.
Looking for design inspiration? Check out 9 Jaw-Dropping Homepage Designs You Should Steal Ideas From.
Did you know that there are exactly 13,783 steps to building a successful blog?
I'm just playing, I have no idea how many steps there are but believe me there are a lot.
In fact, one of the biggest reasons why many bloggers don't even get off the ground is because they suffer from analysis paralysis.
The other ones simply don't know what the next step is supposed to be.
That's why I created the 12-Day Blogging Bootcamp.
The idea behind it is that once you see the big picture of everything that you need to build a successful blog, it will become much easier to take the next step.
Stop wondering what it takes to build a blog that can help you quit your job or relieve some of the stress your family might be going through.
The free 12-Day Blogging Bootcamp is meant to give you an overview of successful blogging that nobody else can provide.
These are the things that I do over and over and over again with my blogs, not just my how to make money blog. All of them.
- Personal Finance
- Health and Fitness
- Diet and Nutrition
- Women's Lifestyle
- Working From Home
- Beauty and Fashion
My knowledge is coming from a place of diversity with the different blogs that I run so when I say you're going to learn things you won't find elsewhere, I mean it.
→ Start the Free 12-Day Blogging Bootcamp ←