3 Easy Ways to Improve Your Blog Design

Your blog's design should scream success, but without detracting from your great content. A good design is almost invisible --- blending perfectly with your articles. Here are a few simple things you can do to showcase content and encourage visitors to read further.

1. Display Key Content Above The  Fold

The term "above the fold" refers to the portion of a page that can be seen without scrolling. We need to put the most important, attention-grabbing information in that valuable space.

Many readers are like us --- they already have 4 or 5 toolbars at the top of  their browser window. Allowing for header and such, it might be a tight squeeze to fit the enticing start of your content.  Is your reader going to bother pressing page-down or scrolling?

What should you put above the fold?

The key components to place at the top of the screen are: 1) Header with logo, title & tagline,  2) Menu with top navigation and 3) Start of post content.

The side bar needs to have your RSS box above the fold, as well as other navigation clues .  Blogs that focus on monetization will want to put their ads at the top.

Where can I save space above the fold for my content?

  • Use a narrow header - leave room to add key items on the right side, in the same wrapper as the header. A smaller header can still be bold!
  • Use drop-down menus - highlights important pages and saves space. BlogOhBlog has a good explanation for sub-menus and a plugin that helps get the job done.
  • Use smaller images above the post -  let the first few sentences of the post show above the fold. Wrap text around larger images or ads.

Here are four 'above the fold' snapshots. Which ones make the most of that space?

buildthatlist design above fold
scroll for next snapshot
beepthe geek design above fold
scroll for next snapshot
genius geeks design above fold
scroll for next snapshot
eblogtip design above fold

[ scroll down to see next snapshot; press image to visit the site. ]

2. Properly Align Sidebar Elements

Ever see a sidebar image horribly truncated or bulging out of  a column? If you know the area's width, you can resize the  image for a proper fit.

Determine the width of the area

Most bloggers hate opening up the template code to find the column information.

Display Element Width

Install Web Developer Tool

I suggest you use just one part of the FireFox  tool called Web Developer. While viewing your page, click "Tools" on the browser menu , then select Web Developer, Information and Display Block Size.

BloggingWithSuccess sidebar blocks

This snapshot shows a section of the marked up screen.  The tool outlines each block in red; the CSS identifier and size in yellow.

In our case the sidebar is 332 wide. Text widgets are 252, allowing for sidebar and widget padding. So the largest image or form is 252.

Adjust image size

It's easy to adjust images you create or upload to your blog. Just use the WP or Blogger Editor. But what if you need to resize an image that is part of someone else's widget, as in a Grab my button scroll box? In that case, you can use the image width and length parameters in the html view.

For example, part of the copied html for the image tag looks like this:

<img src="http://farm4.static. ... .jpg" width="125" height="125" /> 

If the image is square like this one, just tweak the values for a better fit. Change values to : ... width="120" height="120", etc.

For rectangular images you may have to do some guessing to get the right values. An image like  width="240" height="120" has a rough 2 to 1 ratio. So if you need width="200" then try height = "100". Preview the page and see how the graphic looks.

3. Tame Your Social Icons

We want to make it easy for a reader to refer articles to her favorite social network, but let's get real. There are way too  many to choose from! Social icons can grow like weeds, choking up critical space. Here's a site where the icons are over-powering the great content (masked to protect the innocent).

What can the blog owner consider?

  • Big is not always better - especially if those beautiful icons take up two lines in your sidebar.
    If you customize your own icons, consider adjusting the width and height as explained in section 2 above. Try these sources for smaller icons:
    DryIcons:
    Smashing
    : 3D icons :
  • Consider placement - I prefer to place multiple icons below the article and a favorite one (Topsy Tweet) at the top of the post.
  • Use plugins that let you pick the top favorites and pop-up the rest. The sexybookmarks plugin does just that --- so sleek, we switched from our custom icons. If you can't pick favorites, then use a pop-up button :
    ShareThis or  AddToAny

Summary

It never hurts to step back and look at your site from the reader's point of view. After all, you know your way around pretty well! Are you hiding the good stuff below the fold or even worse, several pages below?  Are your graphics too fantastic, super-sized?  Do you overload the header or sidebar with blinding trinkets and massive button/link choices?

Be sure to leave a comment to add to the discussion. You can reply for a "friend" if not for yourself ('wink').

Comments

  1. Nice collection. But I believe that you have forgot an awesome free icons pack here : http://iconleak.com/. Take a look, and you will know why I called it awesome free icons site.

  2. Really nice tips. Now i got something to work with. Thanks

  3. Wow, Amazing tips, really useful .. thanks :)

    • Welcome to our humble blog. I drove by your blog — very interesting mix of content. Especially liked your table about # links/link authority to achieve different PRs. Good luck in your studies.

  4. Wow..thanks for that informative reply. You rock. I will check out those themes! For now I might try those tips until I have time to update everything.

  5. I really need to do something like this with my blog. I am trying to find a better theme. I like my header, but I feel like my website loads really slowly. I'm going to try to implement some of these great ideas. I subscribed to your blog as well. I need as much blogging help as I can get!

    • Welcome, always happy to have a new reader and to give any tips that might help! The slow page loading could be your web host or the fact that you have so many posts on the home page. Try setting the value lower. You can also use excerpts with a 'read more' tag. The Advanced Tiny MCE plugin has an Editor icon to easily identify where the homepage excerpt ends. But the best way to do this may be with a new theme (since you want one anyway). Most newer theme are built with excerpts. Luckily with WP you can install the theme and preview or change back easily. Take a look at the ElegantThemes which are fine if you don't need lots of customization. Here's a gallery of free themes to browse. Good luck.

  6. Wow! This is a comprehensive post that says it all and says it well. Thank you.

  7. I can see that you have posted my blog's thumbnail in this post under "Here are four ‘above the fold’ snapshots. Which ones make the most of that space?"

    there in the 2 scroll my website redirects to beepthegeek.net when clicked.But it is www. beepthegeek.net i have some problems

  8. I've been using your article as a reference now that I'm tweaking another Nick Roach special (Coldstone this time). I noticed something as I was reading about the drop down menus and other items you mention – you should provide some links to WP tutorials that describe how to make things like drop down menus. Maybe just some basic information so people can get the general idea on how those work.

    Just an idea….

  9. Great article, really came in handy since I am currently tweaking my site.You learn something new everyday. Thanks.

  10. I am bit surprised to see my design here. To be frank sometime all the things depends on the demand of users. I get more money on header ad (ad above the navbar) so it is a very important spot for me. I will be updating my theme soon (new design is already available.Full width header is included to utilize the space efficiently).

    You did bring a nice topic. One should always consider such spots as a soft spot. One can make money or attract more visitors by putting RSS subscriber button and social media icons.

    One of the best method is to use CSS sprite to attract the attention. i had a plan of using it in header but later I decided to use it on single page.

  11. Great post SBA.

  12. Thanks for featuring my blog in your post! I have a long way to go to take advantage of the 'above the fold' area, but the main thing that I want about the fold is my subscription form.

    From the screen shot I see that my main image takes up way to much space!

    Thanks for putting it into perspective for me.

    • No surprise you got a 'mention', you have been one of our more active commentators and I often visit your blog! Glad you found it helpful.

  13. "Where can I save space above the fold for my content?" – Another good idea is having a slider at the top. I have this on my site and you can put a lot of important content in this and all people have to do is scroll through it.

    • Good tip. Many newer themes have that option on the home page; it's attractive and informative. Some show featured/random posts that scroll automatically.

  14. Note: funny when this article published there was a data access error that garbled the header, made the post column too wide and dropped the sidebar down! Seems to affect only this post. I deactivated the sexybookmarks plugin and all was well. With help of Doreo Host support, narrowed it down to the Twitter icon as the culprit. Works fine when twitter icon is not enabled for this plugin. Still very quirky scenario for the error.

Trackbacks

  1. [...] The question is really one of prioritization and placement. The most important widgets need to be 'above the fold' and before the end of the post.  The footer (really a horizontal sidebar) is an exception since [...]

  2. [...] The Apture bar appears only after visitors page down past the top-fold. Learn more about handling your blog’s top-fold in the post I wrote  called 3 Easy Ways to Improve Your Blog Design. [...]

  3. [...] subscription box is one of those important ‘above the fold‘ items to attract readers! I hope this tutorial has inspired you to redesign that boring [...]

  4. Jim Turner says:

    RT @dougdraws: 3 Easy Ways to Improve Your Blog Design http://bit.ly/9krpe8 – Great tips for putting your blog 'above the fold'.

  5. techandlife says:

    3 Easy Ways to Improve Your Blog Design | Blogging with Success http://bit.ly/dgSH8S

  6. RT @dougdraws: 3 Easy Ways to Improve Your Blog Design http://bit.ly/9krpe8 – Great tips for putting your blog 'above the fold'.

  7. RT @bwsteam: 3 Easy Ways to Improve Your Blog Design http://bit.ly/9krpe8