Get rid of those ugly link outlines.

Tweet

Great web designs are everywhere now. With the explosion of online tutorial sites, blogs and social media there is a ton of information at new designers' fingertips. So with so much new talent out there you need to be able to stand out from the crowd. What makes a good design great for me? It's the little things that matter most. As designers we never seem to have enough time, but taking just a little extra time on details can go a long way in your design. Ugly link outlines are one thing in particular that I see quite a lot, even on some of my own stuff. Here are a few tips on how to get ride of those pesky eyesores

In firefox and other modern browsers it is easy. I simply add this to my css document: a:active, a:focus{outline: 0;}

Alright, so that's cool, but it looks like they are still hanging out in IE. Here is a javascript method I use for getting them to clear out in IE while maintaining usability for tabbed browsing.

$(document).ready(function() {
	$("a").keypress(function() {
			this.blur();
			this.hideFocus = false;
			this.style.outline = null;
	});

	$("a").mousedown(function() {
			this.blur();
			this.hideFocus = true;
			this.style.outline = 'none';
	});
});

 

An important note to make is that some users rely on link outlines to navigate a page. Users that have disabilities restricting their use of a mouse rely on the keyboard or voice to navigate a page. Without a link highlight it is difficult for them to identify what link they are on. If you decide to use one of the methods above to remove the outlines just make sure it is necessary before you do.