Blog Tip Sharing Project 5: Blog Design

June 21, 2008 | Filed in: B.T.S.P., blogging

A nice* blog design makes people want to stay and read.

Nice (in reference to blog design) adj. “A blog that doesn’t make your eyes bleed when you click over.”

I think that everyone has opinions on what a nice blog design is, some of us think a background design looks really cool, where others think that lots of white space is the cat’s meow. Some people like two sidebars, others prefer three or even four. Since this blog series is about what has worked for me, that’s what I’ll focus on, but also include some links to helpful articles and blog posts I’ve read on the subject.

Today we’re going to cover overall blog design…and yet again I’m giving you the much coveted list.

1. A unique design makes you look more credible than a default template (like those provided by Typepad, Blogger, and WordPress.)

I know that when I switched from one of Blogger’s stock templates to a unique three-column design with custom header, I had an increase in readership. Certainly there are exceptions to this, as two of my favorite blogs, Swistle and Oh, The Joys, simply use the Minima template provided by Blogger and they are doing justfinethankyouverymuch without a fancy pants design.

There are thousands of free templates that you can find simply by googling “free template for blogger/wordpress.” Also, simply adding a unique header, easily made with the assistance of a program like Photoshop Elements can spiff up a basic template. If you happen to use Blogger for your blogging platform, Tips for New Bloggers is a great site that walks you step by step through tweaking and customizing the basic templates.

If you prefer a truly unique design, there are many reasonably priced web designers who can help you. Here are just a few…

Dawn and Coming to a Nursery Near You
Temptation Designs (on a brief hiatus due to the birth of her second baby boy!)
Judith Shakes Designs
NW Designs
Oh My Stinkin Heck
Izzy Blog Design and Graphics
Blogs Gone Wild
Splat Creative Designs
Swank Web Style
Jenny at Absolutely Bananas (headers and buttons)
Me! I can help make headers…but that’s about it.

2. Whatever template you choose MUST be fast loading

When people have 1000+ unread in their Google Readers or those who’ve stumbled upon your blog have to wait for your page to load, they simply aren’t going to wait and will click away. Therefore, you are LOSING READERS. Waaa!

I had to take my twitter badge off of my sidebar because it was causing slow loading time. That makes me want to cry, but I did it FOR YOU because I heart you even more than I heart twitter. Other things that slow loading time are cluttered sidebars, coding errors, and flashy ads or backgrounds.

3. Make sure that whatever template you choose for your blog looks nice* in all web browsers.

You can check this by going to browsershots.org.

4. Your blog should be easy to navigate.

a) Is it obvious where to comment on your blog? Also, don’t make people have to register to comment! Adding that step could possibly make people throw up their hands in frustration! Edited to add: I’m not referring to blogs powered by Blogger, but rather blogs that require you to register to even comment.

b) If your header isn’t “clickable”, then you really need to make a button that people can push to send them to your “home” page. This is easily done in your sidebar…for example on my last template, my header wasn’t clickable, I made a “home” button by writing this code:

You can also make your header clickable…somehow…if anyone would like to share with the class how to do this, please do so in the comments section.

c) Is your most recent post the first thing at the top of your blog? If it isn’t, people aren’t going to scroll around looking for it and you are LOSING READERS! WAAA!

5. Did I mention before the design should look nice*?

Oh yes, I did! And this is what I mean…

Think about these things…the colors you choose for your background, headers, links, and fonts. Make sure they are easy to read. Stay far, far away from tiny fonts, they’re too hard to read! Beware of really elaborate or flashing backgrounds, as they can distract from your content. If you have ads on your site, make sure they don’t overwhelm your content.

There is also a debate around the blogosphere about music that automatically plays on blogs. I personally don’t mind the music, but there are people who swear that they immediately leave if music starts playing. It’s just something to consider.

Here are a few links to posts that discuss blog design…

Make Your Blog Design Work For You

17 Resources for Creating a Blog Design

Good Blog Design

Next week I’ll discuss your blog’s sidebars and use of pages. It will be a RIOT.

I’d love to hear what you all have to add about nice* blog designs. Please, please, please, please…make certain your comments don’t sound like “I hate blogs that…” I certainly don’t mind people putting in your opinions about what makes for a good blog design, just please consider the feelings of others. Also, let me know if you’ve seen any results from StumbleUpon this week…I’m so proud of you who have really jumped right it and stumbled your little hearts out!

Previously in this series…Part 1, Part 2, Part 3, Part 4

Share with others

I’m loving this series. I’m getting ready to go custom and all of these tips help-a lot!

Headless Moms last blog post..One Hundred Push Ups

Well this was up early…
I came in search of your stumble lesson to share with a friend and this was already there…
I’m ready to prettify my blog…let’s do this!

Oh, and I see the changes in your profile info, picture etc…aren’t you all cute?

Good & Crazys last blog post..Parenting Today. But maybe not tomorrow.

Thanks for this series of posts on blog tips–they are very helpful for a new blogger like me!

Elizabeths last blog post..Books again, and the (not so) high cost of home ownership

I usually make my own designs. I latched on to a place called “Final Sense” that makes Blogger templates. The CSS for the colors is what I don’t want to wade through so I find the text color I like then just simply make a new background and implement it. I’ve see what’s involved with wordpress and …. uh no thanks … Blogger has the others beat on that.

Knot

Knots last blog post..Quickly

first i love your blog set up, who did yours and is it wordpress or blogger. i am in the midst of wanting to update mine and change it. but i really don’t know where to start.
i like how when someone comments it leaves their last post.
i like easy navigation and not frilly flowering TONS of badges stuff
i really like when people put the shared items. i think that is a great quick way to find other blogs of interest
i don’t even know if my blog makes people sign in or use a code???
hubby is techie and yet he hasn’t helped out

feeners last blog post..ummm

I have to say, I am one who really prefers that music not play automatically. When there is loud music that all of the sudden starts blaring out of my speakers I am usually less than excited about it.

I do agree that a custom header is something that really makes a difference in the appearance of your blog — I think it’s always nice to see what people come up with!

Maggies last blog post..Summary Saturday: Project 365, Week 25

This was well written, again. You’re doing a wonderful job on these blog tutorials/tips.
I’m not a fan of music on blogs and if it takes forever to load, I’m out of there.
I think I passed the check test on these tips. I hope.
Have a wonderful Saturday and good luck staying off the computer!

rachels last blog post..A Strawberry ‘Ku

thanks jen-
I never knew about browser shots! cool. So what does my site look like to you? A mess? Tell me!
amys last blog post..In the washing of the water will you take it all away

Thank you so much. This is very helpful. I have just started blogging and I’m trying to get mine to look the way I want. I worry that it is too bright right now. I’ll see how it goes and may end up changing it again.

Kendras last blog post..Changes

Cute sassy new picture. Congrats on the google search too!

Educational as always. I have changed some things on my blog since you started this series. Thanks.

And… sidebars next week. Eeekkk… I. Can’t. Wait. I never know what to do with mine.

ohmommys last blog post..Oh. My. Gosh. I am not ready to stop singing.

Yes, yes, yes! This is the post I have been waiting for! I have been eager to customize my blog and have done some internet searches for tips but come up short. Thanks for the great list of resources.
Hopefully, I’ll come up with a custom header soon! I love yours, by the way.

meps last blog post..Dear Abby, I just found out my husband is a polygamist or possibly just someone else’s babydaddy . . .

I just turn off the sound on my laptop if music starts playing - I don’t click away. = )
I love when there’s something extra on blogs - like dooce wtih her daily pictures and bossy with her guess and press. That way, even if they don’t post, there’s something I can look at.
And being able to click to home is so important - if I can’t find the home button I get so frustrated!

Cathys last blog post..‘cuz I’m a Sheep, Haiku Style

I am a StumbleUpon convert and am now holding a StumbleUpon revival with alter calls. Seriously, close to 300 additional visitors yesterday. If anyone would like to join my congregation, my page is: http://texasholly.stumbleupon.com/

Thanks Jennifer for the StumbleUpon information and for being such a sweet StumbleFriend.

I love this information too. A blog design is such a personal thing and it has to hit the writer right and the reader right. Not an easy balance. Just as a two cents thing, I am a fan of no music. For some reason it is never the music that I am in the mood to hear. I just turn it off on my computer so it is not that big of a deal, but that is my two cents.

HRHs last blog post..What to wear when trapping beavers…

Yeah autoplay music drives me crazy. When H was a baby he was startled awake on more than one occasion by loud midi music blaring out from some webpage. I always leave my volume on mute now just avoid the occasional musical page. Music drags down the loading time too.

Ks last blog post..Birthday Crown

feener, My blog is proudly powered by WordPress (self-hosted) which is different that Wordpress.com sites.

I designed my header, which frankly, I’m really proud of!

This template was designed by http://antbag.com.

Thanks for liking it, I really like lots of white space. I need to figure out how to make my center area wider somehow.

Your blog doesn’t make people sign in…in fact, I think that I need to clarify that I’m not talking about blogger blogs…I’m talking about blogs that you must be registered to even comment. Off to add that edit into the post!

amy, I really like your site! Especially your header, it’s dainty, small, and not overwhelming. You also post lots of picture, which is something I personally love. And the picture of yourself in your sidebar is fabulous! I’ll touch on that next week.

ohmommy, one of the greatest things about your site, is your pages (under your header). It really helps keep the clutter in the sidebars down to a minimum.

HRH, so glad SU is giving you results! Woo hoo! As we speak there are 34 people on my site RIGHT NOW since this post was stumbled by someone, which is ALOT for me!

I’m off to go thank the kind person who stumbled the post!

I would also add that unless your blog is ONLY pictures with very little text, never use reverse type (light type on dark background). Photos look great on a dark background, but text doesn’t. It may look nice, but it is so much harder to read than dark text on white or light background. (I learned this tip from my days writing and designing marketing materials, but it is SO true!)

Irenes last blog post..Photostory Friday! FIRE!!!!!

This series has been incredibly helpful for me! I have a suggestion for you and any readers who are interested. It’s something I learned about on another blog just recently and now I do it constantly. Whenever you have a link in your post, it’s easiest for your readers if it opens in another window. For example, I went to the site you suggested to check how my blog looks, then I was stuck there while I waited and had to reopen your post to read the rest. You can tell it to open a new window like this:
1. Put in your link.
2. Go to the html code and find the link.
3. Where the url is located, like this: , type target=”rightside” inside the url
4. Like this:
5. It makes life so much easier for your readers!

Mrs. Whos last blog post..For Fun Friday - June 20, 2008

OK, I don’t know why my example didn’t appear - maybe it didn’t like the way it was typed. Anyway, here’s what it should look like: “http://iknowwhereyoucanfindit.blogspot.com/”target=”rightside

I didn’t put the < signs because maybe that’s what it didn’t like!

Mrs. Whos last blog post..For Fun Friday - June 20, 2008

I’m still getting the hang of SU. Right now I’m having having fun clicking stumble and seeing what comes up. I’m still trying to figure out what the other stuff. I may have to go back and read the SU post again.
Lovin the series though!

jeans last blog post..Psst I Have Something To Tell You But I Cant Tell You Yet

Useful tips… thanks!
I HATE when I visit a site with music because -
#1 - Maybe we don’t share the same taste in music
#2 - It’s difficult to have some quiet ‘quality time’ with your computer when someone else’s music starts spontaneously…

I kid…
Not really…

I’ll be back to check out your next installment of this series!

Jackie

Jackies last blog post..4 Hour (not so) Funny Bone…

Mrs. Who, That is a great tip! When I put a link in my site, I have the option of making it open in another window…I’ll try to remember to do that from now on!

Thank you!

I’m going to wordpress this week, so this was timely
that girls last blog post..ThatGirl Reviews: KungFu Panda (B+)

Oooh, I had one more thought about links opening in another window…you can make any link open in another window by left AND right clicking on it!

I’ll still try and remember to make links automatically open in another window, though!

Great tips.

I for one hate music playing on blogs. I either turn the volume way down if it’s a friend’s blog or I just don’t visit. It seriously annoys me.

With headers you can use a website called Scrapblog to make a custom header. It’s easy and addictive too.

Tonyas last blog post..HAPPY BIRTHDAY TO ME!

I am still trying to figure out how to change things on my site, because I am totally ignorant of such things AND because I use Quick Blogcast, so a lot of the commonly suggested things don’t work for me. This series has been SO helpful!

I like a site that is easy to navigate. I like lots of pictures, but content, too. I’m more into entertaining posts than anything too educational, unless I’m looking for something specific. The one pet peeve I have so far is people using abbreviations (like text or message board speak) in their posts. I’m not sure exactly why it bothers me so much, but it’s enough to make me not come back.

I’m fairly new to blogging and just had my 100th post! I’m giving away some FREE CHOCOLATE, so come on over and enter to win!
http://blog.sweetlifesite.com.

While you’re there, take a look around and give me any suggestions on layout, design, etc! I SURE need it!

Andrea’s Sweet Lifes last blog post..Get Your Free Chocolate!

This was great! I have a really hard time reading the “darker” background-ed blogs and anything with music … I’m out of there!

Can’t wait for the next installment!

moos last blog post..seriously, is this week over yet?

Excellent tips, my dear! A subject (that used to be) near and dear to my heart.

I loved your SU post. I didn’t see any results on my blog, per se, but I enjoyed seeing some new sites and giving some props to my peeps.
Marilyns last blog post..You Need to Read - June 21

Andrea’s Sweet Life, I think your blog looks excellent! I like what you have in your sidebars, not too much clutter. It’s a easy to navigate theme, easy to comment…Nice job!

Glad you’re enjoying the series!

I recently had my blog redesigned, and it’s a place I like to go and to post even more now. I’ve eliminated so much of my sidebar crap, but there is still more to get rid off. I did make some changes so that at least the post itself will load before some of the slower widgets because it’s so true about people not wanting to wait around - folks are busy. I’d love to hear your thoughts if you feel like visiting mine.

I strongly dislike music on a blog. To me it’s no different than people who blast their music at a stop light not caring that most people probably do not share the same taste and don’t want to hear it. If I have to hunt around for where to hit pause or stop or whatever, it’s easier to click away. Forever. Harsh, but true. There are a few people that I like enough to visit anyway, but I still wish they would make the music more “opt in” rather than “opt out.”

Maggie’s Minds last blog post..Haiku Friday 6/20/08

Maggie’s Mind, Your blog looks FANTASTIC!!! I haven’t visited in awhile, sorry, but WOW!! It really is great.

I love the header and colors. I love the two sidebars on the right. It looks very clean.

Nice job!

Just weighing in on the music thing, I”m not a fan of that either. I don’t immediately click away, but I do immediately hit “MUTE”.

dysfunctional moms last blog post..Today, I had a chauffeur.

OK you were looking for a clickable header tutorial and here is one. http://betabloggerfordummies.blogspot.com/2007/03/clickable-headers-for-new-blogger.html

Now I will warn you that the color on this bloggers tutorials is awful, but the content and instruction is simple. Hope it helps!

Jeans last blog post..Psst I Have Something To Tell You But I Cant Tell You Yet

I have been doing my homework and I even thought I jump ahead so I changed my blogs template just before I came to class. Of course I used one of blogger templates. I will look into being more creative after class.
I also posted, something I haven’t been doing because I was down about not having any comments. Well, as I discovered, quite by accident a number of people I know have been reading, but haven’t been posting. I hope you can do a class in the future about how to get people to post.
Thanks for everything Jennifer!

Marye~s last blog post..Gardening in the Yard

Lately, I am understanding why people have anonymous blogs. “Andi’s Exciting Life” started out as a way to share photos and kid updates with family and friends, but I often would like to talk about other things as well. The trouble is, making sure it is interesting, funny, and appropriate for all the people who might read it (my mom, my boss, conservative friends, strangers, etc.) is pretty limiting. I don’t want to share anything too personal, use harsh language, or gossip about anyone for fear of offending my (few) readers. That makes it pretty dilute (and kind of boring).

So… Now that I am thinking of starting a new blog from scratch, this series is especially helpful! I really appreciate you taking the time to help us all out!

Awesome post, Jen and of course, I Stumbled you Thanks for the shout-out
Dawn @ Coming to a Nursery Near Yous last blog post..Photo Hunter – water

[...] Blog Tip Sharing Project 5: Blog Design [...]

to me…a CLEAN design is the number #1 most important thing. it doesn’t have to be fancy - or super awesome, like mine (hahah. i didn’t design it, so i take no credit for it) but it has to be easy on the eye. and easy to navigate.

total dealbreakers for me? reasons i will click the heck right off your site? white writing on a black background. YEESH. ouch on my eyes. or automatic music. EEK!

alis last blog post..tuition well spent…and a race around the world

Thanks for the tip on the browser checker!! I’m happy mine looks alright in most of them (all but a few I didn’t recognize). I’m always working on my sidebars, cleaning them up…it’s so hard to let go sometimes
Sarahs last blog post..Weekly Winners - 6/22/08

I don’t know about others, but I find reading a blog with a black background very achy on my eyes and I’ll click away. it really does strain my eyes and they aren’t getting any younger.

Ditto the black background/white type thing… it’s like that staring at a picture of a black skull then looking at the white wall game you played as kids.

Kristen @MU said it best: “2008 is the year of the unadorned blog!” LOL

VDogs last blog post..Supermodel (You Better Work!)

Thank you, thank you! I finally got a ‘home’ button on my site. Now, if only I could figure out how to replace Blogger’s About Me stuff with something I’ve written. Any tips?

Fairly Odd Mothers last blog post..Cheaper Than Therapy

Vouching for Sam at Temptation Designs. That woman totally rules. I am in love with my blog design

Fairly Odd Mother, I think that you can choose not to display your “About Me” section, or you can put your about me at the bottom of your page.. Then you can use Bloggers text widget to write what you want. I did that when my blog was powered by blogger. It looked like this:

I’m Jennifer
[br/]
Mommy to…..
[br/]
Wife….
[br/]

The [br/] put breaks in between the lines otherwise it would have looked like a paragraph, although paragraphs are just fine (I just wanted to show you how to do it that way. The [ are replaced with the “greater than” and “less than” signs < ,>. Also, there is no space between the < and the br. I just wrote it that way so that it would show up.

If you want to use a picture in this text box, I think you can do that by putting a code from an image hosting site like Photobucket. I upload a picture I want to use, then resize it to “avatar”.

Hope that helps!

Worker Mommy, your blog DOES look fantastic! Sam does great work. She helped me with some coding on this site, without her my header would still be left aligned…I couldn’t get that sucker to center for the life of me!

This comment is in response to the person above who asked about changing the “About Me” section on blogger. The best way I have found to change any of the information on the sidebars in blogger is to do it in a post. Just open a new post, create whatever you want with pictures, etc. Then copy the html code. Now go back to your layout and choose which side you want it on, choose to add html code and paste in your code. Voila! You can put anything on the sidebars this way.

Mrs. Whos last blog post..Pssssst. Wanna Win Something?

Hi Jennifer!
I have SO enjoyed this series, and have sent a few clients over here for some “blogging 101″ help. I can help you with your main content width if you want…anything for another BD chick
Domestic Chickys last blog post..Ack!!

You just keep on rocking this blogging help thing. Thanks! I think for a lot of people blog design is overwhelming at first, but if they can even add a bit of uniqueness to their site via a header at first, I think that makes a lot of difference. (This coming from a big design chicken who uses a default template with a unique header).

andis last blog post..How to embarrass yourself at work

Hey, thanks for the mention in the design arena:) I am honored to be included in your post!

Now I’m off to read your Stumbleupon post. I am a member, but I haven’t really figured out what I’m supposed to do:P

Nap Wardens last blog post..Perfect?

I used Judith Shakes after the NYT mention and when I was with blogger. She was amazing and I loved the design. She was too busy to help me move to wordpress so I went with Sharp Wit Design for more edge and workability. I have to say, I contacted dozens of designers and only heard back from maybe two or three. It was disappointing. Great tips. It helps when your site design is catchy, clean and easy to get around.

Green & Clean Moms last blog post..Infertility and Going Green

May I say again that all of these tips and links are SO helpful Jennifer! Thank you! I’m also getting ready to customize (get a domain, hire a blog designer, etc) and knowing what to aim for is great.

And I’ve been trying to figure out StumbleUpon, but am still a little lost. I have the toolbar installed, and I stumble stuff a lot, but I don’t know quite what I’m doing or what I still need to do. Writing reviews also confuses me a bit. *sigh*

Thanks again, and keep these comin’!

flickrlovrs last blog post..I Just Don’t NEED Male Enhancement Pills, Okay?!?!

Wow…I do love a nice-looking blog. And there are so many DIFFERENT types of design that I find appealing. In fact, when I was with blogger, and understood the lay of the land a bit better than I do at Wordpress, I changed my blog design about once a month. I loved it! I eventually decided that less was more for me, and came up with a custom header I liked, and revamped a basic white three-column design I found that fit my needs. (psst…although I don’t do full design for wordpress yet, I still can for blogger - I think! - and I can help with headers, too. I just don’t advertise because I haven’t had a whole lot of free time here lately.)

I think a blogger definitely should find a theme that conveys what their blog is about. You’ve done that with yours; I’ve tried to do that with mine. And gah, I hope my pinks aren’t too hard to read. I figure if I can see them, probably most anyone can! And I also hope my page loads fairly quickly. It does for me, but other than that? I’m not really sure how to tell.

Thanks so much for the heads-up on browsershots. That is awesome! And yay, I won’t have to open up evil IE just to see what my page looks like there!

Devilish Southern Belles last blog post..I can’t believe it’s come to this.

Thanks so much for the reference to JudithShakes Designs. I took a look at your design’s style sheet, and to make the middle section wider, you need to go to your template editor and find #container in the style.css file. Right now, the width is set to 500px, simply change it to your desired size. Now you don’t want things to get too wide, so you may want to all change the widths in .leftbar section and the .sidebar section. To make it flexible, add percentages instead of widths! Hope that helps.
Judith Shakespeares last blog post..Let’s Talk About Sex, Baby…

I’m sorry, I meant “add percentages instead of pixels”. I so need an editor. LOL.

Judith Shakespeares last blog post..Let’s Talk About Sex, Baby…

I didn’t read all the comments, but my custom header in blogger is clickable to my homepage. And I don’t remember doing anything to make it that way…

You’re doing awesome with this series. Tip for next week? Include information on your blog-fodder (aka family) somewhere in your sidebar (or your about page). When I’m looking at new blogs, I always want to know who is being blogged about and what the blogger is facing on a day-to-day basis!

[...] I mentioned last week, make sure that whatever you have in your sidebar is not holding up the loading of your page. [...]

I have really enjoyed your Blogging 101 series! Great info!

Dorys last blog post..I think it would be a little leprechaun using my brain stem as a trampoline.

Jennifer,

How do I add a search box to blogger? Can you help me oh goddess guru of how to.

[...] in this series…Part 1, Part 2, Part 3, Part 4, Part 5, Part [...]

[...] with your favorite post of mine. I’m still trying to get the sidebars put together, and I hear tell that you can put a list of your best posts for people to click through. I have no idea how to [...]

[...] had a discussion in the comments section several weeks ago with Mrs. Who about making links open in a new window. At first I thought, YES!!! Links SHOULD [...]

RSS feed for comments on this post.

Comments protected by Lucia's Linky Love.