How to design your blog

One of the most frequent requests I get on Side Income Blogging is from visitors asking me to review their sites and offer feedback.  I actually don’t mind doing this for a couple of reasons:

1. I enjoy looking at other blogs and often add these blogs to my Feedly reader list.
2. Spending time reviewing other people’s blogs often results in services work for me.
3. Reviewing other blogs often exposes me to new ideas and trends.

I generally review 5 – 10 sites a week based on people asking me to provide them with feedback.  I certainly can’t always respond to every request, but I try.  As a result, I see a number of common trends that address another question I commonly get asked:

How should I design my blog? 

Blog Header

On the majority of blogs, the header section is the area above your blogs content and sidebar.  I come across far too many blogs where the header is too big.  The header and logo looks great, but it’s so big, it pushes all of the great content below the fold.  Fortunately, mobile devices are getting visitors more comfortable with scrolling, but you want at least some of your content to be visible on the initial page.

Many new bloggers make the mistake of using the header area to make the site visually appealing, and while that is an important element, the header’s main purpose is two fold: 1) Inform the visitor what your site offers and 2) Establish your brand using your logo and colors.

Both of these can easily be accomplished with a header that is no more than 200 pixels high.  I generally recommend that my clients stay below 150 pixels high.

Don’t over think your header graphic, it should simply state the name of your site and offer some type of visual that compliments the name.  If your site name doesn’t convey the purpose of your site, than you’ll need to additionally add a slogan to convey the site’s purpose.

Blog Content and the Sidebar

Below the header section, a typical blog will usually have space for content and a sidebar or two.  I’m a huge fan of only one sidebar.  Personally, I have a hard enough time filling up one sidebar, let alone two.  I would recommend about 70% of your content area be for your content, and 30% for the sidebar.  I usually strive for a 300px wide sidebar to accomodate ads and various widgets I use.  I always put my content on the left and my sidebar on the right.  I do this to again focus on my blog’s content above anything else.

The content section should contain a summary of your posts, typically 5 – 10.  Whether you include summaries or full-posts is really a personal call.  I chose to use summaries as it allows the visitors to skim your blog and choose the content that most interests them and doesn’t force them to read through a ton of text.  Again, no right or wrong here.  I strongly recommend you insure that an image is shown with each of your posts.  Images add to the article, provide a visual “break” in the content and draw attention.

When’s the last time you saw a magazine without images on the cover?  Exactly.

WordPress allows you to put whatever you want in the sidebar, but this certainly doesn’t mean you should.  I commonly see blogs that have sidebars full of ads or sidebars that are mostly empty.

While placing ads in your sidebar is effective (I have ads in mine), a more effective use of the Sidebar is to feature more of your content.  Instead use your sidebar to:

• Feature your email sign-up form.
• Social media links
• Show your picture and a few sentences about who you are.
• Highlight your most popular or featured articles
• Feature your products
• Feature your top categories

You can certainly mix in a few ads or affiliate offers in between these items, but make sure the focus isn’t on ads, but on driving visitors further into your blog.

Blog Footer

Big footers have been all the rage for the past few years, but myself and many others have moved away from this trend.  In my click studies, viewers did’t click on anything in the footer except the “back to top” link or image.  Thus, I’ve made my footers now include only a simple copyright, a small menu, and a “back to top link”.

If you feel strongly about including a larger footer in your blog, consider including:

• Social media widgets
• Links to your content.  Category widgets work well here.
• About information
• Ads or affiliates

Color combinations

Color is a very important design consideration.  I know people love spending time creating blogs with lots of color and fancy graphics.  The problem is many bloggers way overdue it.  Remember, your visitors are going to see your site many times, often multiple times a day.  Don’t choose colors and graphics based on making a first impression or getting their attention the first time.  Choose your colors and graphics assuming visitors will be spending a great deal of time on your site.  Sites will less color, complimenting colors, and more white space often appear more professional and credible as well.

What this means is, keep it simple.  Stick to a palette of 3-4 colors.  Use a site like Color Combos to find a palette that blends well and where the colors compliment each other.  Allow one of these colors to be a highlight color like red, bright green, orange or bring yellow.  You’ll use the highlight color rarely and to bring attention to very important or “action items” on your blog.

Here on Side Income Blogging, you’ll note I use teal, black, and white as my primary colors.  Bright green and a bright orange are my highlight colors.

Also, avoid using graphics with too many colors or that are too flashy.  One of the big issues I see with many new blogs is using a background graphic that is too busy.  Not only does this hurt your visitors eyes, but it pulls attention from your content.  I generally make the background of my sites white.

Always use white as the background for your text.  Use black for your text, and use light colors for your blog background.  I use white here.  Contrary to what you might think, white is actually a very powerful color for blogs and websites and is perceived as clean and “spacey”.    White space on your site is good, use it.

Also, make sure you use strong contrasting colors when using colors together.  For example, using red and green or red and blue is a problem, especially for people that are color blind.  Even for people that aren’t color blind, red with green or blue is often hard to see.

Blog Readability

The single most important design aspect of your blog is how easy it is read.  If you ignore everything else I suggest in this article, don’t make the mistake of ignoring this one.  If people cannot easily read your content, they will leave and not come back.  Your content is the heart of your blog.  Making it easy to read is critical to your blog’s success.

Fortunately, making your content easy to read is simple:  Use black or near black text on a white background.  Use a common font like Ariel, Helvetica, Georgia or Times Roman.  I’m a fan of sans-serif fonts, and studies have proven they are easier to read, but I have seen many success blogs use serif fonts.

Do not use fancy script fonts or any other font that is remotely hard to read.  Go pull up a few eBooks or paper novels you have laying around.  Notice the fonts they use?  Right, Times Roman and Helvetica for the most part.  There is a very good reason for that.

Trust me, I like cool fonts as much as anyone, but don’t make the mistake of using them in your content, use them in other areas of your site where they are far more effective.

Do not use a light colored font on a dark background – again hard to read in normal lighting conditions.

Less is more

Ever visit a blog and you’re suddenly overwhelmed with buttons, widgets, badges and other gizmos?   I like to refer to these sites as having the “disco” effect in reference to the old bright and flashy disco dance floors of the 70s.  Bad enough are all the widgets, often with them flashing or moving, but then as you scroll pop-ups and other things magically appear and disappear?

While many of these widgets and gizmos do serve a purpose, the primary purpose they serve is distracting people from your content and being annoying.  Again, remember that many won’t just visit your site one time, but many times.  Think about that when making widget decisions for your blog.

Things that might cause your site to have the “disco effect”:

• Pop-ups – Yes, I know they increase email sign-ups, but they are distracting and annoying.
• Too many social buttons – I visited a site this morning that had social buttons under the post title, below the article, floating too the left and in the sidebar.  Way too much.  Pick one.
• Animated Gifs – I don’t see these too much anymore, but often enough to where it’s worth mentioning – Don’t use animated gifs on your blog.  Sure, some are “cute” initially, but not over and over again.
• Auto play music or videos – This is another one that I see far too often.  I personally get very annoyed when visit a site and music or some video starts playing.
• Too many ads – Using too many ads can seem spammy and just makes your site look cluttered.  Having less ads in more effective places is far better than ads all over.

If you ever think to yourself “I wonder if this is too much?”  The answer is probably yes.  Lean on the side of less and your visitors will appreciate it.

Missing required pages

At a bare minimum, there are two pages your blog must have: an About page and a Contact page.

The About page will tell visitors about the site and about you as the author.  The Contact page will present a form allowing your visitors to contact you if needed.  I’ve been continually surprised by the number of blogs that don’t have these two essential pages.

Both of these pages are necessary for your visitors to trust you.  The about page helps them learn more about you and the contact page makes them realize that you are a real person that they can reach out to.

Photo by: Burning Red