5 Disastrous Blog Design Mistakes — Fix These to Keep Your Readers
Editor | 74 Comments

5 Disastrous Blog Design Mistakes - Makealivingwriting.comIf you’re here learning how to make a living as a writer, you’ve probably already got your writing skills down.

But even the most skilled writers can struggle with the design side of their blog.

Internet users are bombarded with information, and each mental transaction takes a toll on their brainpower.

Presenting content so it requires minimal effort from your audience is not just considerate — it also improves your chances that reader will subscribe and return.

What common design errors drive your blog readers away? From my experience as a user-experience expert and Web designer, these are my top five:

1. The wall of text

On the web, people don’t read. They scan. They skim the page from top to bottom in a rough F-shaped pattern, looking for meaningful cues that indicate whether a section is worth paying attention to.

The eye skims the page in a rough F-shaped pattern, looking for relevant content.

If you have a ‘wall of text’ (a body of visually uninteresting content), it camouflages those juicy key words and phrases, making it harder for readers to see that you’ve got useful information. Note the ‘wall of text’ effect in the sample at left below, compared to the more scannable section at right:

Large swaths of uniform text create a ‘wall of text’ effect (left). Add variety with colors and headings to make your content look more interesting (right).

The Fix: Add visual variety with meaningful headings, text formatting, bullet lists, links, and images. Break up your post into short paragraphs, each focused on a single, simple point. This offers readers smaller pieces of information they can easily digest.

2. Bad typography

Both the size and style of your text can affect how your content is perceived and understood. Fortunately, most pre-made blog templates take care of this, but for writers creating or configuring their own templates, a bit of typography knowledge can go a long way in making good design decisions.

The Fix: Set your body copy font size to at least 12 points (14 is better). Smaller font sizes are harder to read and take more effort, so use them sparingly or strategically. Let readers know at a glance that a piece of text is interactive by coloring and underlining your links.

Choose a familiar and visually plain font, such as Times New Roman, Georgia, Helvetica, Arial or Verdana — or one of the similar, but more stylish, alternatives such as Lato, Roboto, Lora, Proxima Nova or Adelle. Avoid overly calligraphic fonts for body copy, as they add visual clutter and reduce text legibility.

Check out the difference in readability between this handwriting-style font at left and the plain one on the right:

Ornate fonts are harder to read, especially at small sizes (left). Improve legibility and visual clarity with larger font sizes, text formatting and color (right).

If you’re going to write a heading that grabs attention, style it that way, too. Make your heading text bigger and bolder than your body copy, adding color if it suits your style.

Using a different font for headings helps them stand out, while also adding visual flair, as you see below. Be sure to choose a simple font that sends the right message to your readers.

Using a different font and color for headings makes them stand out with flair.

3. Low contrast

Content that has little visual contrast may be hard for visually impaired users to read. You want your blog to be fully accessible, so every user can read it, right? Visual contrast is one easy goal all bloggers can achieve.

Contrast refers to the difference in the color and brightness between your text and its background. Low contrast reduces legibility, demands more effort, and can even give readers eyestrain. For visually impaired people, your low-contrast content may not be visible at all.

The Fix: You can analyze and improve your contrast with a tool like this one shown below:

People with visual impairments may find it difficult to read the heading, date and tag on this blog template. Luckily, the body copy is darker, and thus more readable for some users.

Many beautiful blog templates sacrifice contrast for aesthetics. Use a color picker tool to grab the color codes for your text and background. Then, enter them into the checker to see if your content passes or if it fails to have enough contrast.

4. Poorly chosen line length and height

Would you believe line length can also affect the way people read your content? Too-long lines give readers fatigue. They may even lose their place when scanning for the start of the next line.

Too short, and readers are forced into unnatural reading rhythms and skimming patterns — another cause of fatigue. Take a look at how tiresome the top and bottom examples are here:

Various line lengths, offering different reading experiences.

The Fix: I’ve got a rule of thumb for you — the optimum length for a single line of text is between 50 to 75 characters (including spaces). If your content has too many or too few characters, it may be worth adjusting your font size to improve readability — or adjusting your template.

If that’s not enough to think about, line height also affects blog usability. Too-tall line height reduces the cohesion of your content and creates extra distance for a reader’s eye to travel. Too-short line height looks cramped and cluttered, making the brain work harder to recognize letters and retain meaningful words and phrases.

Another design rule: Aim for a line height between 120-150% of your font size. Take a look below at how cramped the 110% line height looks at the left, compared to the 145% height at right:

Line height at 110% (left) looks cramped compared to line height at 145% (right).

5. Visual clutter

As we’ve seen, adding visual variety to your blog can improve the reading experience for your audience. However, overdoing it can backfire. Research shows visual clutter negatively affects our focus by increasing the cognitive load.

Content with too much going on can be difficult to read or see, making it that much harder to absorb and understand.

Extreme example of visual clutter. You wouldn’t do this, would you? :)

The Fix: Use bold, italics, and underlines as needed to convey emphasis and provide visual cues, but use them in moderation. Too much formatting both clutters your text and dilutes your attempts to emphasize key ideas.

Look at how cluttered the example at left appears compared to the one at right:

Example of cluttered content (left) vs. tidy content (right).

As with line height, take a Goldilocks approach to the whitespace between your text and images, your headings and body copy, and where your content sits relative to the edge of its frame.

Science reveals a lot about how our brains respond to visual input. After you’ve spent time perfecting your blog post, the last thing you need is to be let down by poor presentation. Pay attention to your site’s design and layout — it’ll make your work look good, and offer a great experience for your readers.

What’s your pet peeve of bad blog design? Tell us about it in the comments below.

Sandy Lim is a former web designer, content strategist, and UX specialist who now writes, crafts, and studies homesteading. Follow her @sandysandy.

Small Blog, Big Income: Earn Money from your blog!

 

74 comments on “5 Disastrous Blog Design Mistakes — Fix These to Keep Your Readers

  1. Obodo Charles on

    Hi Carol,
    Great post, as usual, Breaking up your post into short paragraphs, each focused on a single and simple point is so important, and I totally agree with you on that. This makes your write up more attractive to readers hence, they will find it much easier digesting every information you have to offer. I love this write-up, it’s filled with so many actionable tips, thanks for sharing.

  2. Eva on

    Hi Carol,

    I enjoyed your post and agree with all of it, especially dark background. Whenever I come across a website or blog with dark backgrounds and bright text, I immediately exit stage left. Not only is it hard to read, but it also adversely impacts my mood.

  3. Richard Workman on

    Hello everyone,
    I have just started blogging and will eventually get the hang of it. I’m doing everything i can to get the hang of it,( reading all i can ) Mostly getting help by reading ,(DESIGNING YOUR WEB BLOG)BY: Matthew Loomis.But all help is appreciated. Thanks you all have helped very much.

  4. Matthew K. Loomis on

    Hi Sandy,

    This is a helpful list of “don’ts” for new bloggers considering how to design their blog.

    As I read through your list, I found myself shaking my head and thinking, “Hard to believe people still do that”, but then I remembered that millions of first timers start a blog every day.

    So I’ll definitely share this.

    I almost think the font size in these comments is too small. Almost. It’s borderline.

    Cheers,

    Matthew

    • Sandy on

      Matthew, thank you for your lovely feedback. I often forget that too. 🙂 I sometimes wonder, when I write things like this, whether I’m telling people something they already know. But I guess even when I already know something, sometimes it’s nice to have it reiterated and reinforced. Thank you for the share. I hope your readers find it helpful!

  5. Anna on

    I evolved from just being the writer to being the administrator of our corporate blog. At first, I just wanted to make sure it looks simple and clean. I quickly realized when I started browsing the blog from my phone how painful it was to read. Glad I came across this post. I liked how Sandy pointed out “Poorly chosen line length and height”. Such a small detail that gets overlooked so easily. Thanks for these great tips! Looking forward to applying them and hopefully, increase traffic/time spent reading our blog.

    • Sandy on

      Thank you, Anna! Gosh, yes, responsive design has forced us to change the way we do things. Glad you liked the post! I hope it helps to make an easier time of cleaning up your company blog. 🙂

  6. Ravi Roshan Jaiswal on

    Hi.. 🙂

    Really nice post for me. I am interesting to see commenting here from different-different writer’s opinion. I also hate from unnecessary animation in site. Actually simple and well designed site looking more beautiful and even faster than other animated site.

    Adding a lot of ads into a site makes its performance down. And audience do not like to visit that site again.

    Thanks for sharing this post.. 🙂

    Have a nice day..

    – Ravi.

  7. Myra on

    Awesome post Sandy and Carol. One more thing that bugs me quite a lot is when the social share buttons are in a vertical bar on the left. The first few letters of every line are covered and it really annoys me to just figure the word out.

    It should simply be on the bottom of the page just like here on your blog. But even some of the best blogs out there just cant figure it out.

    • Carol Tice on

      Myra, that’s a mobile-response issue and what you’re seeing depends on your device and how big you’re making your computer browser window. I usually have mine at about 75% on the computer, and I DO see my AddThis social bar on the left-hand side, but it’s not covering anything over. If it’s doing that, you’re probably at an awkward window size, so it’s not fully optimized.

      What I love about the AddThis tool I’m using is that it’s now individually optimized–meaning, it shows you the social tools YOU tend to use most.

  8. Linda Turner on

    Oh and by the way….that website was my own and that’s why I took it down for revamping. Getting lots of feedback from the post here as how folks interpret what they see on a cluttered site.

  9. Robert on

    A poorly designed blog can result in loss of readers and seriously affect your branding. These tips are great to keep in mind, even if you’re a seasoned blogger.

    • Sandy on

      Too right, Robert! And a great point. I used to have to fall back on “branding” when the accessibility argument failed to convince people. It’s kind of sad, when you think about it. 🙁

  10. Linda Turner on

    Wow! I must say that I am enjoying this post and the feedback from the different writers on this platform. Just as we are talking about a cluttered website, I ran across one this morning. Let me just say this person is a writer and they also design websites. Lots of information all over the page and makes it hard to make a decision.

  11. Ciaran McEneaney on

    I nodded my head knowingly with each point thinking that I know all this stuff until I got to the contrast tool bit. Totally new to me and very useful. Honestly never thought of it at all and quite glad I read this now as I’m getting ready to launch my site’s blog soon. Thanks Carol!

    • Sandy on

      It’s an easy one to miss, Ciaran. I never thought too much about it until one of my silver-haired uncles told me he tried to read my site, but couldn’t find the text! 😉

  12. Sammie on

    Too small text and clutter, whether it’s adverts or flashing side bars, or stop down sign ups that won’t go when prompted! I like a clean read, informative – not overly photo shopped pics and interesting content that doesn’t repeat itself! As a food blogger in use maybe 1 in every 20 shots I take, sometimes I think less is more. I’ll put something in a post and if it doesn’t add to what I’m saying, or interrupts the flow it gets cut. I’m ruthless people!!!

    • Carol Tice on

      There’s nothing so annoying as a popup that WON’T GO AWAY…or they’ve got some TEENY type that says “no thanks” that you have to hunt for to make it stop.

      I guess I think that if your offer is that uncompelling, that you have to trick or force people into opting in, good luck.

    • Sandy on

      Flashing side bars. Oh, the pain! I’m here for the post, not for the ads! 🙂 You make a great point about flow to. I like to think when a person is engaged with your content, even if they’re skimming, they’re still on a reading journey. Immersion is something to strive for.

  13. Dominique Jackson on

    Great tips Carol, especially #3. Contrast is something that I don’t see many bloggers mention when it comes to design. But I’ve definitely come across several sites that were almost unreadable because of it. Solid advice!

        • Sandy on

          Thank you, Dominique. 🙂 Contrast is a sticking point for me too. I got LASIK a few years ago, which left me vision impaired during recovery. Really drove the point home about accessibility – it’s not just for ‘disabled people’. Everyone at some point will experience an impairment – vision, cognitive, motor, technology, etc. – so accessibility really is there to make the web better for everyone. 🙂

  14. Coco on

    I don’t mind that some sites use ads for revenue, yet often it’s just too much…

    Video ads that play automatically, for example, really turn me off. And ads placed by comment systems such as Disqus are often irrelevant and even tacky, ultimately affecting my level of respect for the site’s non-ad content. Also, a site that is so ad-heavy that my not-that-old MacBook has to huff and puff to keep up just smells like greed to me.

    I’ve stopped going to some sites that I otherwise like simply because of obnoxious ads.

  15. Barb Johnson on

    Love this post! My pet peeve about blogging is that I have not finished my own blog. I read them. I read about them. I study how to make a good one. I study how to fix them. But mine isn’t finished yet.

    I will focus and do it.

  16. Maureen Chu on

    Great and timely post, Carol! Thank you. I’m setting up my blog now and am still focused on content, but these tips are invaluable. I’ll be sure to incorporate them as I go along. (I hate pop-ups, too.)

    • Sandy on

      Content is by far the most important thing, Maureen, so don’t feel daunted by the presentation stuff! 🙂 I’ve visited some pretty average sites, but still kept reading and coming back because the content was really good. That was most of the 90s, actually. 😉

    • Sandy on

      It’s a Rorschach test, Virginia. To me, it looks like the best cat in the world. To my partner, it’s an imp who tears around the house at 11 o’clock. 🙂

      (But on a serious note, I like captions too!)

  17. Mili on

    Great post. What drives me nuts is the lack of formatting in RSS feeds. I spend all the time perfecting my blog and when it gets imported into Goodreads, I can’t even go in there to fix it! It would be nice if all the platforms would agree on their HTML.

    Number 5 is the worst one. The moment I see a website or blog with too much visual clutter, I bail. I also hate animation, and the social media pop-ups that block text. I had a difficult time finding a template with plain formatting that would display pictures. Most of them had pictures flying at me. Made me feel seasick.

    • Sandy on

      Animation! Yes, I’m with you there. Or rather, too much animation for me. There’s a warning the accessibility bods give us about that:

      “In general, if the content flashes more than three times per second, is notably large (a small animating image would not cause a seizure), has bright contrast in the flashes, it may cause a seizure and should be avoided.”

      (from the WebAIM whitepaper on seizure disorders)

  18. Linda Turner on

    Good to know news. As always Carol and found info that we as writers need to know if we are to be successful on the web. I am guilty of a couple of these myself and will make changes once my site is live.

    • Sandy on

      It’s too easy to make these mistakes, Linda. 🙂 And sometimes it’s not even the writer’s fault. The ‘wall of text’ problem is hard to solve when your site is responsive, because as the user’s screen gets narrower, the paragraphs get longer and more wall-ier! Most of the time, you just have to bank on the paragraph itself being interesting and simple enough to make up for it.

  19. Deevra Norling on

    I’m with you Williesha on the pop-ups that you can’t get rid when veiwing on a smartphone ot tablet. I hate pop-ups in general. I find them annoying and it never inspires me to sign up.

    • Carol Tice on

      I am also a popup hater–also not liking the SumoMe tool that smashes onto the top of the page until you opt into something, or you have to scroll past it.

      The pros tell me I could convert a lot more on here with a popup, but I think I’m fine without it.

      I think everyone should trust their gut on what the right level of selling on their blog is.

        • Carol Tice on

          No — it’s a business decision. It’s about how I do business online.

          Every site owner has to make these decisions, about how obnoxious they’re going to be in pursuit of a dollar. I think you can earn just fine without these things. I don’t like what they say about your brand, so I don’t use them.

    • Sandy on

      Deevra, that one is painful. Especially ads that still look like they were meant to be viewed on a desktop screen – tiny text and all. And how about those ones that are super sensitive to touch? I’ve accidentally ‘clicked’ on ads just from scrolling. It’s most frustrating.

  20. Williesha on

    This is a great post! A lot of tools and tips I’m not familiar with. The lack of a properly responsive site frustrates me. Sometimes the pop ups used cause the entire page to be inaccessible on a tablet or phone.

    And I understand the reasoning, but I’m very frustrated at sites that refuse to load unless you turn off ad blocker.

      • Carol Tice on

        Ooh, as a longtime Forbes channel blogger, that hurts me! I have too many programs that need the pop up that ad blockers disable, so I haven’t gone that route. I really like their site and think they keep it under control…and I understand their decision not to serve it to people who won’t view the ads. That’s their monetizing strategy…if it were me, I might be thinking in terms of putting on some awesome in-person conferences and such instead.

        • Dominique Jackson on

          Yea, it kind of sucks because I used to like browsing Forbes. But I’m sure it’s not causing a huge problem for them since Forbes is such a well established brand. I’ve even temporarily turned off my ad blocker to read articles bloggers share from Forbes. But I think it’s better to make your site accessible to everyone.

          Here’s the way I look at it. People who use ad blockers do it because they don’t like ads. So forcing them to turn off the ad blocker to see ads that they’re not going to engage with seems pretty pointless. It would be like a restaurant forcing vegans to take a side of yogurt with their meal in order to be served. The vegan isn’t going to eat the yogurt, so what’s the point of making them take it?

          • Dominique Jackson on

            Yea, I understand it’s one of the ways they earn money, but my point is that it’s pretty useless to force people that aren’t going to click ads to view the ads. I think a better approach would be to let everyone on the site, and think of another way to monetize for people that have ad blockers on.

            I’m sure they thought it all through and made the best decision for them. That’s the best part about online business. Everyone can do what works best for them.

    • Sandy on

      Thanks, Williesha! Pop-ups get me too. I don’t have anything against them in principle, but it’s so very rare to see them used well. As for ads… I’m pretty sure I’ve come across sites so laden with ads and marketing trackers, they take way longer to load. 🙁 Boo.

  21. Margie on

    I was recently looking at a blog and the text was so small and the background so dark I could not read it, at all. Plus the text was in weird fancy script writing. I do not think that blog has much of an audience, but I could be wrong.So backgrounds that are way too dark

      • Peter Chordas on

        Studies have shown that memory retention drops significantly for content read in a white font on black background. So while it can definitely look cool to have a dark design, if you want your readers to actually remember anything you wrote, make sure it’s written in dark text on a light background. Just Sayin’.

    • Sandy on

      That sounds like a blog that went for a certain style over readability. I don’t mind dark backgrounds myself, as I have days where I’m a bit sensitive to light. Fancy script writing is a no-no for me, unless it’s purely decorative. Can you imagine a reading a whole page of calligraphy? 18th century internet, anyone? 🙂

Comments are closed.