Get it All

Search Engine Optimization gurus and tourists alike understand that the semantic markup of webpages is the single most important aspect of long-term, site-wide optimization of web pages. If the bot can’t read it; if the bot doesn’t understand its significance, then the bot won’t properly index it. And making sure that you use <h1, 2, 3, 4> tags to highlight important concepts in an article is a key to calling attention to your content.

So, why not go the extra mile and make sure your headings are as stand-out to your audience as they are to those bots you’re always trying to attract? This article is just a quick tip (or suggestion, if you like) for making your content a little more clear by letting your headings break outside the borders of your articles:

This is an example of breakout headings, standing off the left margin.

This is an example of breakout headings, standing off the left margin.

As you can see from this sample of one of my blogs, there are three levels of headings represented. The H1 tag is in the title, and as you can see, it is about forty pixels farther to the left than the rest of the text. The H2 and 3 tags are about thirty pixels from the left side. To the less experienced designer, this idea may at first seem wasteful: there’s a very large margin to the left of the main body of text that could be used up. To many, it may even seem like it has to be used up.

But often the most important thing about layout is not what you put on the page; rather, it is the space you leave alone. By leaving space to the left margin of the text, we open up the page and prevent it from looking “claustrophobic” and crowded. The same is achieved by keeping a solid distance between the headings and the text. Further, the text is fully justified to keep the left and right margins as consistent as possible. This adds predictability to the space which lessens eye strain and brain processing, making the text much more readable, overall.

And then of course, there is the indentation of the headings! By making our headings stand out from the rest of the text, we create sign posts for our audience. Once again, this is designed to affect to changes on our content: one is to allow readers to more easily find the content they’re looking for and understand the organization of our data; the second is to lessen eye strain associated with doing this sort of scanning process, which is quite common when reading on the web.

Getting Your Breakout Headings in WordPress:

There are lots of ways of going about getting this look in a WordPress template. One would be to make your <p> tags always have a margin of 40px. The problem with this is if you want to use paragraphs anywhere else but in the body of a post, you may not like the effect and be forced to write another CSS class to compensate. You create a .postbody p {} tag, but here again, if you need to make adjustments to your page, you’re going to run into problems. Plus, what do you do about the<blockquote><ul><ol> and <embed> tags? Separate entries for each?

The best way to apply a margin is to apply it universally to the container itself, hypothetically .postbody. If you do this, how do you get the indented headings?

The answer is to apply negative margins to the headings:
[code lang=”css”]
.postbody {
display: block;
margin-left: 40px;

.postbody h1 {
margin-left: -40px;

.postbody h2, .postbody h3, .postbody h4, .postbody h5 {
margin-left: -30px
Now you have your universal margin setup to be consistent across all elements of your posts, and only apply the breakout CSS to the things you want to break out!

Anyone who’s serious about blogging – regardless of what it is they blog about – has found themselves consumed in the business of analyzing traffic.  If not financial reasons or effective political messaging, mere vanity compels us to find out more about the people who visit our pages, especially since there are so many people who view blog after blog without commenting or contributing.

But between your web-host’s analytic software, log files, link popularity checks and a whole host of other sources, you’d think that getting to know your audience would be a lot less difficult than it’s proven to be.  Knowing how many hits you get a day is fine; knowing how many bots are indexing your stuff is great; knowing what the average Pages Per Visit is helps on some levels.  But what you really want to know is: when a person checks out my page, how are they seeing it?  Where do they come in, where do they leave, what do they see along the way?

Enter pMetrics by Performancing.  Finally, we have a metrics system that tells us not only about the raw, statistical data of our webpage, but finally offers some insight into the browsing patterns of our readers.  Other packages attempt to do so, but in the case of the most popular ones, the data is so packed in amongst the interface that it becomes sterile and meaningless.  One of the major advantages of pMetrics is that, despite being packed with hugely helpful information, the interface is clean, baby!  Nice and readable.

With pMetrics, you get to use their “spy” mode and actually see folks on your page in real time, following them around the site.  Rather than boiling down the user experience into PPV, you can click on the “Visitors” tab and check out individual user experiences, seeing where they came in, everything they clicked on while on your site, and where they bounced.  Additionally, you can see their referrer and if they’ve come in on a search, you get to see their search terms.

It’s hard to imagine how you can overstate the critical nature of this kind of information.  It’s equally hard to overstate the paucity of this information prior to the launch of pMetrics.  PPV, while important, reveals nothing about *why* people view the number of pages they do.  Viewing individual users’ experiences can help you better understand why some people come to your page and bounce while others stay for an hour.  Are those early bouncers going places where there’s no compelling links elsewhere?  Are they going to places where there are compelling links out of your website?  Did you make a kind of “honey pot” of content for some users but not others?

Then for perspective, you can go back and look at that all-encompassing image of your traffic in a whole new light.  pMetrics offers the standard views of top referrers, content, search terms and others for your viewing pleasure.  But this time when you look at raw data, you know a whole lot more about how that data got where it was and what you might need to do about improving your site’s stats.

All in all, I’m very glad to have this service in my arsenal of SEO tools.  Best of all, the service is brand new, so improvement is bound to happen.

To that end, let me point out a few areas of potential improvement:

For one, while it’s fantastic seeing all the individual user experiences, there’s no reason to leave out the “bot experience.”  Those of us using Site Maps would really like to know exactly how the bots are moving through our sites, and even if your aren’t using Site Maps, knowing where the bots are going and how they’re indexing may give you clues as to where the site needs to be improved for indexing.

Another suggestion would be to develop a kind of “heat map” technology that allows us to see our site color coded to display where the majority of people are clicking.  Where they click is where they look, and that’s probably where you want your most important content.  You can sort of get this from context in the “Visitors” section, but a more intuitive UI would be hugely helpful.

Technorati Tags: , , ,

Powered by ScribeFire.

UPDATE: About that whole “Customizable Dashboard,” thing, someone already beat me to it, but I seconded the motion as well.  Good!  I hope this idea gains some traction and we get what we want.  In the meanwhile, I’m about to go check out “Dasher,” a plugin I found that’s supposed to do the same thing.
The WP Development Blog has announced a couple of new features for the WordPress world, WordPress Ideas and WordPress Kvetch, both aimed at more directly responding to the needs of WordPressers of the world. One is to suggest things, and the other is to complain about things, so I guess it’s kind of a question which you need to do more that determines where you post, eh?

Development Blog › Ideas and Kvetch!

If you could add anything in the world to WordPress, what would it be? If you could name the thing that frustrates you the most about WP, what would that be? Now you can tell us. We’re announcing new projects—two sides of the same coin.

Well, as soon as I get done posting this update, I’m going to put my two cents in at both places. Time to plead for a more liberal, less rigid Dashboard, for one.

Technorati Tags:

powered by performancing firefox turns in a great roundup of tips on keeping readers and making a blog usable. The basics? Keep it readable:

Six Improvements to Your Blog –

Format Your Text- Take the extra time to write “pretty” posts, such as it were. Make it so that people can read what you’re typing, and do your best to keep the tone communicative, and not too dense. Translation: big fat paragraphs of dense text usually don’t make for “friendly” blog reading. (Look at David Byrne’s journal. Great stuff, but soooooooo long.) And get friendly with things like bulleted lists, shorter and longer paragraphs, use of bold, etc. But not too much. It’s a condiment.

The author of this post is spot-on in this article. Even if you think you’ve got it down, it never hurts to read the above article. You might find something you hadn’t considered. I like that he points out the need for short paragraphs, for example. Generally, large paragraphs that are well-written can easily be divided up a bit, since one thought should naturally lead to the next, anyway. But smart people tend to forget that their readers need logical breaks in the stream of consciousness, especially people used to writing in intellectual or academic circles.

On this level and so many more bulleted out for you in the above-linked post, some of the big blogs out there do more harm than good. Take the Daily Kos as one example. How many different ways to they violate LifeHack’s relatively simple rules of readability? Counting can make your head spin. In fact, I never go to Daily Koz ~ and I don’t care how much it affects my political blog not to be involved here ~ because the whole freakin’ page makes my eyes bug out of my head.

And because pages like this are so hard to read, other bloggers of like mind often emulate the unreadability and assume that this makes them hip. Some blogs made it big early and thus continue despite their readability shortcomings, others bull-dog their popularity with active and persistent SEO tactics, but for the rest of us, making the page readable is quite possibly the most essential component of achieving popularity.

So in the interest of furthering the usability discussion, allow me to add a few bullet points of my own using Kos as a “do not” example:

  1. Lines draw the eye, use them wisely: (I could write a whole blog on this, and maybe I just might) When creating borders around elements, be aware that the simple introduction of a solid line naturally draws the eye to follow where it leads. If you look at DailyKos, you can count at least twenty lines making up just the top three inches of the page. Moreover, they’re high-contrast lines separating orange and white and some of them are at 45 degree angles, besides. Holy crap! Keep borders to a minimum, and where you use them, try to see where they lead the user’s attention. It might lead them to move on.
  2. Sidebars are content, too!: When I read web pages, I like to be able to glance at the sidebars and see if there’s anything worth checking out elsewhere. So do other people, and that’s what sidebars are there for: to entice users towards increased Page-Per-Visit (PPV) or ad revenue. But in order to achieve this, the sidebar should flow naturally from the main content. When you look at DKos, it is impossible to see how the two right columns relate to the left. In fact, it almost looks as if you’re looking at three different web pages in frames. In Kos’s case, I would largely blame the use of ad content in the centre column for this “Islands in the Stream,” effect.
  3. Contrast is powerful stuff: I alluded to this in bullet #1, but I’ll state it explicitly here. Contrast is a powerful tool of usability, and thus you need to use it carefully. Kos looks like a creamsicle might in the midst of a bad acid trip. Once again, holy crap! They’re beating you over the head with the white and orange. Far better would be to use related or complimentary colors that blend into a whole while adding a small bit of contrast for the sake of drawing the eye and adding visual flavour.

That’s about all I’ve got at the moment. The big thing is to leave your page alone, walk away and have a beer, then go back and take another look. Or ask your friends to look, you’re probably always bugging them to, anyway. Get a fresh perspective on what you’ve got and think in terms of what you would think as a stranger to the website.

On a side-note, while I can’t prove it conclusively, I have a hunch that too much visual separation is probably not too good for SEO, either. Google has put a lot of effort forth in recent years to increase it’s search bots’ sensitivity to “readability” rules. That makes sense because things that aren’t readable on a webpage are more likely to be “Black-Hat” SEO tactics, and anyway, they’re not going to be terribly useful to the reader.

I also suspect, on this readability level, that keeping paragraphs short and focused is probably also good for SEO. That’s because a short, focused article is going to have a high density of related words that Google will see as an important article, but it is unlikely to have the same word repeated too many times, which will trip Google’s BS monitor.

Technorati Tags: , , ,

powered by performancing firefox