Web International Awards

payday loan


NOV 2009 2

How to properly design your links

I have seen a lot of poorly designed websites. One aspect that makes me say that a website is poorly developed is how links are designed and how one can interact with a link across a website. First of all, we click on links with the mouse pointer, which points to a precise and small location. Secondly, what if someone uses a mobile platform like the iPhone or the Android? If your link is small enough, people browsing the site with a mobile device may have some serious issues navigating through your website.

Fixing the issues

The first thing you should do is set display inline to your links - display block won't work because text will not flow naturally after the link. Next step is to add a few pixels of padding to your link. Perhaps 2 pixels top and bottom and 3 or 4 pixels on the sides would do just fine and make your links better.

Now, if you don't think doing so will improve your site just make two links ( one as described above and one however you usually do ) and ask some non technical person to click the links - embed those links in a decent text paragraph.

Some examples

nyromodal screenshot

Furthermore, to backup my idea, here are some perfectly good examples. Thickbox has a small text link in the bottom right corner. It does have an extra feature: the modal window can be closed by pressing the esc key. Without the escape key Thickbox would be really hard to close on a mobile platform. How precise can you in clicking small "close" text links? Facebox is better than Thickbox as it has a close button which is decent, big enough. NyroModal has a tiny X button which I have trouble clicking on my iPhone. Fancybox also has an X button which is a bit bigger than the one used by NyroModal and which works somewhat better.

fancy menu screenshot

A really good example would be a close button that would resemble the one I have designed for the sliding menu with modal windows, which was published a while ago over Freelancer Magazine (NOTE: I don't want to brag about the menu tutorial, its just that it was the example that came in mind. If you know any other modal window plugins that have proper close buttons let me know).

If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

Published on Monday, November 23rd, 2009 at 3:12 pm in usability.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
  1. designfollow says: November 24th, 2009 at 3:22 am

    thank for this great post

  2. admin says: November 24th, 2009 at 2:38 pm

    And thank you for tuning in!

Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.

If you do not have a username, you can register in just a few clicks.