It may sound stupid to say that, but the ability to link is one of the best features of the web. It is then really important to make your links display as convenient for use as possible. In the following collection you’ll find some tips to make your links better looking and more usable.

1. Display filetype icons

If you are linking directly to a file, why not let your users know about it? I’m always terribly annoyed when Acrobat launches by surprise. One way many thoughtful web writers deal with this issue is by adding (PDF) after the link. It would be even better if you used the proper CSS technique that does it automagically! Web-kreation has a good explanation on how to do that.

filetype icon example

2. Show the target page’s language

Are you often linking to websites written in another language than yours? If it’s the case, you should consider using pseudo-classes to display a little notification for the link’s language. It can be either a little country flag or a bracketed abbreviation of the language [en]. I would recommend not to use country flags for this, it can be misleading or hurt some national sensibilities. My country, Switzerland, is a very good example for that. Linking to a Swiss page with a French or German flag would be inappropriate. Even for English, which flag would you use? American, British, Autralian,…?

If you still want to use this technique, here is a tutorial.

language flag

3. Highlight microformats with CSS

Highlighting the microformatted informations allows you to give a better view of your contact and personal information. It is definitely a good way to improve the usability of your website and to get more people contacting you.

Discover how to highlight your microformats on Hicksdesign.

microformats links

4. Display an icon for external links

When browsing a website and clicking on links, I’m always thankful to webmasters that tell me whether I’ll be leaving their website or not. It is a nice way to indicate your website’s visitors where they are going.

Learn how to do this

external links

5. Tooltips

Tooltips give more information to your website visitor about the link they are hovering. Most tooltips tutorials will use javascript, but did you know that you can create them with pure CSS? It is actually quite simple, as you’ll see on this page.


6. Learn to style visited links

I never know how to style visited links on the websites I design, this article gives some good ideas on how to do it.

visited link

7. Better link display on printed web pages

Linking isn’t limited to the online world, your links should also be visible on the printed version of your website. The most common way to achieve this with CSS is to display the URL next to the link text. Read this article to learn how.

There is however an even better way to display the links on a printed page, list them as footnotes. This article on A List Apart will teach you how, but it does take some scripting to achieve it.


8. Image replacement for submit button

It’s quite easy to customize your submit button with simple CSS, but replacing it by an image will let you integrate the button more.

image replacement

About the Author

author photo

Mirko Humbert

Mirko Humbert is the editor-in-chief and main author of Designer Daily and Typography Daily. He is also a graphic designer and the founder of WP Expert.