Blogger Education: How to keep your individuality in blog design while maintaining readability for your audience
I write this post with full knowledge that I’m going to offend or at least bruise egos of many bloggers. Our blogs are our homes and how we decorate them says a lot about both us individually and the nature of our blog.
I get it. I DO. My first two blog themes were very dark and sexy and gothy and I cringe, CRINGE, when I look back at screencaps from those days. Why? Well let’s ignore first that my original banner on my blogspot blog was fucking hideous, and admit that I did the whole all-dark-all-the-time and had white text on a dark background. With the blog design that came before this current, bright (in comparison) color scheme was yet another dark and gothic fantasy world – but I’m still proud of that design. I and CoyPink‘s hubby, Alec, worked quite hard at that and I’m still proud of that header with its clickable words. At least I’d wizened up though and made a compromise – dark on the side, white for the posts. Perhaps some things in my sidebar were still a little hard to read for some, but it was a big improvement over the first real design.
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 read1. 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 feedback2
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 all3. 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 Font4 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.
I could have screencapped or linked to examples of some of the things I’ve mentioned above in a “don’t do this” sort of way but that’s not the angle I’m going after here – I’m not doing this to be mean or pick on a person. This is just about good intentions turned into bad designs. And just because you have violated my personal font/color mantra doesn’t necessarily mean that your blog design is terrible. It might be really awesome in every other way….just hard to read. 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 tell me to go to hell and why. You can tell me that you agree with me and give some other helpful suggestions or “Don’t”s. 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. I’d suggest a feedback site that at one point helped me really tweak this current layout and design thanks to honest & anonymous feedback on the design, but I got yanked for being “porn” as did another blogger; you can certainly try your hand and see how long it takes you to get flagged (given how easy they’ve made it to flag for adult content, don’t expect to last long): Feedback Roulette. You look at other people’s sites and tell them what you honestly think, good and bad, and then others do the same for you. Or….just ask me here.
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.
- Please note that I did not say everybody. And I’m sure someone will comment and say that one group of people or they personally prefer what I am saying is hard to read. That’s fine, go ahead. But when the majority of websites are primarily light-colored, that is when it becomes really hard on the eyes – switching from the contrast of the two. ↩
- She’s on Twitter, if I were you I’d show it to her first. Just never Papyrus or Comic Sans. ↩
- Why erase the height and only change the width? By doing it that way you are allowing the html to automatically proportionally re-size the height to match up to the new width. Otherwise you need to figure out on your own what is height-weight proportional and no I’m not talking about swinger club and adult dating site body requirements ;) ↩
- And no I don’t mean the actual font named Goldilocks, sheesh! ↩
This post reminds me of Hey Epiphora’s April Fools Day ‘redesigns’!
Handwriting fonts do hurt my head, they’re often so hard to read. I’m guilty of orange and yellow text on a dark background, but I think I can just about get away with it. It’s readable for me, but I imagine might not be as great for people with different eyesight or different colour settings on their monitor.
Thanks for another great blogger education post. Thank god I don’t think I’ve done any of these things on my blog. I still remember having absolutely AWFUL layouts on my sailor moon website years ago, though! Thank god I learned.
Really good point about the custom font colors that show up in feeds. Also the point about how a bad design will stop someone from perusing archives; I hadn’t thought of that, but that is SO TRUE.
I will be linking to this until the end of time.
Great post Lilly! I actually stopped reading a couple of blogs because they’re just too painful to read, this post should be mandatory reading for anyone looking to design their own blog. Me? I just paid AAG to design mine, but only because you weren’t available at the time :-p
~ right right, that’s what they all claim ;)
Great points all. Funky colours and fonts are not only hard to read, but may show up differently on different monitors, so the intended effect of the design may be lost anyway. So much better to keep it simple.
I’m now in the process of updating my blog due to this post. I went looking around at all types of blogs and realized that the total blackness of mine was too much. I am keeping some elements that appeal to me but I really appreciate when you do posts like this. Thanks!
~ And there are elements of your blog design that are so uniquely YOU I’d hope you won’t change them!
I don’t necessarily agree about keeping photos half the size of your space but I suppose it depends on what else you might have in the post.
I get really irritated when people colorize their bold and italic text. People, it’s ALREADY emphasized.
You can pretty easily use custom fonts, if you have your own webspace, with CSS/font importing but that seems like an awful long way to go ’cause you really like a special font.
But the thing with fonts and colors is, as viewers, we can technically turn off their styles… Heh
I’ve been mulling on this post since it was posted (because I periodically come back to read and chuckle), and every time I do, it makes me so grateful that Epiphora was sweet enough to contact me and say, “Honey, check your shit.” While I don’t notice that I have issue with light text on dark backgrounds, I can definitely understand that it irritates the fuck out of the eyes of other people. My biggest design pet peeve is that whole, “photos that are not sized to your content section” thing. If your photo is trailing off the body of your post section, RESIZE IT. My god, it’s not even that hard. *Shakes fist.*