Bye Bye, IE6

Yes, I am too dropping support for the outdated but still widely used IE6. It’s old (2001!), it has numerous compatibility issues, it is not safe and it is lacking all the features a modern browser needs. It doesn’t even have tabs. But why do people keep on using it??

The main reason is because most websites still support it. Also, a lot of internal company systems only work in IE6, and last but not least, people just don’t know that they are running an unsafe, outdated browser.

If we want to have a better internet, and give people a better experience, we as webdevelopers have to stop supporting IE6. But if you make it hard for yourself and waste your time in IE6 hacking, you’re doing the exact opposite. All the hacks that we use on our sites is the main reason IE6 still is a big player on the browser market.

In stead, give your users a message that they are using an old and unsafe browser, and give them directions in how to upgrade to a more modern browser.
This way, you are not completely ignoring IE6 users, and presenting them with a broken website. Don’t be scared that dropping IE6 support will make you lose all those precious users.

Do not make the mistake of only telling people to get Firefox, or another open-source alternative. The unknown will make your users go away, so be sure to mention IE8 as well (it’s kinda good anyway)!

So let’s all drop IE6 support, and make the web better

Continue Reading...

Your Site’s Logo – The SEO Way

A site’s logo is an element that’s always there, but a lot of designers still treat it as just an image.
It’s time to change that. If we treat the logo as just an image, google will treat it that way too. But we want google to treat your company’s logo like an important heading element, right?

Using the stechnique I will describe now, we will make <a> element that holds your logo, and can still display an alternative heading to search engines.

The Code

HTML:

<a href="link-to-your-homepage.html" class="logo"><h1>Company Name<h1></a>

CSS:

a.logo {

	background-image: ('link-to-your-logo-image.jpg');
	background-repeat: no-repeat;
	width: 200px; //* Change to correct width *//
	height: 200px; //* Change to correct height *//
	text-indent: -9999px;
	display: block;

}

As you can see, the core of the code up here is the usage of a background-image for the link element, and the usage of text-indent.
Text indent makes sure your text indents (duh). What this means in our case is that it is effectively moving the text 9999 pixels off-screen, so that we as end users do not see it.
The search engine bots that crawl your site however, will see the content in there.

So now, in stead of showing search engine bots an image, we are giving them the heading they need: your company name.

Last notes

This approach has another minor design advantage, you can give your logo a nice and fancy hover effect (check the logo on top of this site). It was created using the same technique, and adding a simple :hover element in the css.

Continue Reading...