Blog Design 101: Balancing Personal Style vs Readability

There’s really two basic facts to follow when you choose/create a blog design for yourself:

1. Don’t look like everyone else. Inject your personal style into your blog via color, photos, layout, header design, etc. See a theme you like but see it on more than one person’s blog? Try to avoid it.

2. Do make it readable. Going too far on the “personal style” bent has often times meant that a blog is very hard on the eyes to actually read. And if that’s the case, you won’t be keeping readers.

This post originally appeared in it’s full form (complete with my signature attitude) on my blog, Dangerouslilly.com:

What I hate and why I hate it:

1. You can convey a sexy sex blog without all being in the black/gray/very dark jewel-tones color scheme all the time everywhere. A little goes a long way.

2. For the love of pete please realize that for many people white/light text on a black/dark background is VERY hard to read¹. As is a very bright colored text on a very dark background (red and blue are the worst). I’ve actually had to stop reading a blog because the color choices hurt my eyes so much.

3. Fun fonts are fun. But fun fonts should be used sparingly because they can sometimes be hard to read. Especially when they’re white text on dark background. They should be limited to the blog name in the header and at most the blog post titles or sidebar heading titles. Something that is bigger than your standard 12pt font – a crazy font will be easier to read when it’s larger.

4. Not knowing and respecting the width of your theme’s sidebars and body sections. Learn how to trim down the size of YouTube embedded videos. Keep your photos in posts to half (3/4 at most) of the width of your post body section. And please pay attention to all that crap in your sidebar. You probably CAN change the size of the items, you just don’t know how or don’t think it’s a big deal. It is. At best it just looks like crap, at worst it covers up text in the post body section.

For some of you reading along I might have just inadvertently told you that your blog, your very own blog, hurts my eyes and makes me cringe. I’m not saying this to offend you personally but to offer the wisdom of someone who’s been around the blogging block a bit. Having a blog that is pleasing to the eye and easy to read visually will not only increase your readership but keep them on your blog to explore. I’ve seen some blogs recently that I’d truly like to explore more but I can’t – I absolutely can’t deal with the color and/or design. Don’t take just my word for it, I’ve not designed nearly as many websites as AAG has. I’ve added her comments in below.

My suggestions for making changes:

1. You don’t need to know much about code to make color changes in your existing theme (the only people who can’t do this are the free WordPress bloggers who aren’t able to get into the CSS stylesheet, I do believe that the newer Blogspot dashboard allows you access to the code, be it html or CSS). If you utilize the Firefox browser and then use this add-on called Firebug, you can bring up your blog, turn on Firebug and see the code. You can then go through it and start “turning off” lines of code to figure out what that line of code affects. This won’t actually change your code – just what you see. (I hear that the latest version of FireFox and FireBug make it so that if you’re self-hosted your changes in FireBug CAN be permanent but that’s not my point here). So scroll through it and try to find the sections that are usually labeled “post”. Using this helpful website, pick a new hexadecimal color and replace it (black is #000000 (zero’s, not O’s), white is #ffffff, occasionally coders will abbreviate those two to just #000 or #fff). This way you can change what the post portion of your blog looks like without having to ditch the theme that you like. You can keep the dark background on the sides and top and bottom just have the posts portion be readable.

2. Use your header and graphical design of the blog theme to express your individuality and sexuality, within reason. Also make that header clickable so that it can easily take a reader back to your home page.

AAG sez: a) Reign in the individuality just a wee bit – the header can be sexy but probably shouldn’t be, for example, a close-up lifesize image of your asshole. (yes, this was a true story)

3. Changing to a hand-writing or script-y font just to be different can lead to your blog being even harder to read visually. Sure, it’s different. It’s “you”, even. But it makes me run away very quickly.

AAG sez: a) bear in mind that not all operating systems will display various fonts (used in the body, not in images of course). Check them here.
b) keep in mind that a font that’s awesome today may be passe tomorrow. ask for feedback²
c) Pick a contrasting color for links that does something different yet recognizable upon hover. Check to make sure it doesn’t do something weird after the link is visited. Check this on various browsers as some display visited links differently.

3. Using a lot of banners & buttons and graphical wonders in your sidebar(s)? Consolidate, and change their size so that they’re all the same (or at least so that they fit into your sidebar’s size allotment and don’t spill out into posts or the outer edge). Easy size change tip: When you post the html code into the text box, erase the “height” marker and change the “width” number on them all³. Caution: only go down in numbers, never go up – it’ll look pixelated and cheap.

4. Don’t use lots of colors and/or font styles in one post. It looks high-school-ish (to me), is distracting, doesn’t flow, and doesn’t always translate very well into feeds (why not? see #5). I even run into the problem with my blog that a certain paragraph-styling looks one way on my blog but completely different in the feed.

5. If you insist on having a colored background for the posts section for all that is blog-holy please take caution in forcefully changing the font color of your writing. If the font color is hard-coded into the CSS stylesheet then it will still appear as black text on white background in your feed. However when you go and force the change in your post editor box it will show up in the feed as the color you changed it to – and guess what? Unless it’s a dark color, it’s going to be damn near impossible to read it for those who use feedreaders to keep up with your blog. You think I hate light text on dark background? Bright & light text on white background is even worse!

6. Don’t use a font that is too small. I’ve been to a couple of blogs where the font size is small even for my 21″ widescreen monitor – ok, it was also white on black, so that added to it. But find the Goldilocks Font⁴ for your theme – again this is a change that can be made utilizing Firebug and changing the CSS stylesheet – not too big, not too small, not too hot and not too cold.

If your answer to this is a shrug and “hey subscribe to the RSS feed, it’s plain black text on white background, just like you like it” then you’re missing the point. Don’t you want your readers to interact with you and each other? Don’t you want someone to pour through your archives and become a fan or friend? That won’t happen if they get to your site and their eyes bleed.

Comments are wide open. You can say “hey I think I might fit a bunch of these Do-not-do things, can you look at my site and give me your honest feedback?” and I will be happy to do so tactfully.

 Go for it.

 Resources:

Color Scheme Designer – This tool allows you to input your primary preferred color and get many options. Various hues of the color, complimentary color, and a whole coordinating color scheme. For best use, enter in the Hex value of your primary color on your blog (next to the RGB work lower right of the wheel).

Colorzilla – An add-in to Firefox that allows you to find the Hex color (or RGB values) of any color on any web page.

Firebug – The most important add-on for Firefox to help you tweak your CSS stylesheet (if you need any help figuring out how to use it, please feel free to email me)

How to make your Header/banner clickable – This tutorial is geared towards WP users (self-hosted). For Blogger users I believe you can set that attribute in the Design Dashboard.