Quick search engine optimization for webdesigners

Nowadays, if you do Web design, you are also required to make some decent SEO optimizations before delivering the site to the customer. Or at least that’s what we found out from our users and it sounds plausible. Problem is that learning SEO, finding the right tools takes time and might not be your favorite pastime. So what if you could check  and get straightforward optimization tips for the most important parameters directly in Firefox?
SenSEO https://addons.mozilla.org/en-US/firefox/addon/9403 does just that.

SenSEO it`s a Firefox Plugin and it has been integrated with Firebug. SenSEO gives you quick previews on important SEO components from your webpage and optimization tips based on the results.

Installing SenSeo

Installation is quite easy – first install Firebug Firefox https://addons.mozilla.org/en-US/firefox/addon/1843 addon then SenSeo https://addons.mozilla.org/en-US/firefox/addon/9403.Restart Firefox. All set.

How does it work?

Lets take as example our Creative DW menu pack page http://www.extendstudio.com/product/creative-dw-menus-pack.html and test it for the following
keyword: “dreamweaver menu”. SensSEO appears on the Firefox bottom bar.

1.Your title tag

The first thing that SenSEO checks is your title tag that refers to your webpage title and how well the name is related to your specified keywords. For example, our Creative DW menu pack webpage title is: “Dreamweaver Menu extension: Creative DW Menus “and the keywords for our test were “dreamweaver menu”. See the picture below.

The SenSEO Grade for how well the “dreamweaver menu” keywords were integrated in the creative dreamweaver menu pack webpage is B and we got 81 points from 100.

2. Meta-description

The second component that SenSEO is looking for is how well you use the webpage meta-description related to your selected keywords, in our case “dreamweaver menu”. The meta-description on our page  <meta name=”description” content=”Creative DW Menu Pack is a suite of Dreamweaver extensions that seamlessly blends the flexibility of DHTML and the Flash look and feel to create beautifully web site menus.  “/> has more than 150 characters.  And also you should start your meta-description with your keywords. See the picture below.

3. The use of your meta-keywords

You should use a meta-keyword tag just once, or else you could be penalized by a search engine for spamming and your website would not be indexed. You should include less than 10 keywords in the meta-keywords tag, and they should be relevant and also appear in the content of your webpage.  See the picture below.

4. The use of the robots.txt

This text file tells a search engine robot how it should access the content of your website. Usually the default mode is set to allow (read all pages), but you can also set to disallow some folders (for example admin) or even stop some search engines from indexing your site (usually good to have in production). Stop Googlebot example:
# Google
User-agent: googlebot
Allow: /

5. The use of your headline tags

You should include your keywords in the <h1> tag and you should place this <h1> tag before the <h2> and <h3> tag. See the picture below.

6. Your page content

The images should have alternative text that is relevant to your content. Keyword density should be between 5% and 7%. The keyword density refers to the frequency with which a given keyword or phrase appears within the content of your page. If there are 100 words on your page, and the word ‘extension’ appears once, then the keyword density of your page with regards the word extension is 1%. You should offer unique content on your page if you want higher ranking on search engines, make sure that the webpage code, whatever it is (html, css, php, javascript) is valid and you should optimize the load time of the webpage, by compressing images, external css styles and javascripts files. See the picture below.

7. The name of your domain

SenSEO checks how relevant is your domain name to your selected keywords, in our example it checks www.extendstudio.com for relevant use with the “dreamweaver menu” keywords. That’s why is important to name the files with relevant keywords (example “dreamweaver-menu.html”) and folders as well. Do not use special characters in your domain name, and do not use underscore to separate words. See the picture below.

8. The path to your webpage

You should keep the path to your webpage short, and do not use dynamic parameters to the path of your webpage, and always use lowercase words in the path. See the picture below.

I especially enjoyed using this plugin for Firefox because you don’t really need to go out and learn SEO – it’s all there: you can check directly inside Firefox the optimization status and it gives you points for each completed step. You can see the complete list of your components and the optimization for the components by pressing the button “Show components”.

What do you think?

How to get aroung the background height 1px IE6 bug

IE 6 is dead but does not surrender! Like everybody else in the Web Design industry I hope IE6 will eventually go away, but in the meanwhile, much to my surprise, it’s still widely used by big US corporations due to a mixture of un-flexible upgrade policies or the “use as it is” trend.

So, for now, the safest bet is to still have a decent layout on IE 6, but you will need some workarounds. For example, doing a 1 pixel height line will not work on IE6, although is a quite decent thing to ask. The “background height 1px IE6 bug” says that instead of seeing a 1px line, IE6 will make it the height of the default font. Here is the code I’m talking about:

<div style=”background-color:#F00; width:600px; height:1px;”></div> - you would expect to see a 1pixel red line correct? Well, it does in all browsers except IE6 - here is a link to test it.

The workaround is quite simple: add a &nbsp; inside the DIV tag and “line-height:1px” at the end of the style used for the div (style can be applied on the div either inline, or through a class). Here we go:

<div style=”background-color:#F00; width:600px; height:1px; line-height:1px”>&nbsp;</div>

Enjoy!

Digsby, the easy way to handle support on multiple Instant Messenger Networks

How fast do your customers expect a reply and help to their issues? Feedback from our customers say that Web Design and the communication with end customers made tremendous steps towards Instant Messaging, Social Networks and the so called Web 2.0 feeling. Gone are the days when the customers reported a bug in their site by email of even phone, nowadays you’re not only selling the look & feel or functionality of the site but also availability when something goes bad.

So what do you do? You make yourself social and easy to reach and your customers can get in touch with you live: Yahoo Messenger, MSN, Google Talk, Facebook and more. And there’s always that customer that uses a different IM network. New account, new software and new icons on your desktop (I personally find this very annoying because I like to keep my desktop as clean as possible) .

But, time means money isn’t it, so you can’t really spend much on social network checking or chatting with your Web Design clients. Fortunately there are programs that can help you with all these, all in one programs as I like to call them. One of them that I like very much is Digbsy. I’ve been convincing my colleagues at Extend to use it ever since I found it. Seeing that they like it I thought it would also be a good idea to tell more people about it.

One of the most important things that Digsby brings to the table is the multiple account management for IM’s and email accounts. To choose if Digsby connects to that account automatically, you simply select or deselect the checkbox of that account.

Digsby account management for IM networks

You can stay online at the same time on all these accounts and talk with people from all networks. All of them are placed in the same list so you can easily search for contacts.

Another smart feature is to possibility to merge contacts in case you have a person that uses more than one IM network (like myself). This is a very helpful tool to keep your list small and clean.

Digbsy contanct merge feature

From the same account management screen you can create your social networks accounts and connect to all of them in the same time.

Digbsy account manager for social networks

Once connected to your social accounts you can read notifications, post comments, update status and even watch pictures directly on your desktop. This is done through a panel and you never leave the window you we’re currently working on.

Quick comment using Digbsy

Another nice feature is the global status changer. You can easily choose the accounts on which you want to change your status and update them with just one mouse click. Digsby also offers image embedding and tiny url’s.

Easy status set up

I find Digsby to be a very helpful program and it really simplifies things. It keeps the work going and you still get to socialize or communicate easily. (Did I mention that you can write IM’s directly from pop-ups ? .. well that’s one of the other features that you’ll get to discover).