Not knowing how terrible I am at memes, Dane tagged me. I felt guilty when I saw Andy Beard had already fulfilled his tagging assignment; now I’m finally fulfilling my obligation to tag people.

Strangely enough, I share some of Andy’s; he talks about improving his blog theme layout. Needless to say, I have the same problems and more. The main reason for my crummy template that I decided to work on pillar content first, and blog layout later. I also initially overlooked social networking (probably because I am slightly anti-social?) Andy does that very well; I’m working on that– but I already blogged about some of my efforts.

Here are blog problems I’m thinking about I want to improve in October:

1. Speed up Sidebars: My content seems to load fairly nicely. To maximize traffic and revenue, I need everything above the fold to load quickly. This includes content, navigation and ads. Unfortunately, my sidebars are often pathetically slow. This was partly due to Bumpzee which frequently bogged down. Other widgets often loaded slowly: I’ve moved all suspect slugs to the footer for now until I find a better solution.

   Who does this better than me? Every one

2. Archives by time and topic.I generally prefer topical archives. However, some monetizing programs like Pay Per Post and some blog visitors want temporal archives. I’m going to seek out a calendar to minimize the amount of space devoted to temporal archives.

   Who does this better than me? I don’t know! I think archives are just a problem.

3. Not enough posts linking out. Specifically, I don’t link out to good posts I find and read often enough. Blog readers generally find out-links to valuable content a service: it helps them find solutions to problems. That’s one of the reasons “list” posts are popular.

   Everyone knows who does this well: Pro-blogger, Darren Rowse, who solicited links to focus articles throughout August. He then posted articles like: 113 Must Read Blogging Tips!

4. Layout needs space for more ads Sounds odd, right? But this blog is intended to talk about monetizing. Though I do not intend to focus solely on making the most money, I need space for ads in the sidebar, while still providing clear navigation. I’m also working on a plugin for affiliate ads– but I’m experiencing some mental blog issues.

   Who does this well? Maurice of Cayman Host has a nice four column theme. I can navigate and find posts, I can read the post without distraction. Yet, Maurice has plenty of ads with some appearing on both above the fold and as I scroll down. I think the layout doesn’t look spammy. So, that’s a candidate.

5. I need products to promote. After I create the perfect layout, I need products right? Well, I know who explains where to find them! That’s Josh Spaulding of Make Money Blog., though, the products are often on other pages he hosts.

We are supposed to tag the people who do this better than we do. I picked 5 areas for improvement and named who did this better than I. So I guess that means I’ve tagged: Maurice of Cayman Host, Josh Spaulding of Make Money Blog., Darren Rowse of Problogger, “everyone” and “I don’t know”.

Will they all pick up the baton?

Well…. I suspect “everyone” and “I don’t know” are unlikely to rise to the challenge. Darren is an awfully nice guy; he’s also probably a bit busy. With luck, Maurice and Josh will continue the meme and keep it from dying!

Define “Above the fold”.

There is no firm definition of “above the fold”. People with larger screens see more; people with smaller screens see less. I consider “shows at the top of the Wordpress preview pane without scrolling” to be “above the fold.”

Here’s a screen shot of one of my recent blog posts:

Does the important stuff show?

Each blogger has their own opinion about what’s “important.” At my blog, I think showing at least a few lines of content is very important: People should not need to scroll to read the first few lines of content. I think showing adSense is somewhat important: If the first few lines of content don’t interest the reader, I’d like them to click the ads!

Viewing that post, I decided that I needed to shift the Google ads up a bit.

I also saw something I consider unimportant showing in my content area: both the date or categories will fulfill their purpose if they appear below the fold.

If I shift those, there may b some hope my content will capture a new visitor’s interest or, failing that, cause them to click on a pay per click ad before they need to decide whether to scroll or hit the back button.

Could I Make Additional Improvements?

Of course! There is no such thing as “the perfect template”. Anyway, I haven’t begun to evaluate my sidebars yet; they are atrocious. I’ll be editing those soon!

To see how widespread it wise, I decided to click on some links at at Problogger. I snapped these shots while pages were still loading. Voila!¹

Notice the content doesn’t show on two and barely shows for the other? The CSS files for these themes loads the content (or background for the content) after the ads, navigation and whatnot. I guess if Darren himself makes this mistake, it’s not surprising others do too. (I’m also beginning to think the blogger default template suffers from “content-loads-last”. Advice to blogger: fix that!)

Interestingly, on of the three bloggers describes himself this way at Problogger?

Hello everyone, I’m Matt from NetBusinessBlog.com. I’ve been doing web design and development for the last 7 years but have just recently started blogging.

I’m betting Matt has a high speed internet connection.

Here’s another example of the “content loads last” blooper I found at Health bolt. I broke that image from the pack because Healthbolts’ blooper is probably not the individual blogger’s fault. It’s caused by b5media.

I had a rude shock this morning. I always view Big Bucks Blogger in Firefox. Today, I visited using Netscape. Yikes! The real problem was that text flowing around the inline images and ads broke rather oddly and the entire content looked jumbled. Weird text flow and broken ads is no way to make money blogging!

I’ll explain what happened to my, why this happened to me, why it may be happening to you, and also describe how to correct it.

What happened?

Let me show you the sort of thing that can happen. (And mind you, what happened was much worse than I’m showing here. I fixed the problem before taking screen-shots and had to “recreate” the problem at my test blog.)

Here are screen shots of a page as it displayed on two browsers; don’t try to read the text, just notice the general layout. For reasons that should become clear later, I added some blue lines to the one on the right.

 

Notice that the screenshot on the left shows the text flowing to the right of the top image. The second paragraph ends very near the bottom of that image. A bulleted list begins; Google ads are to the right of the bulleted list.

This is how I meant the text to display when I composed the article viewing it with Firefox which I had set to force the font size to be at least 16px. I set the minimum pixel size this large because I have bad eyes.

Now, examine the screen-shot on the right. Notice the second paragraph of text stops well before the bottom of the first image. So now, the bulleted text and the Adsense float to the right of that first image. Meanwhile the bulleted text also floats to the right of the Adsense. You’ll also notice, the bulleted text is “squished” between the image and the adSense. Worse yet, the first bullet actually hovers over the first image!

That big black dot to the left of the blue line is not part of the images. Obviously, you don’t want bullets to actually hover on top of images!

Why the layout broke

Do you want to know why this happened? When writing my post, I viewed at 16px. Naturally, I thought I could align the Google ads with the top bullet. So I did! That looked fine to me.

However, my CSS style sheet suggested an 11px font size and Netscape used that suggestion.

Now, it just so happens, 11px is smaller than 16px. When the article is viewed at 11px, the bullet and Google ads ended up above the lower edge of my first image resulting in the “squished” look we see in the second screen-shot.

If I’d edited this viewing at 11px, I would have just shifted the Google ads down solving the problem! Or, if I could get my site visitors to view at 16 px, that would solve the problem. But most visitors don’t want to view in 16px, and it’s silly to try to make them try. I know many will view it in 11px — that’s the font suggested by my style sheet.

How to fix it

Fixing is simple. Even if you normally set your browser to display a minimum font size (and most people over 30 do) be sure to check the display with the minimum font size turned off! To speed the process, I plan to do this.

1. When composing my blog entries, I will switch “minimum font size displayed” to the smallest comfortable size I can see. Even though I find 16 px vastly more comfortable than 14px, I’ll switch to 14px when composing posts. I’ll make sure the layout looks “ok” at that font size.
2. After writing the post, I’ll switch off the “minimum font size” on my browser and preview the post again. If it displays badly, I will spread the images apart– that is, make sure there is more text between the points where I insert the images. (In my case, I could shift the Google ads down to align with the next bullet point.)
3. After that, I can publish with minimal fear that the post will be jumbled on someone else’s screen.

Now, mind you, there are no guarantees on the web. Some browsers let visitors entirely ignore font size suggestions. If someone views my blog at a 6px, the layout is likely to look bad. But by examining with the minimum font size on my browser turned off, I will view the article at the smallest font anyone is likely to use. Because this particular sort of “jumbled layout” occurs only when viewed at small I can be fairly certain it will look ok to almost everyone.

If you do the same, so you can feel confident your layout won’t break either!

Whoo hooo!

I wanted to figure out who to thank for this Stumble and investigated. I discovered:

• At 9:02 pm my time, Big Bucks Blogger got a hit from a link at Andy Beard; this hit resolved to Finland.
• At 9:35 pm Stumblers began to arrive.
• I checked the referrer; the page was stumbled by ArttuR who describes himself as a “a 26 year old guy from Helsinki, Finland”

Thanks Andy Beard! Thanks ArttuR! I also like to give belated thanks to Charlotte who helped me iron out the bugs. And, finally, thank you every reader who tried this, my very first plugin, when it was brand new!

I’ve been a fan of ProBlogger for years; I thought I loved his template. But today, I’m focused on seeing it the way a first time visitor sees it.

With that in mind, I show you this:

Do you see the problem?

I do. I’m on DSL. The page loads sufficiently slowly to permit me to click on my “preview” tool, pull down a menu, select “grab window”, move the little camera over the screen and click. In fact, I can stop and sip coffee as I do this.

That means that I see nothing but sidebars for quite some time.

Darren’s site is worth waiting for, so I do. I visited Darren’s site way back when I only blogged knitting. I wanted a few tips to make the adSense convert to clicks. His advice works for me.

Darren also intersperses his posts with some fun articles that fit his niche. He is generous about dropping links to a wide variety of other good blogs. He drops the links quickly– so I generally haven’t already seen the links at other blogs. I also never get the impression the link dropping is directed to “the chosen few”. This means that I generally find interesting blogs when I click links Darren drops.

Darren’s layout is consistent with his information oriented content and his content is great. But he might want to tweak his CSS style sheet!

I have to thank ChrisG for this exercise. I learned something today: Even a terrific popular blog in the world may have a flawed template!

From now on, I’ll remember to try to copy the good and fix the mistakes.

I clicked; the main page looked like this:

My first instinct was to find the content. It was right there in the center between the navigation and the ads. So far so good!

Next, I focused on the actual content. At the top, I saw an image of a messy assignment written by a student suffering from ADD. Below that was text relating a story I have heard at least twice a year since I was 7 years old.

This blog did not frighten me; it bored me. I thought: get to the point already!

Out of curiosity, I scrolled past 56 introductory words to discover the main point of this blog article. It’s this:

I decided to look at each blog and clicked the link to StevePavlina.com; it scared the heck out of me! Here’s how it looked:

 

Does that scare you?

Naturally, two other established bloggers wrote posts agreeing with Darren and Andy, leaving trackbacks on Darren’s post. Expecting to see examples of blog layouts that help visitors focus on content, I clicked the trackbacks.

Here’s what I found:

I bet your eyes are just riveted to the content in those two blog layouts!

You say you can’t see any content in those screen-shots? Neither can any first time visitor.

If you’d like to watch Andy’s video here it is:

Maybe Andy’s loofa needs to scrub more than the sidebars of some blogs.