In the first part of this series I touched upon branding your Home Page. Everyone has a brand-image; the thing is that by not having a clearly-branded blog, you may be saying one or more of a number of things: -

1. I haven’t got a clue how to brand my blog, neither have I the technical expertise/the time/the inclination to do so.
2. I wish to remain more or less anonymous to a large extent for whatever reason.
3. I didn’t even know I needed to brand my blog: What is ‘branding’ anyway?
4. To tell you the truth I can’t be arsed with it.

- But even if the case really is that you can’t be arsed with it; read on anyway, and you might discover a reason to be ‘arsed’ with it.

Whether your blog is a commercial blog or a personal, non-profit, blog; it’s always a good idea to brand it: Doing so personalises it, makes it stand out as unique and individual. Remember; you’re not only conveying notions, ideas, facts, fantasies, or whatever, with your blog – you’re also conveying a personal self-image too. You’re conveying this by means of the overall design of your blog, in addition to its content.

Whilst it’s true that automation is beginning to gain a greater and larger foothold in blog-creation within particularly with regard to the business-sector, therefore removing much of the personal element of blog-design and creation, it still is, and probably always will be for the most part – in the main – that personal element; the relationship between the blog’s owner and their readers, that determines whether a blog is a hit or a miss.

We’re not a big business!

Last night I was watching a marketer promote their business-model, selling on franchises of their own business – which had a pretty hot sales-funnel with a powerful lure, sustainable front-end and back-end tiered-structure, and a number of company-prebuilt websites, optimised for maximum-conversion. I loved the business-structure, and it looked as if it was almost too-good-to-be-true, even though I was convinced that this reputable marketer was genuine. Something was nagging at the back of my mind; telling me to hold on and not invest, at least not yet.

I was getting tired, having just watched a long presentation, and at the time I couldn’t put my finger on to exactly what was causing those alarm-bells to go off at the back of my mind. Having considered the matter further at this point in time I now realise why I didn’t invest. – The reason was a lack of personalisation on a faceless, pre-manufactured, website, or number of websites. Whilst there was the fact that the site’s stet template had a huge + in the sense that it was optimised for maximum conversion and referral, in addition to a fantastic style of affiliate-management, there was also, to my mind, a huge negative too: Customers would be interacting with various artificial-intelligences and automated systems, buying from a carbon-copy website which had no human-interaction whatsoever until a certain distance into the sales-funnel.

I’m not saying that such a business model won’t work: Clearly it does work on a fairly large to massive scale; but it’s not the way that I do business. I’m a powerful persona, an individual, and I realise that my readers too are individuals: Each is an important part of my blog; because they are my traffic, the blood running through the veins of the internet. If I were a massive business with a huge investment in an automated online-business-model then sure; I reckon that kind of interaction would result in a profit. – But I’m not a massive and hugely rich corporate business, or franchise thereof, with large investments in automated internet infrastructure – and I really can’t envision myself being such. – I assume that probably most if not all of you readers reading this article are in a similar situation; that being an individual with a fairly standard amount of income and capital who makes their personal internet-presence known in their own unique method and style, in part by means of their blog. – Therefore it’s your personal branding that wins the day, that says “This is my blog and I’m doing so-and-so with it.” If anything grows from that and whatever business-model or personal-representation you’re using catches on and becomes some kind of viral-internet-sensation then fair play to you and so much the better: ‘Good work. – It’s your personal branding that makes it yours; a part of you. ‘An expression of yourself that people, other individuals; your traffic can relate to on a personal level. It’s how relationships; business, personal, or otherwise, are formed. It assists in establishing and furthering a personal internet-presence: In becoming known, liked, and,in making friends and contacts that could assist you in furthering your intentions and aspirations.

Let’s get practical – after more theory

Remember in a previous article somewhere I was talking about eye-line? No I’m not doing a make-up tutorial; I mean where the readers eye wanders to when they see your Home Page: Their eyes start in the top-left-corner, and move, initially, diagonally right; more sideways than downwards. At this point they’re looking for a reason to stay on this page, to read this blog. They want to know: -

1. What is the name of this blog?
2. What is this blog about?
3. Is the material covered worth reading?
4. Who’s blog is it?

Primarily they’re looking for #1 & 2. If they can see an answer to that then they see if they can answer #4: While they’re doing all that they’re making up their minds on #3. They’re taking into account a large number of factors and making decisions from what they see: Some of these decisions stem from subconscious questions like: -

1. Colour-scheme relevant to niche-market/subject-matter?
2. Design appealing?
3. Proper correct spelling?
4. Where do I look next?

Eye-path 

#4 in the list above is particularly important: The reader is going to see the first thing that their eyes rest on as they wander from the top-left-hand corner. The first thing they see should be your branding; and your branding should answer the questions in the purple list above. When they’ve seen your branding their eyes look downwards for the nearest item, either text or illustration or whatever. They expect to find this easily and for their eyes to drift naturally onto it. If they can’t find anything easily and they have to look to see where to go, it makes it hard to read the blog, causes eye-strain, makes them have to think. – Why should they have to do that? There are hundreds of other blogs out there where they don’t have to do that… And they go to those other blogs and leave yours.

The moral of the above: Always consider eye-path when designing a page’s or a template’s layout. This applies to your branding too.

Image isn’t everything

What is the main way to brand your blog? A logo will do it. There are various ways of deploying a logo on your blog; the hardest being using an iFrame and manipulating the css. We won’t be going there though; an image will suffice. Preferably we want a .png image, because png images have the best size in kilobytes to resolution ratio. Whilst bitmaps are great resolution and are OK to use for some of the smaller images, they do add a lot of kilobytes to the download, and if a reader gets fed up waiting for a page to download then they most likely won’t be back for a while.

What image do I use?

That’s entirely up to you: preferably something in tune with both your blog’s theme and niche/subject matter. You might like to design your own image. I’ll leave you to work out how to do that. You might try something from this list.

Where do I put a logo on my blog?

The obvious place is right at the top of the page, which translates as at or as near to the start of the header file as possible. In some cases you might even try the top-left corner. The question is: How do you get it onto your blog with regard to coding?

In the case of a lot of modern themes there is a way of doing it without having to do any coding: for instance, I’ve hacked up the TwentyTen theme in the case of this blog, but I’ve left all the necessary existing php-coding in the theme’s header file to allow for a choice of header image via the blog’s WordPress dashboard; therefore I can change this image via that method.

Just for the record; let’s have a look at a portion of the current header file, header.php, in use for this blog at time of writing. I’ve left out some of it in order to concentrate on the relevant parts only: -

————————————

    wp_head();
?>
</head>

       ^  The closing head tag

    <div id=”header”>   This is the first div tag which aligns the header up in accordance with the css.
<body <?php body_class(); ?>>    Here is the opening body tag followed by some php.
<div id=”wrapper” class=”hfeed”>      Second div tag.
        <div id=”masthead”>           Third div tag.
<img src=”http://kkomp.com/stkg.jpg”>    This image is going to be ‘activated’ over the Holidays… ‘Long story…
            <div id=”branding” role=”banner”>     This tag indicates the start of the area in which you can place various components associated with branding your blog.
                <?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1′ : ‘div’; ?>
                    </span>
<h1><font style=”background-color: #809ec2″ color=”#ffffff”>Kkomp.com – Beyond: Hardware, Software, Practical Electronics, Blogging.</font></h1>         < ^ This is ‘invisible’ text (same colour as background) used for SEO purposes.
<font style=”background-color: #808e92″ color=”#bce0f8″>*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*</font>

<img src=http://kkomp.com/hwre.png width=”940″ height=”40″>

                   ^   Highlighted text used as graphics followed by the first image. Note the line of HTML used to display an image

 *               </<?php echo $heading_tag; ?>>
                <?php
                    // Check if this is a post or page, if it has a thumbnail, and if it’s a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
                    else : ?>

                        <img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”" />

                    <?php endif; ?>

  *                                ^ The above php loop adds the pre-set header image/logo as assigned in the WordPress UI.

<p align=”center”><img src=”http://kkomp.com/FyLgts.gif” width=”940″ height=”5″></p>

                                   ^ The above html adds the image of the animated lights below the logo.

            </div><!– #branding –>   This closing /div indicates the end of the branding-area.

————————————

The piece of php between the two red asterisks is a php loop which places the pre-assigned logo image in a particular place relevant to the css tags. If the php loop were not present then a simple line of HTML could be used in its place to call the header image/logo:        <p align=”center”><img src=http://kkomp.com/logo.png width=”940″ height=”120″></p>

* For whatever reason it wasn’t possible to transcribe the HTML exactly: In several places the URL following img src= has failed to appear inside quotation marks or parenthesis as it should have done: This was an unavoidable copy-error for which I apologise.

It’s not hard to get it right; just use a little mental agility, intuition, and common sense.

Coming up in due course in a later part of this series (With a bit of luck): A basic barebones set of templates which you can hack any way you like, and use for customising your Home Page. In the next part we’ll be talking about making and designing a custom-template exclusively for your Home Page. – Stay tuned, Stay geeky!