5 Disastrous Blog Design Mistakes — Fix These to Keep Your Readers

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!

 

Tagged with: , , ,
74 comments on “5 Disastrous Blog Design Mistakes — Fix These to Keep Your Readers
  1. Margie says:

    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

    • Carol Tice says:

      I can’t think of a blog that does well these days that has a dark background! It just isn’t readable. Tires the eyes too much.

      • 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 says:

      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? 🙂

  2. Williesha says:

    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.

    • 100% agree with you on the ad blockers. In fact, I stopped going to Forbes.com for this exact reason.

      • Carol Tice says:

        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.

        • 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?

          • Carol Tice says:

            Well, because that’s how they earn. The analogy doesn’t really hold.

            • 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 says:

      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.

  3. 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 says:

      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.

      • Sandy says:

        “…I could convert a lot more on here with a popup, but I think I’m fine without it.”

        Carol, you are a saint! 🙂

        • Carol Tice says:

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

      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.

  4. Linda Turner says:

    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.

    • Linda Turner says:

      Carol has found. There goes a typo.

    • Sandy says:

      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.

  5. Mili says:

    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.

    • Carol Tice says:

      I feel like RSS is on its way out, so probably few bloggers are focused on how that looks, Mili.

    • Sandy says:

      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)

  6. What the heck is that brown/black blob in item #5? I’d like to see a caption! (We all know captions get read.)

    • Sandy says:

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

  7. Elizabeth o Mahony says:

    Super post, just setting out on blogging and great tips here!

  8. Maureen Chu says:

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

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

  9. Barb Johnson says:

    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.

    • Sandy says:

      You’re not alone, Barb! The kicker is even when you’re finished, you’ll still feel like you could do more. Good luck! 🙂

  10. Coco says:

    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.

  11. 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!

    • Carol Tice says:

      Well, it’s a guest post, Dominique — but the contrast tip was actually my favorite, too! I think that gets overlooked a lot.

      • Whoops, overlooked the bio at the end. Awesome post Sandy!

        • Sandy says:

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

        • Maureen Chu says:

          Yes, sorry I didn’t mention your name either, Sandy!
          Thanks for responding.

  12. Thanks for the handy dandy tips! I loving learning from your blog!

  13. I like your website because it have a lot of articles that they happen in everyday of our life .

  14. I have learnt one or two lessons from your post I have always used 11 points for all my text. I guess I would have to start using 12point for better clearity thanks so much.

  15. Sammie says:

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

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

      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.

  16. 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!

  17. Linda Turner says:

    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.

  18. Robert says:

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

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

  19. Linda Turner says:

    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.

  20. Myra says:

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

      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.

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

  22. Anna says:

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

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

  23. I like your website because it have a lot of articles that they happen in everyday of our life .sss

  24. 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 says:

      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!

  25. Richard Workman says:

    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.

  26. Eva says:

    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.

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