The show, of course, was Jerry Springer.  But what was it about the brief flash of Jerry Springer I caught that made me stop?  What did Jerry Springer do right, and how can we take those lessons to our blogs?

Branding

The Jerry Springer Show is unmistakable.  You know within seconds, fractions of a second even, that you’re watching the Jerry Springer Show.  This is achieved through extremely clever branding, which oozes from every pore of the show.

The first thing you notice is the consistency in branding.  There’s a logo in the bottom corner of the screen.  This logo matches one found on the wall behind the guests, one to the side of the audience and the logo on Jerry’s cue cards.  It’s everywhere.  Including on the T-Shirts worn by some of the staff that appear on screen.

The take away from this is that you need to brand.  Brand your blog, and brand yourself.  Leave your visitors in no doubt as to where they are, or who’s content they are reading.

Audience Interaction

Unlike most other shows, Jerry has created the set such that only the guests appear on stage.  Jerry is always, or nearly always, walking in and around the audience.  This does two things.  Firstly, it sets the stall out for confrontation.  The secret to the show, the reason that everyone watched, is for conflict.  By placing people in an environment where they immediately feel challenged, you set them up for hostility.

Secondly, by ensconcing himself in the gallery, Jerry starts to build a rapport with the audience.  He can not only pick up on things they are saying, but can also influence them.  He’s no longer the unattainable presenter, he’s one of them.  You might also remember that audience members were given the opportunity to speak to the camera after the show, yet another way to make them feel part of the show.

So do you ensconce yourself in your audience?  Do you read, and respond to, every comments?  Do you read the blogs of those who visit your site?

Knowing where you Stand

The Jerry Springer show is one of the few TV shows where you truly know where you stand.  It’s a difficult feat to pull off, and in some ways they rely on the audience, both in the studio and at home, being aware of the show and its general themes.  They do, however, leave even new fans in no doubt of the show’s subject.  In the corner of the screen, next to the logo, is the title of that particular show.  Within a few seconds you can tell whether the current show is one you’ll be interested in.  You’ll know whether it’s worth investing any of your time.

To translate this into the world of blogging, you have to consider the two separate aspects at play.  Firstly, the Jerry Springer show  covers, broadly, the same subjects.  Family, conflict, love, dispute and surprises.  The themes are consistent, which enables a fan base to form, a fan base which buys into the general concept being sold.  For a blog, this means pick a subject and broadly stick to it. You need a consistent thread through your content to keep it cohesive, and to keep the same people coming back.

The other tip we can pick up would be to keep your audience informed.  Tell them the theme of your blog, and tell them the theme of the content they are currently reading.  This should extend beyond simply naming the page and giving it a heading.  It’s helpful to have a brief summary of the article available, contextual categorization (e.g. tags) and sub-headings.  Sub headings are a great way to improve the scan-ability and readability of a blog post.

Focus on Content

While the branding and showmanship can, at times, by verging on overt, the Jerry Springer Show rarely does anything other than put people on stage to air their dirty laundry, very publicly.  Jerry rarely gets involved, usually just prompting and provoking people.  He’s very much the facilitator.  It should be the same with your blog.  Content comes first, everything else, second.

Give Something Back

Who could forget Springer’s “Final Thought”.  In but a few sentences he sums up the show and puts all the wrongs right.  The guests have been in, Jerry has assessed their problems, and goes about solving them.  He’s not taking advantage of them, he’s helping them.

A good blogger should take a similar approach.  Be helpful, be friendly, be accessible and be kind.  If you find something out that’s helpful, let us all know!  If you post about a problem someone is having, suggest how they can fix it.  Give and offer help.  You’ll become a valued member of any community if you take that approach.

Now that I’ve proclaimed Jerry Springer to be a genius in the world of marketing, is there anything I’ve missed?  If so, let us know in the comments.

Jerry Springer photos by ben_sci and urthstripe.

In addition to the Template Tags, there are also some nice little extras.  One of which is the ability add custom headers to your theme.  This really comes into its own when you are considering releasing a theme out into the wider world.  It gives users of your theme a really simple way to add custom images to their header and crop them appropriately, all through a nice, usable, front end.  While this functionality has been around for a while, since at least version 2.1, it’s not terribly well documented.  So I’ve knocked up this quick guide to using custom headers in WordPress themes.  If you’ve got any questions or improvement, please drop them in the comments.

The Basics

The general approach to custom headers assumes that there’s a space in your template that contains a header.  And this space can be styled fairly specifically through css.  To show you what I mean by this, I’ve copied out a very simple theme page below.  This includes space for a header which can easily be styled through CSS thanks to the use of a div with the id of “header”.

<?php wp_head(); ?>
<html>
<head>
    <link rel="stylesheet" href="

<?php bloginfo('template_url'); ?>

/style.css" type="text/css" media="screen, projection" />
    <title>Blog Title</title>
</head>
<body>
    <div id="header">
        <h1><a href="#"><?php bloginfo('title'); ?></a></h1>
        <p id="desc"><?php bloginfo('description'); ?></p>
    </div><!--  End #header -->
   </body>
</html>

As you can see, the basics of a template file.  What the custom header will do is hijack the CSS that controls the heading.  Essentially it will do two things.  Firstly is can apply a background image to the div, and secondly it can control the color and visibility of the text that appears in the div.  These options will appear in a new “Header Image and Color” area in the WordPress admin in the Presentation (Design in version 2.5) area.

The Mechanics

As you can image, writing the code for uploading and cropping images isn’t straight forward.  Thankfully all the hard work is handled by the WordPress API.  All we have to do is make sure our theme supports it.  We’ve already covered the part of our theme that allows all the magic to happen, but how about the admin options?  How do we make those available?

As with other theme related options, the calls to the WordPress API happen in your functions.php file.  It’s all really simple.  First of all we define some default styles for our heading area.  Then we write two pieces of CSS.  One that styles the header in the blog, and one that styles the header in the admin interface.  This CSS has to be written such that it can be dropped straight into the HEAD area of your template, so make sure it’s wrapped in appropriate STYLE tags.

These style snippets need to be assigned to two separate functions.  The functions don’t need to so anything other than output the style snippets, but you can include PHP code within them, so feel free to go mad with as much convoluted logic as you see fit. A few things you must do, however, is to set the background-image to be “header_image()” and set the dimensions to be the same as your defaults.  You should also check to make sure you hide text if that option is chosen (display: none) and set the color to any chosen by the user.  You also need to be aware that while you can choose your classes and ids in the theme, you have to use the ids “headimg” and “desc” for the admin style. “headimg” is the surrounding div while “desc” is the id of a div that contains the site’s description.

These two functions are then called in the add_custom_image_header function, which is the key to accessing the custom header API.  If this all sounds a bit complicated, I’ve included a simple implementation below which should point you in the right direction.  I’ve commented it as much as possible.

 <?php
//  Set some default values
define('HEADER_TEXTCOLOR', 'fff'); //  Default text color
define('HEADER_IMAGE', '%s/default.jpg'); // %s is theme dir uri, set a default image
define('HEADER_IMAGE_WIDTH', 500); //  Default image width is actually the div's height
define('HEADER_IMAGE_HEIGHT', 150);  // Same for height

function header_style() {
    //  This function defines the style for the theme
    //  You can change these selectors to match your theme
?>
<style type="text/css">
#header{
    background: url(<?php header_image() ?>) no-repeat;
    height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
    width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
    padding:0 0 0 18px;
    font-family: Arial;
}
#header h1 {
    padding-top:50px;
    margin: 0;
}
<?php
//  Has the text been hidden?
//  If so, set display to equal none
if ( 'blank' == get_header_textcolor() ) { ?>
#header h1, #header #desc {
    display: none;
}
<?php } else {
    //  Otherwise, set the color to be the user selected one
    ?>
#header h1 a, #desc {
    color:#<?php header_textcolor() ?>;
}
<?php } ?>
</style>
<?php
}
function admin_header_style() {
    //  This function styles the admin page
?>
<style type="text/css">
#headimg{
    background: url(<?php header_image() ?>) no-repeat;
    height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
    width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
      padding:0 0 0 18px;
    font-family: arial;
}
#headimg h1{
    padding-top:50px;
    margin: 0;
}
#headimg h1 a, #desc{
    color:#<?php header_textcolor() ?>;
    text-decoration: none;
    border-bottom: none;
}
#desc {
    padding-top: 15px;
    margin-right: 30px;
}
<?php if ( 'blank' == get_header_textcolor() ) { ?>
#headimg h1, #headimg #desc {
    display: none;
}
#headimg h1 a, #headimg #desc {
    color:#<?php echo HEADER_TEXTCOLOR ?>;
}
<?php } ?>
</style>
<?php
}
/*  This is the key function call, it communicates with the API
    and adds the options to the admin menu.  You pass the names of your
    two styling functions, first the one that styles the theme, then
    the one that styles the admin page*/
add_custom_image_header('header_style', 'admin_header_style');
?>

Using It

Once you’ve done the hard work of setting it all up, actually using it to change the header is very, very, simple.  You effectively have four options.  You can hide the text, change the text colour, revert to the original settings or upload (and crop) a new background image.  If you change the color, you’re given a nice color picker to help you out.

The following is a worked example, using WordPress 2.5.  Pre 2.5 may look a bit different, but the functionality doesn’t differ.

Step 1

We start out, using the theme page posted above, we have the following header.

Step 2

We go into the admin interface, and get the following screen.

Step 3

We hide the text, and it’s immediately reflected in the admin interface.  Note that it won’t be reflected in the theme until it’s been saved.

Step 4

We upload a new image that is larger than the default size we set earlier.  WordPress knows this so it allows us to crop the image.

Step 5

The new (incredibly classy) header is shown in the admin area, and in the theme.

Summary

I hope you enjoyed this lengthy guide.  Let us know if you end up using it in a theme. I think it’s a must if you plan on openly releasing a theme to the public.

For more information on custom headers, see this post by Boren, one of the WordPress contributors.

So ignoring the complexities of blogging, the technical aspects which rarely have any bearing on the success or failure of a blog, what is the key to blogging?  Well, it’s quite simple really.  just follow these Three Golden Rules of Blogging.

Be First

One of the easiest ways to make a name for yourself in the blogosphere, the place we call home, is by being the first to do something.  In the world of blogging, this can mean a number of different things.  It could mean you cover a breaking story first, or you do an expose that’s never been done before, expose a rumor or become of the source of news yourself.

One of the great advantages of being first is that you’re seen as being an authority on the subject.  If no one else could come up with this content until you came along, you must be an expert, right?  Right!?!  This will generate a lot of discussion on your site and discussion about your site elsewhere.  If it’s a major story, you may end up getting some links from major sources, such as Mashable, TechCrunch or a major publication, such as the New York Times.  These sites usually only link to the sources of stories, and rarely to the subsequent discussion that takes place.  Hence, these links are highly valuable.

Be Best

If someone else has beaten you to the hot news story of the day, and let’s face it, we can’t compete with fully resourced 24 hour blogs, hope is not all lost.  There are other ways to stand out from the crowd.  One such way is to be The Best.

Unfortunately, being The Best is hard to quantify.  Typically, being The Best involves providing the most benefit to your readers.  Or at least perceived benefit. For an example of a blog that does this better than most, take a look at shawnblanc.net.   His series of Mac Software reviews treaded ground that has been stomped on. Yet, by taking some extra time with the content, and giving a feeling, a perception, of completeness, his reviews became very popular.  They are well written, well researched and subsequently feel like the definitive reviews.

Another site that does completeness really well is one of my favorite sites of the moment, PSD Tuts, a PhotoShop Tutorials blog.  There are literally thousands of PhotoShop tutorials out there, but PSD Tuts just seem to do them a whole lot better than anyone else.  This is partly down to the feeling of completeness and comprehensiveness, but it’s also the style.  Looking at the end result of some of the tutorials, you really believe that the work has been completed by a PhotoShop artist at the top of their game. While a feeling of completeness is important for a review or tutorial, it may not be for other types of posts.  You need to look at your audience, experiment.  You need to figure out what sort of content style gives your audience the most perceived benefit.  You might be described that simply providing a few well sourced images, or quotes, in each post make all the difference.

Be Unique

The third rule, the third way to make your blog stand out from the rest, is to be unique.  If you’re not the fastest, and haven’t got the time to make your content the best, you’ve got to give people another reason to visit.  The Unique Selling Point.  This could be the content itself, the way you present the content or anything else a reader can latch on to.

A great example of two blogs that can coexist, very successfully, because of the slightly different approach they take to the same subject is Gizmodo and Engadget.  Engadget seem to have the completeness and timing down.  It would very difficult, if not impossible, to match them on these criteria.  Gizmodo, that also covers technology news, has managed to carve out a nice niche for itself by covering more off-the-wall stories.  Less news, more points of interest.  The sort of content that tends to get picked up by the social networks.  For example, Engadget currently has Intel Plans Quad “Core Notebook Processors” as its lead story while Gizmodo has “Global Drunk Dialing Competition Starts Tonight”.  The two styles aren’t mutually exclusive, and it would be unfair, and inaccurate, to say that Gizmodo doesn’t cover news and Engadget doesn’t do fun, they do.  But on balance, you’ll find there is a distinct style to each blog.

The more observant amongst you will no doubt be thinking to yourself, “this is a blog, published as a magazine”, and you’d be right.  That is the Unique Selling Point of this blog.  The hope is that because of the batch release of articles, we can spend some more time writing, editing and proofing them.  Possibly moving us closer to being The Best.  However, it’s also obvious that by taking this approach we sacrifice speed.

Putting It Into Practice

It’s all very well saying you need to be the fastest, or the best, it’s pretty much just stating the obvious.  In reality you need to discover what works well for the area you are involved in.  If you cover news, for example, then speed becomes important.  This is also true for commentary, but not as important.  If you’re writing a guide on how to do something, being the first to do so can be important, but being the best, the most complete, is far more important for the longevity of the piece.  In reality, you have to find the sweet spot for you, and your niche.

So…

Because we take the time to mature our posts, much like a fine wine, they taste all the better.  Of course, we don’t condone actually eating our content.

In the coming issues, we’ll try and get some famous, and no so famous, bloggers to contribute.  If you want to be part of the action, drop us a line.

What’s on the Menu?

The main focus of this blog is blogging.  Yes, it’s a blog about blogging.  How very meta.  Broadly, you can expect us to cover: -

• Creating content for your blog,
• Promoting your blog,
• Growing your blog,
• Designing your blog,
• The blogging community (a.k.a The Blogosphere),
• As well as some posts on creating and publishing blogs for beginners and some technical  magic.

If that sounds like the sort of content you like, then subscribe to our feed and wait patiently for the next issue.

The Airy-Fairy Approach

I’m no psychologist, so your mileage may vary with the following tips.  I do however feel that on many occasions writer’s block is brought about by the author.  It’s not something that just happens.  It’s something we cause.  As wise people seem to be sold on the whole “prevention is better than cure” approach, I thought I’d share some preventative medicine with you.

• Write when you’re feeling inspired,
• If you start to force it, stop,
• Vary your writing,
• Limit the pressure,
• Take breaks.

All pretty straightforward stuff, really.  I find the third tip works particularly well.  If I’m writing a blog post and start to feel myself lagging, switching to another topic, blog or project often helps me boost my energy and enthusiasm just enough.  I also find that to feel truly comfortable writing, I have to be free of deadlines and external pressures.  In many ways this enables the other tips to be followed.

Of course, it’s not always possible to follow the tips above.  This may lead to fatigue which I believe is a big factor in the onset of writer’s block.  So once it’s on you, what can you do to get rid of it?  A good place to start may be the list above.  Try taking a break, or switching to a different type of writing for a second.  It doe work.

If that doesn’t work (you’re clearly not doing it right), there are some other options.  Essentially, to overcome writers block you need to do one of two things.  Either do something to regain your energy and enthusiasm or get some inspiration from somewhere.  The way you choose to do either is very personal, and you’ll need to figure out what works for you.  But of you keep those goals in your mind, you can’t go far wrong.  If you’re really stuck, try going for a walk, or reading the work of your competitors/peers, or free writing.  I’ve found that people watching works well.  Head down to your local mall, coffee shop or park and watch people going about their daily lives.  You’re bound to pick up on some personality trait or action that will jolt you back into life.

The Scientific Approach

The first half of this article is sort of reliant on you having a starting point.  It’s all about you getting back into the swing of things.   But what happens if you don’t have a starting point?  If you’re completely out of ideas?  If that’s the case, it’s worth taking a scientific approach.  There are plenty of resources available to you as a blogger that can be used for content ideas.  Let’s take a look at some of them:

• Your readers - Either just come straight out and ask them what they want you to write about, or thoroughly check your comments for common questions or topics.
• Your competitors - The last thing you want to do is steal ideas from your competitors.  But you can take a smarter approach that will benefit you even more in the long run.  If they make the information available, have a look at the broad topics their most popular posts cover (to find out what’s working for them, look for a “Popular Posts” section).  Try to target these areas as they have been proven to work.  You can also go through the recent content and pick out any holes, anything they’ve missed out.  Try and build upon others work.  Stand on the shoulders of giants, as it were.  The comments can also be a rich source of information, treat them the same way you would treat your own comments, mine them for information.
• Your statistics - Many bloggers are signed up to complicated and comprehensive statistics/analytics packages but don’t really utilize them.  While knowing how well you’re currently doing is important, you can also use these statistics to grow your blog.  You should be looking for two things.  Firstly, search queries.  If people are getting to your site through search queries that don’t quite match the content they end up reaching, pounce on it.  For example, you may write a post about walking and end up getting visitors who were searching for “dog walking”.  That should be your cue to write a post about dog walking.  Secondly, you should be keeping an eye on your referrers.  Every time you get a new referrer, go through the steps outlined in the competitors section above.

Hopefully you’re now prepared for the two types of problems that may strike you when your blogging.  Have you got any tips?  What works for you?  Let us know in the comments.

But with this great ability to be creative also comes pitfalls and dangers.  While creating interest in your blog is good, and a way of pulling in new visitors, creating a blog that misses the aspects visitors expect is a particularly effective way to lose them.

This series covers some fundamental aspects of blog design that really are crucial.  And the first subject is…

Readability

A while back I launched a redesign of one of my blogs.  I boldly went for a white text on black background scheme and promptly received numerous complaints from regular and new visitors alike.  Clearly there was a problem, and it was a big one.

The main complaint was that the blog was now difficult to read.  An unforgivable sin for any blog.  I remedied the situation as quickly as possible.  In my attempt to stand out from the crowd, I’d alienated a large section of my audience.

Readability is a fairly simple thing to get right.  To demonstrate the difference between good readability and bad readability, I’ve written the same piece of text twice below applying different principals to each.

There are a number of things at play here, so let’s go through them.

Alignment

While not immediately obvious in the above example due to the relatively small amount of text, the alignment is different for the two paragraphs of text.  The one on the left is “Left Aligned’ while the one on the right is “Justified”.

The main difference is that a Justified block of text has different sized spaces between the words.  This breaks the natural flow of the text and makes it more difficult to read.  The flip side of this is that Justified text typically looks nicer, it also gives the impression of more structured, complete piece of work.  Hence it tends to be used in print media, despite studies indicating that Justified text is harder to read.

Kerning

Kerning itself is an art-form.  Kerning is the spacing between letters, and can have a great impact on readability.  The difficulty comes from ensuring the letters are close enough together for readers to follow the general shape of the word, but not too close so that letters merge into one.  A problem that’s recently been called Keming.

To understand the importance of kerning on readability you have to understand that in order to read quickly, the vast majority of people skim across passages of text.  Using mostly the first and last letters in conjunction with its general shape to “read” it.  Very rarely does every letter in a word get read.  Therefore it is important that words look like words.  Their length and the positioning of letters within them is very important.

In the example above, the kerning is normal on the left hand side but very compressed on the right.  In my opinion, it is this alone that makes the biggest difference to readability.

Line Spacing / Line Height

I remember, back in the day, being ordered to use double line spacing when writing my final year dissertation.  The reason?  Readability.  When you’ve got to read through a 300+ page document, the little things really make a big difference.  I didn’t really understand just how big a difference line spacing made to readability until I printed out the document and proof read it.

For most web pages and blogs, double line spacing is excessive and can actually hurt readability.  I’d certainly recommend going for between 120 and 150& line spacing for optimum screen readability.

Color Scheme

While things such as color schemes always ultimately come down to personal taste and preferences, it’s generally harder to read white text on a black background than the other way round.  I believe this is nicely demonstrated by the example above.

As a general rule, you want high contrast text but not necessarily very high contrast.  Black on white tends to be popular, for obvious reasons, a dark grey on white works just as well whilst providing a nice aesthetic.  What you do need to be wary of, however, is text that is in too low contrast to the background as well as text across a busy or distracting background.

Other Considerations

There are other elements that impact on readability that I haven’t covered in the example but are just as important.

• Font / Typeface - Again something that comes down to personal taste but there are a few guidelines to follow.  Typically sans-serif fonts work best on screen, serif fonts when printing.  Use a font that contains what you would describe as “typical” lettering.  You also need to ensure the font you’ve chosen works at the size you intend to use it.  The biggest hurdle here is where you are using a particularly small size.  In these cases, something like Silkscreen is a pretty safe bet.   Suffice to say you should go for popular fonts that the majority of your users are likely to have installed and ensure you have adequate fall backs.
• Breaks and Sections - As with all good writing, make sure your text is broken up into paragraphs and sections wherever possible.  There’s nothing more daunting as a reader than a massive section of unbroken text.
• Text Size - Following on from the point about fonts, the size of text is very important.  Too big and it can become un-manageable for the reader, too small and it can become difficult to distinguish words and letters.
• Width - Not often spoken about, but the width of text should be kept to something around 80 characters.  Less if you are aiming your content at a less literate audience.

Hopefully you’ve now got an understanding of what affects readability on the web, specifically on blogs.  is there anything you’d add to this list?