Love it or hate it, Twitter could have an important part to play in networking your business.

Despite being firmly in the glare of the media spotlight for the past 12 months it is easy to overlook the potential opportunity for networking and lead generation via Twitter, and as more and more of our client base at Scotch Egg ask us how to benefit their business through capitalising on its success we’ve decided to share our top 10 quick tips to help get you started…

1) Background Image

Personalising your background image is the most important visual element in getting you noticed. Using the default image looks lazy and lacks the strength of setting your own corporate identity. Twitter can be a great tool in bringing your business into the new decade and helping you stand out from the crowd so use it accordingly. Some people choose to add contact details to their background image; however I would prefer people to get this from the website I link to

2) Profile Picture and Bio

Picture

Get a good picture and you automatically stand out in a crowd of tweets. My personal preference is for characters or real photos as they offer an approachable edge to the most up to date and informal way of networking. If you are using a host of sexy marketing girls in your profile picture beware, to some this makes you look like a spam account on Twitter whereas the guy with the big nose or funny hair suits the Twitter vibe and more importantly looks real! Finally from a personal point of view try to avoid wearing sunglasses in your picture, it looks like you’re trying a little too hard to be “cool”.

Bio

The bio is really important; it is your time to shine by showing prospective clients exactly what you want them to see and ultimately, determines whether or not they will become your followers. Include what your business is about but try shaping it with a little character. It sets you apart from the competition and matches the casual tone of tweeting. It is important to contain the key words and the elements of your business that you would look for if you wanted to get a snapshot of another page yourself.

3) Follow, follow, follow!

This is the big one so you have to get it right! Follow the people in the field that you would like to respond to you. Other twitterers will be interested to see who recently followed them, so they will check you out. If your page and bio is right you will more than likely get a follow back! Google can help you find lists of people in many business markets and even towns. Google terms like “top 50 web designers on Twitter” and “Birmingham Twitter list” then view their page. If they are indeed interesting and not wearing sunglasses…follow them!

4) Where do you find people of interest?

If you work in web development yourself have you tried searching Google for ‘top web developers on Twitter’? Any search like this will more than likely return various blog sites with top lists of people to follow on Twitter. Check the comments section for other people requesting Twitter followers and while you’re there leave the name and link to your own Twitter page!

5) Search

Twitter has its very own search box which you can use to look for keywords mentioned in various tweets. If you’re looking for people in Birmingham for example, search “Birmingham”, if you are looking for people who go snowboarding search “snowboarding”! It sounds simple and it is. You can look back over days and weeks of results to follow people of interest.

6) Talk to people

Once you have your own loyal following waiting to hear from you, it’s time to get tweeting! Answer any questions they might have, share ideas and offer your own opinion on what they are talking about. If someone says something interesting then ‘re-tweet’ their message and give them credit using ‘RT @their name their message’. It’s an easy way of building rapport and strengthening relations in the market place.

7) Be polite

If someone gives you a mention, give them one back! Not only is this a great way to engage in conversation with potential clients, but it shows your efficiency in responding to a message and adds a personal touch. It speaks volumes if use Twitter to be friendly, not just to spam your own website or business and if someone has taken the time to ask you a question or comment on your tweet it is always nice to take the time to reply

8 ) Vary your tweets

Find a balance when you tweet. As important as it is to show your expertise and knowledge in your own area of business, it also helps to make it original, inspiring and interesting! Mix in a few opinions and fun details that help to build rapport and a real understanding of the type of person you would be in a working relationship.  Character building and trust is an important element of networking in both the real world and virtual.

9) Man vs. Machine

Not so much a tip but just a little something to think about! You may come across automatic twitter posting solutions like ‘twitterfeed’. These can be a great tool in linking your dynamic forum content and posts to Twitter with automation to save you time, but if all of your Twitter activity is “bot” like are you really worth following? The growth and popularity of Twitter is due to friendly, personal news and updates, so make sure you mix your automatic posts (great for getting content and searchable results to twitter) with a mix of  ‘hands on’ personal tweets to really engage your audience.

10) Help others!

If someone else said something interesting then Re Tweet it for them! Why not? Your followers want to see your posts with interesting content. Whether you wrote the original news story or tweet is irrelevant. Place ‘RT @theirname’ at the start of your tweet and then paste in the comment. Not only will they will love you for it but will most defiantly RT your comments back as ultimately spreading the word is what Twitter’s all about

IE6 Users

We hate it, we want to stop developing for it, but the sad truth is we can not blame all IE6 users for using it as its not always their fault they are still on IE6.
Only last week I was round my mothers and had to put my IT support hat on, like all web developers have to at some point. Looking at her laptop I discovered to my horror her company laptop was on IE6 with JS disabled, until this point I had always thought of these people as distant people that I would never meet, little did I know they were actually as close to me as my own mother!

Testing Testing 1-2-3

So first thing to do is to to get hold of IE6 to test your website on, there are various methods from butchery installs through to emulators. Personally I have always found these go wrong somewhere, or at worse appear to work but the truth is they are not 100% correct in their rendering. The best and only full proof method is to download Microsoft’s Virtual Machine and the latest IE6 XP Service pack 3 image. They release a version every few months that will then provide you a genuine testing platform for IE6, at the moment you can get it off this link .. VPC Image

Its relative

So you install Virtual Machine, get it up and go to your local machine IP (192.168.1.101 or something) and you see a list of directories of sites, in you go and it looks wrong? If there are no images or the CSS file has not been loaded then chances are your links are absolute ( http://localhost/somesite/css/style.css) . The thing is your not on localhost now are you, your on your virtual machine.So localhost means nothing to help your browser find the images or files with it included in the link. To fix this simply take it out, making all your links relative to the index, for example (css/style.css).

WordPress

WordPress loves absolute links, and of course the added issue is the theme directory css file is not really relative to the index file, its in http://localhost/somesite/wp-content/themes/sometheme/css/style.css, so linking to css/style.css or /css/style.css will fail. But the solution is to use a function WordPress gives you called ..

bloginfo('template_directory');

Which will get you http://localhost/somesite/wp-content/themes, but you do not want localhost when connecting from another machine.

What you can do is create another function or edit this one temporarily during testing to return relative links.
In general-template.php you will see a case statement, in here edit the current template_directory case or add your own with a new function added..

case 'template_directory':
		case 'template_url':
			$output = wp_make_link_relative(get_template_directory_uri());
			break;

The result will be a relative link which will then work on your VM for testing!

No excuses now for not testing your site on IE6

WordPress is a great Content Management and Blog solution for a web development platform when used correctly.

WordPress can give you a great code platform and foundation for a CMS and Blog functionality, but of course you can tweak WordPress to your own specific needs and add a few nice little features to your custom designed themes.

1) Add a submenu for your page.

If you would like a section on a page theme for a submenu generated from the back-end pages then the following code will build you an unordered list menu of sub pages..

<div id="submenu">
<ul>
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<?php echo $children; ?>
<?php } ?>
</ul>
</div>

2) Create page theme layouts.

If you want a significantly different layout for a specific page, then it may be worth using a different template rather than incorporating various condition statements and layouts into your page template. This is actually really easy to do, simple copy your default page template, rename it newname.php and at the top of the page before your header call place the following comments…

/* Template Name: newname
*/

3) Create custom headers.

If you need to have a different header design and layout then you can create and call a separate header file template. Simply copy your default header file to a file called (for example) header-newname.php,  now replace your call to the header file in the template page with …

 get_header("events");

4) Display category specific posts

When you need to display specific category posts somewhere on your site you can do that using the query_posts functions and passing conditions.

$cat_name = 'category_name';
$cat_name = str_replace(' ','-',$cat_name);
query_posts('category_name='.$cat_name."&showposts=1");
 while ( have_posts() ) : the_post()
...

Where show posts is of course the number of posts you wish to display.

5) Call Random Post

If you want to display a random post from a category then similar to above you use query posts, however you will also add orderby …

query_posts('category_name=testimonials&showposts=1&orderby=rand');

Now each time the page loads you will get a different post appear.

I hope these quick tips helped, if you have any questions please feel free to ask.

When creating a menu or header text the client may wish for a font or effect not possible using standard web approaches. This maybe a drop shadow, gradient, glow or simply a non standard web font. In most cases an image will look softer and in most peoples view better looking than standard browser generated text ( although I do have a soft spot for the natural simplicity of text!) . But lets say for arguments sake you have to look at replacing text with images.

Our HTML menu

So at the moment our HTML menu uses an unordered list to contain our menu items, h3 tags for importance and seo, and a link tag to make the text a link to the relevant page.

<ul>
<li><h3 id="contact_menu" ><a href="Contact" >Contact</a></h3></li>
</ul>

Hiding the Text

So the first thing we are going to do is use CSS to hide our text and use an image instead. This is done by setting the height of the link we will use to 0px, then adding the image we plan to use height in as padding instead. We will also set our a link to display block and hide any overflow.

h3.rollreplace a{
 padding: 40px 0px 0px 0px;
 background-repeat: no-repeat;
 height: 0px !important; /* for most browsers */
 height /**/:40px; /* for IE5.5's bad box model */
 display: block;
 overflow: hidden;
}

Search Engines

So at the moment we are using tags to keep search engines happy and to help show the correct importance of our text. If we are now going to replace this with

<h2/><img src="contact.png" alt="contact image" /></h2/>

we may think the alt tag will come to our rescue for SEO and screen readers. Well it will will for screen readers and it might a little for seo, but can we be sure? A trick used for many years is an approach developed to actually still use the text version but swap out the text using CSS for an image. The idea is everything is already there for SEO, but CSS will then render our image so it looks as we now desire for real people viewing the site and not Search Engine bots.

So our HTML and CSS now looks like this…

<ul>
<li><h3 id="contact_menu" class="rollreplace" ><a href="Contact" >Contact</a></h3></li>
</ul>

h3.rollreplace a{
 padding: 40px 0px 0px 0px;
 background-repeat: no-repeat;
 height: 0px !important; /* for most browsers */
 height /**/:40px; /* for IE5.5's bad box model */
 display: block;
 overflow: hidden;
}

h3#contact_menu a{
 background-image: url("contact.png");
 width:112px;
}

Swap image on hover.

So now when someone rolls over our image we want to swap it out for lets say another version of a different colour.

To do this we have already made the image a link, so we can use CSS a:hover.  Had we not used CSS for this we could of used Javascript, but try and use CSS where possible if you want to cater for those with JS disabled. Now we could use another image and replace it on hover, however a better more efficient practice is to use the same image as the original, but it contains both versions and we simply move the element of the image we require for the hover part.  So in our case our image was 40 pixels in height, so now its 80px in height for both images and we move it 40px down…

h3#contact a:hover{
 background-position: 0px -40px;
 width:112px;
}

The image looks like this…

This method is preferred over using a separate image as it reduces the need to load 2 images from the server and will remove any flickr or gap between loading the original and replacement image when a visitor hovers over the link.