Get rid of those ugly link outlines.

Get rid of those ugly link outlines.

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.

Write a comment

  • Required fields are marked with *.

Dennis Figueroa Reply #7 Nov 19, 09
 
Re: hey great work!!! that ugly outlines are that UGLY!!! thanx!!! I´ll take this code!!!
Michael Reply #6 Nov 19, 09
 
Re: You can do this with strait css using the border property and cut out the extra jquery computations.
Steve Reply #5 Nov 19, 09
 
Re: Thanks for the comments guys. @Michael. Straight css methods of removing the outlines do not always work so well with IE from what I recall.

Also I should add into my post that removing outlines can cause usability problems for users that rely on non-mouse forms of navigation. Without the outlines it makes knowing what element they are on very difficult. Remove the outlines wisely!

-Steve
Sukiali Reply #4 Nov 19, 09
 
Re: your work is absolutely awesome, I am too learning web Designing, Can you help me learning new tips & tricks,
Steve Reply #3 Nov 19, 09
 
Re: Thanks Sukiali! My advice to you would be to never stop learning. There are a lot of good design blogs out there, follow them to keep up to date on what's going on in the web, be original and love what you do.

-Steve
Lauren Reply #2 Nov 19, 09
 
Re: Hi, you have a really unique style of designing, really looks nice. Thanks for this tutorial as well. Might see how this looks on my site.
Steve Reply #1 Nov 19, 09
 
Re: Thanks Lauren! Good luck with the site.

Recent Posts

Stop Designing in Photoshop. No thanks!

Feb 02, 2010

There has been a lot of buzz on the web lately about designing in the browser (designing with markup). Several articles have popped up recently such as Andy Clarke’s “Time to...read more

Behold Apple's iPad

Jan 27, 2010

Apple unveiled it's much anticipated iPad this afternoon. It inspired me to do some branding for them....read more

Let it Snow Wallpaper: Download

Nov 25, 2009

This is not a new wallpaper, it is one that I created for Smashing Magazine last December. Many have you have probably seen it in the work section of the site but until now I have not had it available to download....read more

Text layout in Photoshop using shape layers.

Nov 21, 2009

What's up guys, this is my first video tutorial so I hope you find it useful. If this works out well I might try posting some more of these quick tips. If you have any questions please feel free to leave them in...read more

More Posts

Powered by modx

Web Development: How I get it done

New Desktop Wallpaper

15 Inspirational Home offices

Color Profiles in Modern Browsers

Big Update!

Free Texture Pack #1

Run Your Old Add-Ons in FireFox 3.5

Downtown Tulsa - A Photographic Tour

Souled Out Website Launches!

Get rid of those ugly link outlines.

New Website Launched!



Need a website?

I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.

Twitter Feed