Which results do searchers click?

Search engines display two types of results, organic results, the ones on the left, which a search engine displays based on how relevant they are. The other is Pay Per Click (PPC) results, displayed on the right, which companies pay for. Learn more about Pay Per Click

Which results are clicked the most though?

72.3% of Google searchers click the organic results (ones on the left), and 27.7% click the Pay per Click results (ones on the right). For all search engines i.e. MSN & Yahoo, 60.5% click organic results and 39.5% click Pay Per Click.

What does this mean to you?

This means you will get more traffic to you site if you rank highly in organic search results. Learn how to get to the top of Google

A design no no

Design is a funny thing, everybody has their own opinion on what is good or bad design, apart from when it comes to one font, Comic sans! Comic sans looks like this...



Everybody knows it's a bad font to use and is defiantly a big design no no because it looks so rubbish. Many people use it because they think it looks good, but they are wrong, very wrong. Comic sans is known as such a bad font it even has it own website calling for it to banned!

Bancomicsans.com

More Design no no's

Using comic sans is one thing, but some websites manage to combine a whole host of bad web design, as highlighted by
yourwebsiteisrubbish.com. These are some of the worst web sites on the Internet, you'll laugh you'll cry, but what ever you do make sure your site doesn't use any of the design techniques they have!

Are you in the Yahoo?

Yahoo is the second most popular search engine on the planet (search engine popularity), if Yahoo doesn't know your website exists it can't send visitors to it who are looking you.

To check if Yahoo has indexed (found) your site type the following into the Yahoo search bar...

site:www.yourwebsite.co.uk

Obviously replacing www.yourwebsite.co.uk with the address of your site. Just remember to keep the : and no spaces.

This will show you all the web pages from your site that Yahoo knows about.

Getting to the top of search engines

Getting into Yahoo

If Yahoo hasn't found your website yet all you need to do is get a link from a web page that Yahoo does know about. Yahoo finds new web sites by following links from web pages it knows about.

The best way to get a link is to search in Yahoo for a website related to yours, that way you can be sure Yahoo knows about the page, then email them and ask them very kindly to link to your website.

Once you have a link it will take about a week or so for your website to appear in Yahoo’s search results for site:www.yourwebsite.co.uk.

Getting to the top of search engines

Problem with HTML tables?

HTML Tables can be frustrating, they require a lot of HTML[Define] to make and if you don`t close a <tr> or a <td> your whole page layout can fall apart.

An easy way to identify the problem is by displaying the borders of the table, this often highlights the cause of the HTML table problem. To do this add the following code to the opening <table> tag...

border="1"

Other ways to solve HTML table problems

If the above technique doesn`t help, make sure you have closed all <tr> and <tr> and they are ordered correctly. Now this might seem obvious but it is the number one reason for HTML table problems. This also can be quite a task if you have a large HTML page, so this is probably a good time to format it so you can read it easily, like this...

<table>
<tr>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
</tr>
<tr>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
</tr>
</table>

Formatting your HTML like this will allow you to spot problems in your table code because you can see where new table rows start and finish without actually having to read the code.

The reason HTML tables can be problematic is they are often used to produce a web page layout, when they were actually designed to display rows of data, for example a table of sports results. The most effective way to make a web page layout is using CSS[Define].

Learn more about CSS.

Does Google know about your website?

Just because your website is on the Internet doesn't mean Google knows about it. If Google doesn't know your website exists, nobody can find it using their search. If you don't know the address of a website what do you do? Search for it, if a search engine doesn't know about your site it can't direct visitors to it.

Check if your website has been found by Google, go to Google and type the following into the search bar...

site:www.yourwebsite.co.uk

Replace www.yourwebsite.co.uk with the address of your website, remembering to keep the : with no spaces.

If Google has found your website it will return a list of web pages it has found from it. If no results are returned Google hasn't found your site.

How to get into Google

If Google hasn't found your site there are two ways to get it found. The 1st and slowest way is submit your website to Google directly via this form. This way can take up to several months to get you included in Google.

The second and quickest way is to get a link from another website that has already been found by Google. Google checks all the pages it knows about regularly for new links, when it finds one it follows it and finds new sites. Depending on how often the site linking to you gets checked by Google your site will start showing up in a week or two.

Get to the top of Google

Who links to your website?

Ever asked the question "Who is linking to my website?" Well you can find out using a search engine. Type...

link:www.yourwebsite.co.uk

into a search engine, replacing www.yourwebsite.co.uk with the address of your website.

This will show you all the sites that link to yours. This works in all the major search engines including Google Yahoo and MSN, we would recommend using Yahoo as this returns the most accurate results. Google tends to only show a selection of links and MSN often repeats the same links.

Does the number of links effect my website?

Yes, the more links to your website the better you will rank in search engines. Learn more about search engine rankings.

User Generated content

User generated content is allowing visitors to add information to your website, for example their thoughts on an article, or images they have taken. Another example of user generated content is a forum, where visitors can post questions and others can answer them.

User generated content expands the size of your website without you having to produce content, the disadvantage is somebody has to moderate it, as it is open to abuse, for example offensive language or spammers put links to their website’s to increase their search engine ranking. Learn more about search engine rankings.

Adding user generated content to your website

The easiest and simplest way to add user generated content to your website is by asking people to send it to you, like their views or pictures, and supply an email address, (How to add an email link), for them to send it to. When you receive content add it manually, if you start getting enough responses you can look at other ways of automating this. However there is no point in spending hours adding complex code to your site that may never get used. First find out if people will send you content, and then take it from there.

Learn Good Web Design

When designing your first web site don’t try reinventing the wheel, keep it simple and learn by example from other websites. Look at websites you like and have found useful, work out what makes it so good, what type of navigation does the site use? What colour schemes and fonts have they used?

When ever you come across a good website add it to your favourites so you can come back to it, after a while you will have quite a few examples you can learn from.

As you learn web design from other sites you’ll begin to find out what works and what doesn’t, once you are at this stage you can start experimenting with your own ideas.

However don’t let bad web design happen to you like it has happened to these rubbish websites.

The golden rule for designing websites is, keep it simple. Stand back from your final design and look at each element on the page and ask yourself, do I need that? If you don’t, remove it. This is a hard thing to-do but produces a better looking website that is easier to use.

Please your visitors

People come to your website looking for something, make it easy for them to find it. The best way to do this is by adding a search feature to your website, and who are the masters of search? Google.

You can add a Google search box that will only search content within your website. It looks like this (Go on try it)

Site Search

This site only

Search results by Google

To add this to your site you need to copy and paste the below HTML [Define] into your web pages. How to add HTML to your website

<form method="get" action="http://www.google.com/search">

<div style="border:1px solid black;padding:6px; width: 200px;">

<strong>Site Search</strong><br />
<input type="text" name="q" size="25"
maxlength="255" value="" /><br />
<input type="checkbox" name="sitesearch"
value="giantmouseblog.blogspot.com" checked />This site only
<input type="submit" value="Search" /><br />
<font size="2">Search results by Google</font>
</div>

</form>

Easy modification to work on your website

You will need to change "giantmouseblog.blogspot.com" to "yourwebsiteaddress.com", remember not to include the www. part, otherwise it will search this website instead of yours!

Now you will have pleased visitors who can find information they are looking for, and are more likely to return.

More web design tips

Beginners guide to web hosting

Web hosting can be a minefield even if you are technically inclined. There are so many different types of web hosting packages and companies out there, that it is almost impossible to know which one to choose.

To shed a little light on the subject read this article Web hosting guide for beginners.

Once you have understood the basics of web hosting you will be in a much better position to choose the right web host for your website. A good place to start is Tophost.com

Adding html code to a website

Every page on the Internet is made up of HTML [Define], therefore to make or modify a web page you need to know how to edit HTML, which is very easy to-do. HTML can be edited by "hand", which means using a basic text program like Notepad to edit the HTML code, or you can use a WYSIWYG (What You See Is What You Get) like Dreamweaver or FrontPage, which allows you to edit the web page how it is seen on the Internet.

WYSIWYG make it easier for beginners to make and modify web pages but "hand" coding gives you greater control over how the web page looks. If you are serious about web design you need to learn how to hand code.

Learn how to add HTML to a website

Redirect with a time delay

Sometimes you will need to take your visitors to a different web page automatically, there can be many reasons for this, you may have moved the original web pages or you wish to take visitors to a special offers page after they complete the checkout process.

To redirect a user automatically place the below code in the head section of your web page (in-between the <head> & </head> tags [Define])

<meta HTTP-EQUIV='REFRESH' content='10; url=http://www.giantmouse.co.uk'>

Change the web address in the code to the web page you wish to redirect your visitors to. You can also change the time delay between the page loading and it redirecting by altering 10 to the number of seconds you wish to wait before redirecting.

We strongly recommend informing your visitors they will be redirected after a period of time, otherwise they may feel they aren’t in control of the web pages they are viewing, and as a result may not visit your website again.

More web design advice

What are html tags?

Tags makeup the HTML code [Define] that every web page on the Internet is made of. Tags define how a web page should look and what information it contains.

A tag looks like this <p>, every tag starts with < and ends with a >. The p tag we have just described is the tag to display a paragraph of text, so lets put some text in.

<p>Here is a paragraph of text that is displayed on a web page. You can put as much text in here as you like.

You also need to close every tag, which is easily done by putting this </p>, notice it is exactly the same as the open tag but with a / before the p. So a complete HTML tag looks like this.

<p>Here is a paragraph of text that is displayed on a web page. You can put as much text in here as you like. </p>

Learn more about HTML tags

Web design font families

Font families are collections of fonts that define how the text is displayed on your web site, if the first font isn’t available the second would be used, and so on.

Fonts are sometimes unavailable because the computer displaying the web page doesn’t have that particular font installed. If the computer doesn’t have the font it can’t use it to display text, and will use the default, Times New Roman, which in many cases is undesirable. Therefore font families came to be.

So basically you are saying right computer use this font for text on the web page, but if you don’t have it, use this second one, and if you don’t have that use this third one.

Setting Font Families

To set the font family for the whole page you will need to view the HTML [Define] of the web page and insert the following code between the <head> and the </head> tags [Define], which will be at the top of the web page.

<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>


This code makes all the text on a web page be displayed in Arial, if Arial is unavailable then use Helvetica and as a last resort use san-serif.

Change Arial, Helvetica, sans-serif to which fonts you want to be displayed, but make sure you use web safe fonts.

Not working correctly?

If text is being displayed in a different font than you specified check that there isn’t a <font> tag around that text by checking the HTML of the page. You will need to remove all of these font tags if you have them to make the above code work correctly.

If you don’t have font tags in your page, check the text isn’t an image, if the text is within an image you will have to edit that image separately.

Which web design fonts?

When learning the fine art of web design it is only natural to experiment with all the options available to you, one of which being fonts. You find a really interesting font on your computer and your content looks great using it on your computer, but wait…

If you set your text to a font that isn’t installed on the computer that is viewing your website it will be displayed in the default font, which is Time New Roman. So if somebody viewing your site half way across the world, or in the next town doesn't have the font you specify all your text will be displayed in Times New Roman, which is the default font.

To avoid this happening use the 6 standard web design fonts, which are..

Arial, Helvetica
Times New Roman
Courier New
Georgia
Verdana
Geneva

Every computer has these fonts and using them will ensure your web site is displayed how you intended it to be.

Keep your website fresh

A lot of web sites are online brochures, informing visitors about your company or an area of interest, the content of these sites is updated maybe once or twice a year. This can quickly make them appear dated, and Internet users want the most up-to-date information.

To keep your web site fresh add the current date in a highly visible position on your home page. To add the date you will need to insert the below JavaScript [Define] into your home page.


<SCRIPT LANGUAGE="Javascript" class="timetext">

var now = new Date();

var days = new Array('Sunday','Monday','Tuesday','Wednesday',

'Thursday','Friday','Saturday');

var months = new Array('January','February','March','April',

'May','June','July','August','September',

'October','November','December');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function y2k(number){return (number < 1000) ? number + 1900 : number;}

today = days[now.getDay()] + " " +

date + " " +

months[now.getMonth()] + ", " +

(y2k(now.getYear())) ;

document.write("" +today+ ".");

</SCRIPT>


To insert this JavaScript you will need to view the HTML [Define] of your home page, and insert it in the area you wish it to be displayed.

More web design advice

What is a Podcast?

A Podcast is an mp3 file, but instead of a music track it’s a recorded radio show, or a newsletter read out by somebody. You download them from the Internet and then transfer them on to your mp3 player (i.e. IPOD or the like), or just listen to it through your computer.

The reason for all the hype surrounding Podcasts is that websites owners can supply the content of their websites in an mp3 file and visitors can listen to them on their IPOD’s, and we all know the hype around IPOD’s at the moment.

Examples of Podcasts

A good example of a Podcast is one produced for the UK’s BBC radio1 breakfast show, The Chris Moyles show, they put together all the best bits of daily show each week and allow listeners to download it for free via the BBC website. Try it your self.

Download Chris Moyles Podcast by clicking here. (Right click your mouse on the link and select save target as)

Find out about the Chris Moyles show

Once the file has finished downloading, play it on your computer or transfers it to your mp3 player and listen to it there.

More web design terms explained

Button to close window

Closing a window can be done by a visitor to your website, they just click the x in top right of the window. However to make your website easier to use add a close window button or link.

To add this button or link you need to add some web site code called JavaScript [Define], this is a very easy thing to do. Lets make a link that closes a window, copy the code between the below lines into the part of the web page you want to display the “close window”.

_______________________________________________________

<a href="javascript:window.close()" title="click here to close the window">Close window</a>

_______________________________________________________

It will look like this on your website

Close window
(This doesn’t work here because it would close this window, which you don’t want to do)

To add this code to your website you need to need to view the HTML [Define] of the web page you are working on. If you use software like Dreamweaver or Frontpage, find the option that allows you to see the “code” or “source”. If you have trouble finding this, search the help menu for “Edit html”.

More web design advice

Display the time

A useful feature for any website is displaying the correct time, no matter where the website is being look at in the world. To add this feature to your website you need some simple code called JavaScript [Define]. The ticking time will be displayed like this…

Display time example (Click to open new window)

JavaScript code to add time

Simply copy and paste the below JavaScript code into the HTML [Define] of the web page you want to display the time.

____________________________________________

<div id=Clock> </div>
<!--Important keep this div or the time will not be displayed -->
<script language =" JavaScript">

function tick() {
var hours, minutes, seconds, ap;
var intHours, intMinutes, intSeconds;
var today;

today = new Date();

intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();

switch(intHours){
case 0:
intHours = 12;
hours = intHours+":";
ap = "A.M.";
break;
case 12:
hours = intHours+":";
ap = "P.M.";
break;
case 24:
intHours = 12;
hours = intHours + ":";
ap = "A.M.";
break;
default:
if (intHours > 12)
{
intHours = intHours - 12;
hours = intHours + ":";
ap = "P.M.";
break;
}
if(intHours < 12)
{
hours = intHours + ":";
ap = "A.M.";
}
}


if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}

if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}

timeString = hours+minutes+seconds+ap;

Clock.innerHTML = timeString;

window.setTimeout("tick();", 100);
}

window.onload = tick;

</script>
____________________________________________

That’s it. Save the web page and then view it to check it works correctly.

More ways to improve your website