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?
[ 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.
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.
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:
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
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').