Blog Design – TypeACon 2012

This afternoon, I’m checking out the Blog Design session with Brittany Vanderlinden, Laurie Smithwick, and Melissa Culbertson. (I need this because I need a new design now that I’ve rebranded!)

“We are going to teach you how to win at blog design.” Laurie runs a graphic design agency and co-founded Kirtsy. Brittany writes at MommyWords.com. Melissa has a background in marketing and communications; she blogs at MomComm.

Why Blog Design Matters

Great content + great design = great blog

When blogging first started, design didn’t matter, because the important part was just being out there. The space has evolved as people started making their sites look better and better. People like things that look good; that’s why iPhones sell so well.

In your mind, your blog almost always looks gorgeous after you’ve played around in it in the back end…but then you save it, and it looks cluttered and ridiculous. (Our visual for the bad example was a screenshot of the old version of Pottermore.)

What do designers know that you don’t?

There are rules. Lots of rules, but a finite number of rules. Designers know the rules, and they follow them religiously.

Top 10 Design Mistakes (You Will Find These Everywhere)

1. Sizing issues. This part is too big; that part is too small. Do not go behind 990 pixels for total width.
2. Lack of sharing buttons. We want to share, but how or where?
3. Mismatched purpose. Site doesn’t fit your goals.
4. Lack of images. All words and no pics make a dull blog.
5. Clutter. My eyes are on overload!
6. Formatting. The neverending paragraph. You need white space.
7. Lack of YOU. We are not sure you are human.
8. Bad fonts. Is that tiny Comic Sans I see?
9. Poor images. Low quality or overused images. Food pictures are especially vulnerable.
10. Old stuff. I don’t care where you went last year. Don’t forget what you’ve put on your sidebar.

Under the Hood: What’s Behind the Design Matters

What Spiders See

• Behind the scenes, Google and other search engines read your blog.
• No, they can’t see pictures. So what they see of your design is all in the text and code. (Don’t freak out!)
• “Look at that gorgeous H1 tag. I know what she’s talking about.”
• HTML is the language your blog speaks. Yeah, it talks to Google.
• CSS (Cascading Style Sheet) modifies your design colors, fonts, and layout. (You can’t break your site with CSS.)
• PHP modifies the functionality of your blog. This is programming and can be very useful with basic knowledge. (You can break your site with PHP.)
• Learning just a little code can go a long way.

Provide the correct information behind the scenes. This includes your meta tags in your header. You can right click and choose “View Source” to see the code and see what Google sees.

No more wondering why something looks wonky. Check it out in Firebug for Firefox. You can change things in Firebug to preview them without actually making changes to your blog! There is a similar thing in Google Chrome called Inspect Element.

Focus

KISS wins again. Your content and design should have purpose and focus. Check it using SEO Browser.

Planning is Key

What information do you want and need to present? Consider what you’re doing with your site real estate.

Your links

• RSS/Social Media Icons
• Email Subscription/Newsletter
• Categories
• Highlighted Posts
• Search
• Your Shop or Product
• Facebook Interaction

Links to others

• Paid Ads
• Ambassador Badges
• Blog Badges
• Conference Badges
• Blog Rolls (Are people still doing that?)
• Charities

Size Matters! Consider where you want each element: Header, content, sidebar, footer.

Be creative with space. Dear Crissy does a great job with this.

Make it Easy to Use: Easy to Find, Easy to Read, Easy to Share

Functionality and navigation are so important. Step out of the blogosphere and think about how Zappos makes it easy for you. Or the Starbucks mobile app.

Navigation

Keep people within three clicks. Breadcrumb navigation is very helpful for this.

This means extra work on the backend for you, but it’s worth it!

Finding Your Posts

• Popular posts. Your popular posts are like the endcaps at Target. Be sure to highlight them! (I need to find a widget that works.)
• Related posts. It’s like finding batteries in the toy aisle, or jelly next to the peanut butter.
• Categories. These are like the signage for each aisle. Try to stick to no more than 10 categories. The fewer categories you have, the more authority you have in each topic. Use tags to boil your categories down further. Use descriptive categories (SEO-friendly) rather than witty names. Don’t put posts in more than one category.
• Search box. This is like picking out an employee in the red shirt at Target and asking where to find things. Put your search box above the fold.
• Featured pages. Create a separate landing page for some of your best, timeless content.
• Archives? Most people aren’t going to search for your posts by date, so you may not need include the calendar on your sidebar.

Readability

• Avoid large amounts of text on dark backgrounds.
• Simple fonts for large blocks of text. Keep the fancy fonts for short things like your header.
• Format using subheadings, bullets, and paragraphs.
• Don’t forget images.

Commenting

• Where’s your comment button? Make sure you have the comment button on the bottom as well as the top, and make sure you can comment on a post from the home page.
• Comment moderation. Unless you have a huge problem with spam, you shouldn’t need to moderate comments. Akismet and WP-Ban are amazing plugins that will protect you so you don’t have to turn on moderation for all comments. Make sure you put your activation code in for Akismet, or it won’t work.
• Blogspot. Name/URL. Make sure you have that option turned on for people who aren’t on Blogger.
• Word verification. Don’t do CAPTCHA. It’s incredibly limiting, especially for those using mobile phones. Take down the barriers toward getting comments.

Sharing Posts

• It’s a must!
• Customize when necessary using plugin settings. (Twitter buttons – blog post & Twitter name)

Limit Choices

• Too much jam? Don’t overwhelm your readers with too many choices.
• Fewer than 10 categories.
• One call to action at a time.
• Pare down those sharing buttons. Are your readers actually using Baidu?

What’s in a Design? Layout, Fonts, Colors, Themes

 Layout

• Look your readers in the eye. Get their attention where they are looking.
• Establish a hierarchy.
• Whitespace is your friend.
• Be consistently consistent.

Edward Hopper’s Nighthawks is being used as an eample from art about directing people where to look.

Heatmap analytics can show where users look first. The upper left corner is the most important part of your page. Then things move down and right, then to the middle. On business sites, most people don’t look on the right side. On blogs, however, people are trained to look to the right.

Layout – The Lefty

Check out swissmiss and Kirtsy.

Layout – The Righty

Check out Oh Joy and Design Crush.

Layout – The Hug

This is the one with sidebars on both sides. Be careful, because this can confuse readers. (Oops.)

Check out The Bloggess.

Layout – The Landing

I do this (inexpertly) on ChristinaGleason.com. For a good example, check out FinSlippy.

Fonts

• Your fonts are talking behind your back.
• Keep the font guest list short. Never use more than three fonts. Two is better.
• Pick a runner up. All browsers do not play nice.

Don’t let your fonts clash. If you use Georgia in the body, don’t use Times New Roman for your titles. If you want a different font for your title, one needs to be serif, the other needs to be sans-serif.

Use one of the 16 “safe fonts” at least as your secondary font. (But don’t use Times New Roman. Ever. No one likes it. Use Georgia or another safe serif font again.) List your primary font first, then your secondary font after the comma. Use fonts from the same family. If you have a serif for your primary font, don’t list Arial as your secondary font.

Web fonts are a new frontier.  Google Web Fonts are at the basic level. Font Squirrel is a great resource for Web fonts. Type Kit just got bought by Adobe, and they’re the ones to watch – very inexpensive, too.

Fonts can convey different things about you…

• Modern
• Formal
• Feminine
• Masculine
• Edgy
• Childlike
• Western
• Retro
• Sophisticated
• Techy

DaFont has free fonts organized by descriptive words like this.

Colors

• Keep the color guest list short.
• Put your colors to work. Make rules about your colors. (One color is for post titles, etc.)
• Get inspired!

Crowdsourcing doesn’t work if you don’t like the people you’re asking. Make sure you trust the opinions of the people you ask about your color scheme, etc.

Hire It, Buy It, or DIY It

Buy the Design (Like I bought Thesis.)

• Easy to set up
• Inexpensive
• Lots of functionality built in
• Looks great

Hire a Designer

• You can make special requests.
• You get EXACTLY what you want.
• Your site will be unique.
• Support.

DIY Your Design

• Your site will be unique.
• You will learn the skills to make your own changes.
• Cost is minimal.
• Takes time to learn.
• Can combine with professional graphics.
• Consider purchasing a premium theme with customizable options.
• Use support forums.
• Google your way to glory.

Mix It Up

• You can do a little of everything!
• Make a budget. A realistic one.
• Get a framework and/or theme and make your plan.
• Spend some time learning a little HTML and CSS.
• Determine what elements you want to hire out.
• Rock your new design and your DIY skills!

You can check out the whole PDF of the Blog Design presentation for more design examples.

If these liveblogging posts are helpful to you, please consider liking WELL, in THIS House on Facebook.

Christina Gleason (976 Posts)

That’s me: Christina Gleason. I’m a writer, editor, and disability advocate. I'm a multiply disabled autistic lady doing my best in this world built for abled people. I’m a geek for grammar, fantasy, and casual gaming. I hate vegetables. I cannot reliably speak, so I’ll happily conduct business over email or messaging instead.