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.
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.
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.
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.
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.
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.
0 comments:
Post a Comment