Archive for February, 2010

Does the Search Engine Bing Actually Work?

Sunday, February 21st, 2010

Does the search engine Bing actually work? Why won’t Bing index my new website? Bing produces inconsistent results. Why?

Many people have complained about Bing not indexing new web sites.There does not seem to be a reason for some sites not showing up in Bing, but it’s a problem which needs addressing, not least because many good resources may not be showing up in relevant searches. This post aims to provide some search results in order to help you decide which search engine is better, Bing or Google.

Comparing Results
Google is the number search engine by a long way. It is easy to use and always seems to provide relevant results. Let’s see how Google and Bing compare.

On Sunday 21st Feb I searched for the following from the UK;
“Village Bells Ealing” – A fine local public house which serves good food and offers very friendly service.
Results
Bing – The top 10 results do not give me anything close to what I need. The web site does not appear to be listed anywhere!
Google – Thanks to Google I have found the web site I was searching for at the top of the results.

“Cargo Oxford Street ” – One of Southampton’s most popular bars in the upmarket area of Oxford Street (I have no affiliation to this bar)
Results
Bing – No first page results take me where I need to go. Results at number 1 and 2 are both directory results with the telephone number I am looking for.
Google – Result number 2 is the Cargo web site. The exact site I was hoping to find.

“The Rose Bowl” – Hampshire cricket ground and popular location for corporate events
Results
Bing – At the top spot, The Rose Bowl Stadium (America). This is the wrong statium. The link I am looking for sits at number 5 on the first page of Bing.
Google – Thankfully, what I amm looking for is right there in front of me at number 1.

“The Book Shop Cranleigh” – This book shop is a small independant which I use to buy books.
Results
Bing – The web site I am looking is not listed at all.
Google – The web site I am looking for is at number 1 of the results page.

“Web Designers Southampton” – In a bid to find my own web site I search for Web Designs in Southampton.
Results
Bing – Nothing. I’m not listed.
Google – Out of 817,000 results I am number 20. Thankfully for me, Bing is not as much of a big player in the search industry anymore!

Conclusion
After a selection of searches using both Bing and Google it is evident that results vary by a wild margin.  The search engine with the most relevant results was clearly Google on this occasion. Bing scrapes the barrel with some shoddy search results which, in most cases are not even relevant. Google benefits massively from using my location to determine search results. Bing clearly does not do this as it offered me locations in America when I was searching for something situated in Southampton (which is the same location I was searching from).

How we determine relevancy of results may vary from person to person, and this example only includes local searches for small businesses. The test is not conclusive, but personally I can say which search engine I will be using. It will be the same one which I trust to deliver me the best result every time and the one which I believe will not waste my time. Google.

Posted in Personal Rantings | 1 Comment »

Understanding Search Engine Optimisation for Web Designers

Wednesday, February 17th, 2010

You practice search engine optimisation because you want people to view your site. Without search engine optimisation, your work as a web designer would be wasted. So what key factors do you need to consider when optimising your web site?

Alex Croucher discusses how to optimise your website to a professional level, and how to make the monster of all search engines, Google, give your site a boost in its ranking.

The Quality of the Site Itself
A very key factor to good SEO is the quality of the site itself. Assuming you are a Web Designer who designs web sites and then codes them without the aid of a developer, you will find this bit extremely useful.

We discussed the importance of optimising your images in the previous post. Make sure you don’t overload your site with KB heavy images, as these will stop the search spiders in their tracks. It is also essential to keep your code lean, and to avoid using too much Javascript within the page code. Javascript can be an useful tool, but more often than not it is a hindrance and causes untold problems. Google hates Javascript as it adds very heavy code to your site and slows the crawling process. If you must use is then place it in an external file just as you would with your CSS. Make sure that your HTML is clean, and trim the code wherever possible. The same goes with your CSS. If your web site is compliant and lean, you have overcome the first obstacle of bad SEO.

Website HEAD Tags & META Data
This is pretty standard stuff so I will keep it short. The three important META tags to use are Title, Keywords and Description (in that order). Use all of them. Try to be as descriptive as possible without going too far over 400 characters in each tag. Avoid using words like ‘and’, ‘on’ & ‘in’ as they are a waste of valuable SEO space. Be creative and put yourself in the shoes of your clients. Imagine that you want to make a legitimate search. What words would you type in to Google?

USE the keywords tag. Many SEO experts claim that the keywords tag is not relevant to Google anymore, but to tell you the truth, nobody really knows. Google are generally very secretive about the various aspects of their algorithm, and to include keywords tags cannot do any harm. In fact, it would be pure laziness not to!

Try to be diverse with your META tags. Change them on every page so you cover as many variations of a key phrase (or set of phrases) as possible.

H1, H2 and P Tags
Writing a good copy for your website is crucial, and tailoring it to contain key words and phrases is just as important. Try to include key phrases throughout the site without making the copy read as if it’s stuffed. Keyword stuffing is a black hat technique and will not help your SEO progress. More importantly than just placing key words and phrases in your web site copy, is placing them stratgically. You NEED to place key phrases in the first 50 words of your copy. I would also recommend using your H tags just as strategically by placing key words and phrases in between. Google knows the importance or such tags and keywords placed within them will add more weight to a good SEO plan.

Links
Be descriptive with your links. Don’t just call them ‘About’ or ‘Contact. Use extra words to add value to these links. You’ll notice on my homepage at www.2spheres.co.uk, I have short links at the top of the page, but I then include descriptive text links in the footer. The destination of these links are identical, but the links in the footer have been named descriptively, for example ‘Contact Web Designer’ and ‘About Web Designer’. If you use images in place of text for your links then you should include descriptive alt tags (see below).

Off Page Optimisation
This is your domain name and URL. You might not be in a position to change your domain name, but you can change your URL(s). Make sure you name each page descriptively. Don’t opt for numerical names such as page14.html. Be descriptive with your names. If it means re-linking your entire web site then so be it. It is a highly recommended technique. Keep the URL about 3 or 4 words long. If you make it much longer than that you could be penalised for keyword stuffing.

Alt Tags & Image Names
Alt tags are descriptions of images used by screen readers for accessibility. Alt tags also help your web site gain exposure.  Google image search is influenced by alt tags, and, believe it or not, you can generate a lot of traffic this way. The same goes for the name of the image, which is why I highly reccomend naming your images descriptively. Google treats an underscore as a space, so calling an image graphic_designer.jpeg will be much more search engine friendly that calling it graphicdesigner.jpeg, or 56985.jpeg!

Do Yourself a Blog
I’m quite a giving person, but I don’t spend hours writing Blog posts just for the benefit of others. A well structured Blog is a great way to increase your SEO. It does two positive things for your site:

  • Keeps the content fresh, thus avoiding the possibility that Google could consider your site as ‘gone stale’.
  • Draws more people to your site naturally (assuming you are writing content rich Blogs which people want to read).

Be original with your Blog. Write about things that people want to read about. Try not to duplicate things and DO NOT rip off other peoples articles. One of my competitors has a Blog containing articles which have been copied and pasted from elsewhere. Although he states that he is not the author, this could still be seen as bad move by Google. Duplicate content is a potential Black Hat technique which could earn you a spot in the dunce corner if you’re not careful.

Wordpress is my Blogging tool of choice because it’s FREE and it’s very good. To install Wordpress you only need very basic developer knowledge and a host which supports PHP (most do). There are other Blogging tools, but Wordpress is very good. If you are interested in installing Wordpress on your site just visit wordpress.com. Here you will find the download and a very simple, step-by-step installation guide. It took me about half an hour!

Backlinks
Backlinks are key to any successful SEO plan. Backlinks can be hard to gain naturally, so good networking is required to make this work. Try and partner with sites who may be willing to exchange links with you. Using my site as an example, I try to build backlinks with Web Design forums, Web Design directories and other credible business directories. By submitting articles to various other Blogs and forums you can also earn quality backlinks. If you build a lot of web sites for businesses, you can usually get away with placing a link back to your own site as a free credit. Make sure the anchor text (that’s the text which describes the link, rather than the link itself) is SEO descriptive. I typically use anchor text like “Web Design Southampton”. This makes a massive difference rather then just including a standard link with no anchor text at all.

A WORD OF WARNING ABOUT LINKING – It is easy to submit your website to a directory using supposed “SEO Software”, but be warned, this is bad practice, and if (when) you get caught, your web site will lose rank, or potentially will become sandboxed. If your site becomes sandboxed by Google then you might as well give up as you will lose 90% of your search engine generated traffic. The same rule applies to link farms, and any other sites which exist purely to provide backlinks to other sites.

Summary
I hate this expression, but, ‘at the end of the day’ content is king. If you create a good website with high quality information that people want to read, then people will come. The techniques mentioned above are all very very important, but they will not work if you create a bad website with poor content that nobody wants to see.

Follow the rules, don’t cut corners, provide information which is useful to people and presented in a legible, professional manner and you will get visitors to your site.

Tags: , , , ,
Posted in Optimised Web Design | 14 Comments »

Create a Customer Header with Links using CSS

Thursday, February 11th, 2010

CSS is a very powerful tool. Here we examine how to create a customer header with links, very much like the one seen at www.2spheres.co.uk.

First of all, decide if you want your header to have solid colour or a gradient of colour. If you decide to opt for the latter then you will need to open up Photoshop or you favourite graphics editor.

Creating a Gradient and Exporting It
We will make our header gradient in Photoshop first.

Create a new image, approx 100 pixels wide and 55 pixels high. Now, using the gradient colour picker in Photoshop (find this by selecting the gradient tool from the left hand tool bar and then selecting the drop down box on the top tool bar with a picture of a gradient on the front) choose 2 colours. My advice would be to choose 2 similar colours, for example, a dark red #9f0202 and an ever so slightly lighter red #c80404.

The Gradient Picker

Using the gradient tool, hold shift and draw a gradient on your art canvas, dragging from top to bottom. This will ensure your gradient is vertical.

This next step isn’t essential but it helps your website become more optimised when it loads. Go to Image > Image Size and untick the box which says ‘Constrain Proportions’. Now resize the image width to 1 pixel.

Now go to File > Save for Web and Devices. Save your 1 pixel wide image as a png-24 and call it something memorable like “headerbg”.

Adding Your Gradient To Your Web Site Using CSS
Here’s where we get down to some serious coding. Hand coders and Dreamweaver users will understand what to do.

Create your new HTML document and add a div. The code you will need for valid markup of your HTML doc with a div will look like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>
<body>
<div id=”header”> </div>

Now we will enter our CSS. To keep it simple, add the CSS to the HTML document (rather than creating a separate file which is actually best practice but more complex). We will deal with creating separate CSS files at a later date.
The CSS must be placed in the head tag of the document. For Dreamweaver users, go to Window > CSS Styles to view the relevant dialog box. Your CSS will start to shape up like this:
<style type=”text/css”>
<!–
#header {
}
–>
</style>

#header is the name of the div we created earlier using HTML. You can call it whatever you like as long as the CSS and HTML name for the element match up.
Your div will automatically span from the left hand side to the right hand side of the page. The following code will set you div properties:
#header {
text-align: center;
height: 35px;
padding-top: 20px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: lighter;
letter-spacing: 0.2em;
background-image: url(images/headerbg.png);
background-repeat: repeat-x;
}

Our CSS is telling the browser a few things here;
- The text must be centred
- The height is 35px. Add the padding on and this makes 55px (the total height of our header background image)
- The font we want to use
- The font size
- The weight of the font
- The space between the letters we type
- The location of the image we just created in photoshop
- The direction we want it to span. x is left to right and y is up and down.
You should have something which looks like this:
What your work should look like

Our div spanning across the page with a gradient

With that complete, the final stage is to add some links. To do this, we will create a UL, or unordered list. There are some complex rules which need to be applied here to make this work so keep and eye on the code:

HTML CODE FOR THE UL IS LIKE THIS:

<div id=”header”>
<ul>
<li class=”first”><a href=”index.html”>HOME</a></li>
<li><a href=”link.html”>ABOUT</a></li>
<li><a href=”link.html”>GALLERY</a></li>
<li><a href=”link.html”>CONTACT</a></li>
</ul>
</div>

Notice that we have added a class of “first” to one of our list elements. This is very important for later on.

Next, we add the CSS in to our head to style the UL. You will need to create a new rules as follows:

#header ul li  {
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #F482B6;
 list-style-type: none;
 display: inline;
 padding-top: 25px;
 padding-bottom: 18px;
 text-align: center;
 padding-left: 20px;
 padding-right: 12px;
 margin: 0px;
}

And now, create another new rule to remove the first left aligned border from the links:

#header ul .first {
 border: none;
}

To briefly run over what we have asked our code to do:
- We have specified a border on the left. This is used as a visual separator for our links.
- We have also specified border type and colour.
- We have told the browser that our UL is not a visual list and it needs to be displayed in a line.
- We have added padding to increase the hotspot area of each link and to give more space between the links.
- We have specified a zero margin

View Some Code
If you want to take a more in depth look at the code which we used to create this you can go to www.2spheres.co.uk. The header on this site is identical to what we have just created. The CSS and HTML in the tutorial is fully compliant and can be checked at W3C for official validation.

Tags: , , , , ,
Posted in CSS Tutorials | 2 Comments »

Unbiased Antivirus Reviews

Monday, February 8th, 2010

If you search Google for information on the best antivirus and you will get a whole host of information about the latest software available to protect your PC from threats. This is great, but the reality is that some of it is biased. Spoof websites which appear genuine are often not, and review websites are sometimes given kickbacks by the software providers. This means that it is hard to determine which information to rely upon.

What Do I use?
Kaspersky – I have Kaspersky Internet Security on my home laptop. It is relatively affordable (about £40) and seems to offer a great deal of protection without using too many system resources. The interface is simple and I have never had a virus! What more do you want? RATING 4/5

PRO’S - Good protection without using too many system resources.

CON’S - Well, there don’t seem to be any so far. The interface isn’t as clean as others, but it really does do what it says on the tin. The only query I have with Kaspersky is why do they offer 2 products? Namely, Kaspersky Internet Security and Kaspersky Antivirus. Surely the 2 go hand in hand. I mean, if I get a virus it’s likely to come from the internet. Just a money spinner if you ask me!

ESET NOD 32 – Despite having a very strange name and a very strange graphic of a metal robot on the box, this antivirus is very refreshing to use. The interface is intuative and attractive and the virus database updates daily without being intrusive to your PC usage. Cost is reasonable.

PRO’S – Simple to use, easy to install and gets to work fast.

CON’S - None come to mind. RATING 4/5

BitDefender - I have this on my main home PC. Personally, I don’t really like it. The antivirus itself does the job. I’ve never had a proper infection on my PC. The drawbacks are that the software seems intrusive. I often get pop-ups and messages about scanning my drives. I don’t want that. The software costs from £30. RATING 2/5

PRO’S - It does what it is supposed to do.

CON’S – Personally I don’t feel at home using the interface. It’s very red and angry and the pop-up messages get on my nerves.

Mcafee – I was given this as a trial when I bought my Sony Vaio and I have it on my work PC. The software appears very intelligent. It really does just get on with the task in hand without being intrusive or ever seeking for your attention. If you do get a virus then Mcafee calmly notifies you and gets rid of it. The only reason I didn’t extend the license when the trial ran out was because it would have cost me £50. A little steep in my opinion. RATING 4/5

PRO’S - By far the best I have used. Low on resources and not intrusive.

CON’S - For me, just a little too expensive. That’s all.

AVG Free Edition – I has this as a student. It never failed me – ever – and that is good going when you consider what I used to do with my laptop at the time (share with friends, let people put music on it, watch a bit of blue perhaps!). AVG Free served me for about 3 years. It got rid of a good few viruses. The only thing I noticed about AVG Free is that it was rather intensive on memory. Now, this could be down to the computer it was run on too, but overall, a superb package for absolutely no money. RATING 4/5

PRO’S - It’s a FREE antivirus which works very well.

CON’S - It appeared to use lots of memory when it did a scan and the odd advert for the ‘paid for’ edition came up occasionally.

Tags: , , , ,
Posted in Unbiased Antivirus Reviews | 1 Comment »

Optimising Images for Google

Monday, February 8th, 2010

If you’re reading this then you are probably interested in Graphic Design, or you wouldn’t have typed the term in to Google and stumbled across my Web Design Blog.

Many Designers will know the fundamentals of web design and the rules of thumb when it comes to designing for the online community, but many overlook the basics of Search Engine Optimisation (SEO) because they don’t understand it or it seems daunting. I remember picking books up when I started out in Web Design and thinking just that.

Yes, SEO takes time, and yes, SEO can be boring, but when you see positive results you just keep coming back for more. Lesson 1 of my strategic SEO plan includes optimising images for Google. This thread assumes that you have a reasonable understanding of SEO and a basic understanding of XHTML and design practices.

Google Hates Big
It’s preferable to the human eye to see crisp, clear imagery, especially on a computer screen. The problem is that you can’t always have high res on the Internet. Google has the job of keeping people informed. The last thing they want is your clunky website clogging up their results, which is why you MUST optimise your image size and use the right images where appropriate. Keep files sizes to a minimum while retaining quality. Google likes to crawl your site quickly. If it finds massive images with huge file sizes then your Google position could be jeopardised.

Web Design Tips
File Size Versus Quality
Image quality – this is a tough call that only you can judge. When you’ve finalised your web site design in your graphics program you will want to export it and start coding. During the export process you will be slicing images while choosing the most appropriate file type for the job (see below for more information). Your graphics program will have a slider which gives you the opportunity to select the image quality of your exported images. Don’t always go for maximum because it will slow your web site loading times down. I tend to go for a figure around 60 or 70 percent. What you choose is up to you, but remember, large images will have a detrimental effect on loading times, and Google isn’t a fan of slow loading site. Neither are your customers!

Image Formats Which Are Available

Optimise images for Google

Examples of image formats available to you

jpeg – Probably the most common image type at present, jpeg has great compression ratios and is ideal for many web images, especially pictures which include a lot of variation in tone and colour. Quality is reduced when you optimise jpeg, so keep the original high res copy backed up on your hard drive. By using Photoshop or Fireworks you can see the impact on image quality that optimising for the web has. The slider in Fireworks is especially good at giving you all the informtaion you need when optimising, including the percentage quality, the filesize after optimisation and the time it takes to load on a 56k modem.

jpeg does not support transparency. All jpeg images will appear square or rectangular in a browser.

gif – This type of image is great for solid areas of colour, for example logos, website backgrounds and images which do not have much variation in tone. Use gif if you want a transparent image to render in a browser. The images in the corner of my own web site (www.2spheres.co.uk) are in gif format, as they are mostly one colour and they are also fully transparent in places.

gif does not support partial-transparency, for example, drop shadows or outer glows at 50%.

png – This wonderful image format has changed the way we design for the web, but be warned, it can cause problems with certain browsers (IE6 being the usual culprit here). The png format is very high quality and has a reasonable file size as long as the image is kept small. It supports full and partial-transparency, so you can render a 50% outer glow on an image in any modern browser.

REMEMBER THIS – png WILL NOT render in some browsers (IE6 for example) which means that your semi-transparent png work could be wasted. Most browsers are being updated and the old ones being phased out, but you can bet your boots, someone somewhere is still using IE6 or Netscape Navigator. One other thing to keep an eye on with png is the file size. It can get very large if your image has lots of colours and tones in it.

Naming Your Images
Naming an image 177007.jpeg isn’t very search engine friendly, so to add weight to your SEO think of a descriptive name. By naming images relevant to your content, you could gain places in the search listings. Try to call images relevant names, including some keywords if you can. A couple of examples are images on 2Spheres which are named graphic_design_blog.jpeg and design_gallery.gif.

Adding ALT Tags
The original concept of ALT tags was to assist in accessibility for screen readers. They also provide weight to a good SEO plan. Google likes ALT tags because they show that your site is catered for screen readers, and they give Google a better idea about your site and it’s content. For those of you who are unfamiliar with ALT tags, you can add them to your XHTML very simple like this:

<img src=”image_name.jpeg” alt=”An image of a dog eating food” width=”157″ height=”110″ border=”0″/>

Simply add your image, then add alt=”tag goes here” within the code. If you use Dreamweaver then it asks you to add this tag when you insert an image. If you use a text editor you should know this anyway!

Keep Image Size Down with CSS
Users of your website want fast access and quick loading times. You have about 4 seconds to impress before the average will click back and go elsewhere, which is another reason why file size is so important. Keep your image size down by optimising correctly and using the correct file types, but use good markup wherever possible and try to cheat the system by repeating images whenever you can. CSS is great at doing this for you, but it has to be done in the correct way.

Go back to the 2Spheres Web Design Blog to learn more about CSS and web site optimisation.

Tags: , , , , ,
Posted in Optimised Web Design | 5 Comments »