6 blog design tips for non-designers

Posted on Oct 30, 2012 in Career

I don’t do a lot of B2B (blogger-to-blogger) posts here, but I was trying to read a blog post the other day (about something I really wanted to learn about) and the design of the blog made it absolutely painful to read! So I thought maybe I’d take my experience as a web designer and write a little post with a few tips that’ll help make anyone’s blog more comfortable to read. So if you aren’t a blogger, feel free to skip on over this post. I’ll be back tomorrow with regularly scheduled BTHR-ness.

Before I get into the actual tips, you might be wondering what makes me qualified to dole out this advice because I don’t talk about my day job a whole lot on here. What makes me qualified? Well, I’m a web designer! Actually, I’m a web designer who has won some pretty impressive awards and worked for some pretty huge clients. As a professional, I’ve learned a thing or two from my day job that applies nicely to my side gig as a blogger.

A lot of folks can make decisions about what to them is “pretty” or “attractive”, but a pretty blog that is impossible to read, navigate or use is worthless. Function > form. Especially on the web. So today, instead of giving you tips on styles, colors or fonts (which is individual to each person), I’m going to give you functional usability design tips. These are the kinds of things anyone can implement. And everyone should. So, let’s do it!

1. Left align your text, just do it.

The offending blog I mentioned earlier? I couldn’t get through the content because the text was centered. It made it almost painful to read. Just say no to centered text. Centered text is for headlines, billboards and advertisements—not for large chunks of text. Why? Well, each time your eye moves to a new line, it has to struggle to find the start (because it’s never in the same spot twice), which makes it uncomfortable to read large chunks of text. It just isn’t a smooth transition between lines. Just go ahead and left-align your text. I promise you that users aren’t comprehending your content well if your text is centered. If you want users to read—and understand—your content, don’t center it.

Think fully justifying your text is a good compromise? Think again. Justified text is better than centered, but justified text has its own problems—especially on the web. First of all, a reader uses the right length of a line to help them identify where they are in a paragraph. It all happens in a few milliseconds, but basically, a reader sees “Oh, that line is longer than the one above it and the one below it, so don’t read that one again.” but when all the lines are the same length, it’s nearly impossible to identify where you are in the paragraph. Justified text means re-reading the same line multiple times, which we all know can be frustrating. Also, to make text justified spaces are put between words, which causes “rivers” (areas of white that flow throughout the paragraph) which disrupts the reader.

In print, designers have more control over how text is justified. They can tweak and adjust things to make it to where rivers don’t show, but on the web, you have almost no control over that.

Seriously, just left align it. There has been decades of typography research done about this (yes, there are researchers that cover such things)—flush left text with ragged right lines are the easiest to read and score the highest when it comes to reading comprehension. If you want your readers to consume large amounts of text (like say, a 1600 word blog post, like this one) you want to make it as easy as possible on them to read it and understand it, dontcha?

2. Make your links all the same color. And only use that color for links.

When we’re surfing the web, we are constantly looking for indication that something is clickable. This is really clear when something is a big fat button or says “click here” but it gets a little fuzzy when it’s just a link inside a swath of text (like this). Most websites use color to indicate links in text. My link color is a hot pink color. Awesome! It stands out from the black non-link text and obviously has a different purpose. The problem comes when people use their link color for other text that isn’t a link.

So say you’re link text is bright red. A reader is reading a blog post, sees a bright red word, clicks on it, gets sent to another website, comes back. Then they keep reading. They see another bright red word, click it and the same thing happens—they go to a link. But when they come back to your blog, they see a headline that is the same bright red color. What are they going to expect that header to do? Link to something. But when they try to click on it, nothing happens, because it isn’t a link. And suddenly, your reader has hit a hiccup. You created a precedent that bright red=link. But when you used that red elsewhere without the same action, confusion hit. So pick a link color and only use that color on links.

3. Use headers.

Headers are good. Headers break up large chunks of text and help users scan to find the information they need. Don’t know how to apply a header? In your blog editor visual view, look for a drop down that says “Paragraph” or “Style”. Open it up and inside you should see Heading 1, Heading 2, Heading 3, etc. among the list.

You should never use Heading 1 or Heading 2. Why? Well, this gets into semantic HTML code geeky-stuff, but to boil it down, those are already “taken” in your blog structure. Your Heading 1 (H1 in the code) is the title of your blog (so Back to Her Roots is mine) and your Heading 2 (H2) should be your post title if your theme is programmed properly. Those are automatically generated on each and every blog post, so you don’t need to use those two tags.

The earliest header your blog post could use is Heading 3. So say you have a blog post called “Cooking Chicken” (that’d be your Heading 2/H2) and then inside that blog post you have a section titled “Safe Handling of Chicken”, that’d be a Heading 3/H3. And if within that section, you have a sub-section specifically about Salmonella, that subhead would be a Heading 4/H4. And so on and so on.

Don’t just pick your headings based on the color/size/how they look—the heading tags are literally altering the document structure of your blog post. Want to read more about it? Here’s a good resource.

4. Keep your line lengths reasonable.

As widescreen monitors become more popular, I’m seeing more and more blogs with super long line length (the number of characters on one line before it breaks). Just like with the centered text, super long line lengths are difficult to read because you lose your spot. You spend so much time reading a single line, that by the time you are ready to jump back and read the next line, you have to pause and find your spot. No bueno.

It’s generally accepted that a good web line length is around 100 characters (that includes spaces) but I’d say you could even go up to 130ish and still be good. Basically anything way short (under 50) or way long (over 150) is going to cause some issues. Go ahead, count your characters. Here are some examples of blogs out there with excellent line lengths:

5. Short paragraphs are king.

This blog post is a terrible example of this (do as I say, not as I do), but short paragraphs are king on the web. TL;DR, anyone? That doesn’t come from the word count, that comes from the wall-of-text that comes from not using frequent paragraph breaks. There is something so intimidating about a giant paragraph on the web. Breaks are good.  I usually write my post, with my normal paragraph-when-I’m-feelin’–it method and then go back and try to add more paragraph breaks wherever I can.

6. Skip serif font for body text.

Any trained designer can tell you that serif fonts (fonts with the little tails on the tops and ends of their letters) are the absolute best for readability when it comes to print text, because the eye carries between letters easier. But on the web? Not so much. Sans serif fonts reign supreme. Why? Well, the pixels of the computer monitor screen actually break up the serifs, which makes fonts like Georgia and Times New Roman look fuzzy when at a small, body-text size. But sans serifs like Arial and Tahoma look crisp and clean. If you love a good fancy serif, use it, but reserve it for larger header text where the serifs aren’t as easily broken up by the pixels of a screen.

Even if you don’t love the design of your blog (the colors, fonts, layout), if you implement these six suggestions, your blog will be so much more comfortable for your reader to consume your content—and that’s the whole point!

A usable, well-functioning blog combined with good content is definitely the cornerstone to becoming a successful blogger. Sure, people love a pretty website, but some of the most read blogs on the web focus a lot more on functionality and usability than they do making their blog pretty. Focus on these tips first, then go pick yourself out a new header photo.

Alright, what’s the best designed blog out there? What do you like about it?

Edit: OH! I forgot to mention: remember, that your blog is just that—your blog. So if you love something (like justified text or a sans serif font), keep it! Every day as a designer I make concessions on usability and functionality because of something I really like and that’s okay. Just as long as you are aware of the consequences and challenges of making that decision. The most important thing though? For you to love your blog. Don’t let anyone (yes, even me) tell you to change something that makes you happy.

46 Comments

  1. I’m not a blogger so I just skimmed through this post, but I just wanted to say GREAT ADVICE!

    I actually don’t read many blogs due to their design and it’s the reasons I love you’re blog so much. It especially bugs me and gives me a headache reading posts that centre aligned.

    BTHR is very professional looking and pleasing on the eyes! I just wish more bloggers would follow these simple tips!

    • Thank you, Amanda! I have big things in store for the redesign, but good “bones” of a site design can go a long way!

  2. Awesome! This is the little technical stuff that a lot of bloggers never even think about, but is soooo important for overall readability and aesthetic appeal. Your blog is always one of my favorite examples of excellent blog design (and yay, I’m glad mine meets the line length standard!!)

    Love getting your expertise! I never use headings, only differentiate paragraphs/lists with holding so I am definitely going to incorporate that. Also, sounds like I need to change my link color something fierce. It’s the same as my headings!

    <3

    • I’d say the link color thing is maybe the #1 issue I see in blogs. People pick a color scheme (one or two colors) and then sprinkle those colors everywhere and don’t quite realize that users really react to color as an indicator of functionality.

      You have an Elegant Theme, don’t you? I actually had to go in and change my heading colors because almost all of his themes use the same color for headers and links (and it drives me bonkers). I kinda want to send him an email and say, “Your themes are beautiful and amazing and perfect except……”

  3. I need to embrace the left alignment. I just love the pleasing shape your text gets with full justification.

    • I totally get that. I love using justified text in print pieces when I can control how it displays—it’s beautiful. And considering many many books use justified text—actually really pleasing to read. But on the web, it just doesn’t translate the same way.

      Like you said on Twitter, I think for short blurbs (quotes, etc.) it’s okay, but it can make it a struggle for readers if you want them to consume large chunks.

  4. I love this post! I’ve been blogging since the dawn of time (2000!) so I’ve made every blog layout mistake known to man. (Yeah, I’ve totally done the justified text thing, and I used to NEVER include any sort of whitespace between the container and the text within. Bad!) Looks like I need to clean up the colors I’m using on my site as I’m using my link color as the date color.

    Being a typography researcher sounds like the best job ever.

    • The crazy thing about web work is that it is still SO new (you know this) so we are learning things constantly. CONSTANTLY. The very first website I designed for IU is embarrassing now. And it’s the most visited site in all of IU (and still up), but it’s embarrassingly bad. I’ve learned so much!

  5. I am not a blogger either, but I really enjoyed this post. I liked hearing what makes a good blog and then the reasons behind it! You are very knowledgable about this topic and this post (and your whole blog) show it!

    • Thanks, Andrea! :) It’s fun to use my day job expertise on BTHR!

  6. Maybe you could add a little blurb about no longer using Comic Sans? :) Thanks for throwing this out into the interwebs. It’d be nice if some bloggers took into consideration their RSS readers too. There are a few blogs that I’ve quit following entirely because their RSS “email” formatting was terrible.

    • Haha, people still use Comic Sans? I thought it was so universally hated that everyone knew it was a bad idea! Actually, I’d rather use Comic Sans than Zapfino or Papyrus any day. Yuck.

  7. Thanks for writing this – hopefully people will pay attention! I’m a designer too, and I hate when I really want to read someone’s blog but their usability is awful. Some fancy, random font+centered alignment=my eyes cry.

    • ME TOO! I get wanting to make something pretty and fancy, but the body text of your blog is NOT the place to do it. Leave that for your header!

  8. So glad you are writing about this. I don’t think a blog design needs to be super unique or creative or fancy – it just needs to be calm and usable! I’ve seriously stopped reading some blogs with great content because the layout was so awful I just couldn’t stand it. I’m totally off to check on my blog link colors. I never even looked for that.
    You should also include a dark background on the main text as a big no-no and music playing automatically.

    • I totally agree! I think some of my favorite blogs are the most simple—they really let the content shine. After all, that’s what people come to your blog to see, not shiny sparkly blog design.

      Oh yes, I have a whole list of design pet peeves like that! Reversed text for large chunks = terrible to read. Music and VIDEOS that play automatically = evil. Flash websites (which, why does EVERY RESTAURANT EVER have a Flash website?).

  9. I totally appreciate this post! I’ve been getting into blogs in the past year, and I’m now considering starting my own (SO scary!). I love reading advice from bloggers, especially from the bloggers I love! And since, I know you actually know what you’re talking about, it makes it that much better. :)

    My other favorite blog is The Small Things Blog. I love Kate’s simple, feminine design.

    When I think about blogging the part that scares me the most is pictures – I’m not a good photographer! Tips on that would be great, too! (Also the html stuff is scary… but that’s why I married a computer engineer. ;)

    • I am a horrible photographer. It is on my “list of things to get better at” but in the meantime I do my best and apologize for especially crappy images. I do LOVE Cassie (and Craig’s) pictures! So lovely always!

    • Photography is the one thing that I had to work really, really, really hard at. And I’m STILL constantly learning things. It’s super rewarding once you get the hang of it though.

  10. Oh my gosh, Cassie… this post is awesome! Such great tips for bloggers. I know it’s not really you’re style, but I would love it if you did more posts like this. I some of this stuff from a class I took recently, but some of this was new information. Can’t wait to implement these on my own blog (like the header thing — I had no idea!).

    • I loved writing it! I might include some more posts like this. I know the vast majority of blog readers are bloggers, too. And I LOVE it with other bloggers do B2B posts!

  11. Awesome advice! I had NO idea about the heading thing. So, thanks for that! :)

    • No problem! Something I didn’t mention about headings—they help people will disabilities navigate your website. If someone is blind or has low-vision and uses a screen reader, the screen reader actually uses the headings to categorize the webpage and the user can navigate by them. So with the screen reader, the user can say, “Jump to Safe Handling of Chicken” and it’ll jump to that section and start reading the text for them.

  12. Ok. So I have commented before and I read your blog pretty regularly. I am in the middle of cleaning my house-with the help of two little boys-and just skimmed this post. I am a blogger and although I haven’t read this yet, the text you used as content example nearly made me spit out my lukewarm herbal tea. Thanks for the smile.

    • HAHAHA! I was wondering if anyone was going to pick up on that. :)

  13. Great advice — if all blogs followed it, our eyes would all feel better.

    Have to admit, also: One of my favorite parts of this post was when I caught site of the phrase, “Get down get down rhoncizzle mofo” in the gibberish text of one of the sample paragraphs. That just tickled me.

    Thanks!

  14. Okay. So, can I tell you ROCK? And then follow it up with: YOU ROCK A LOT! This article is absolutely phenomenal. Thank you so much for putting it together. I cannot wait to implement and share your simple ideas. ;) And follow you through twitter so I can see your future awesomeness.

  15. Awesome tips, they made me feel pretty good about my own blog (even though I did not design it, ha!)

  16. Neil and I sat and discussed this post over dinner tonight (between discussing baby poop and how much E slept today). Thanks for giving us a non-baby related topic to discuss!

  17. Very good advice for bloggers, I really like the tips about heading sizes (which I have had trouble with before) and sans serif fonts. They are easy tips that I can start incorporating immediately in my blog posts. Thanks!

  18. OMG :( . I do have of the don’ts! I shall do better! Thank you much!

  19. thank you so much for posting these!! such great tips for clueless people like me!

  20. Ok, I have a question that is probably dumb, but how do I change the line lengths on my blog? I use wp.
    And thanks! Great post for clueless people like me :)

  21. Great tips!! Thank you so much. I’m definitely an offender of some of these, like #3 – I had no idea that I should start with Header 3 for headers within posts. Thanks again :D.

  22. Thanks for the tips! I have come across several blog sites that could certainly use the tips you have mentioned.

  23. As a blogger with no design experience trying to make my site everything it can be, I greatly appreciate this article – thank you!!

  24. Obviously this post is gaining some traction again – I see you wrote about it back in October, but I just discovered it (through Twitter) today.

    Good post overall, and as an on-again, off-again blogger, all your points make sense. In my opinion, however, it’s not just bloggers who can benefit from this article; anyone who writes for the web in general should pay attention to these simple guidelines. They just make sense!

    Thanks!

  25. Can I forward this to everybody in the blogosphere??

    There are all such awesome tips, and ones I run across ALL The time! I agree that is makes things so unreadable sometimes that the actual content is overlooked because I just struggle with it.

    Awesome article! :)

  26. Great advice (I linked over from Healthy Living Blogs). I was happy to see that I already follow most of it.

    Thank you for teaching me about headings. I did not know all of this! I use headings, but I have used both H1 & H2 headings without realizing that I shouldn’t. Is it worth going back to change pasts posts?

    • Nah, I think just as long as you implement it in the future, you’ll be good. Maybe, if you’d like, you could pick a handful of your most popular and fix it (that’s what I tend to do when I realize I’ve been doing something not-so-perfectly). But I wouldn’t worry about it too much. :)

  27. Well, of course your advice is awesome. But even more that that, I love the tweaked Lorem Ipsum you used. Boom shackalack? Awesome.

  28. Found this post from HLB, and I was eager to read it. I was fully expecting to find six things that I would need to implement, resulting in a total overhaul of my blog. Thankfully there’s only two things that need work, and even then, they’re easy(ish) fixes! I tend to write a LOT of words per post, and breaking them up into smaller paragraphs is something that I will apparently need to pay more attention to. And even with having read html textbooks (a decade ago), I didn’t realize that which headers I use was so important! Pretty sure I’ve used the wrong ones before, but I’ll make sure I don’t anymore. Anyway, thanks for posting this! It will help improve my blog while making me feel like maybe it *isn’t* so visually awful. Thanks!

  29. Nice Tutorial Cassie!

    I am sure newbie will learn something about this 6 blog design tips for non designers…

    I like your blog! :-)

    well, In my first few years of blogging, I tended to use every possible widget and feature. For Thistle, I implemented all kinds of things: a comments system, categories, dated archives, themes, support for multiple authors, ‘sticky’ (pinned to the top) posts, various syndication formats, and much more…

    This is indeed a nice article! Good Job!

  30. Great post i really appreciate this post because a student i really want to become a
    Web Designer and i’m looking also WordPress tutorial because i was interested with cms wp also.
    well anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.

  31. Very informative post for a non-designer like me! When it comes to web designing each and every small element seems to be more essential in order to deliver the quality to the viewers. Excellent post!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>