Archive for the ‘Optimised Web Design’ Category

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.

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.