10 front-end techniques to improve your site usability

by Jean-Baptiste Jung. 53 Comments -

Usability is a very important part of website building. Sadly, this is often neglected by designers and developers. In this article, you’ll find 10 great techniques that you should definitely implement into your website.

YouTube-like adaptable view using jQuery and CSS

Youtube has several very cool functions for users; the one which allow’s you to switch from normal view to wide view is definitely a must. In this detailed tutorial, Janko will show you how to implement a similar functionality into your website.

» Read tutorial

Nicer dates/times with the CuteTime jQuery Plugin

Do you really like the “posted X minutes ago” date formats as seen on Twitter? Although I’d rather use some server-side scripting to format the dates, this jQuery plugin is pretty cool and extremely easy to implement on your website.

» Read tutorial

Turn forms into a powerful wizard using jQuery

Forms are extremely important on the internet, because it is the way visitors can interact with the site owner. But most of the time forms are very boring for visitors.
Using this nice tutorial written by Janko, you’ll learn how to turn a boring and long form into a user-friendly wizard.

» Read tutorial

Add Icons to External Links with Mootools and CSS

A trend going around on websites is putting icons on links that point to web pages externally. A very simple tip to implement, but a real usability enhancement for your visitors.

» Read tutorial

Flexible Client Side Table Sorting With jQuery

Last week I showed you how to create advanced HTML tables using PHP and MooTools. This tutorial, which uses jQuery, will show you how to easily create sortable HTML tables.

» Read tutorial

Learn how to AJAXify Comment Forms

I have never been a fan of video tutorials, but I was very happy to come across this one some time ago. In this screencast, Jeffrey Way from Nettuts will show you how to “Ajaxify” your blog comments form. It is recommended to any WordPress blogger!

» Read tutorial

Create astonishing iCal-like calendars using jQuery

Do you, like many other people, love Apple’s cool and functional design? If you answered “yes” to the previous question, there’s no doubt that you will enjoy this tutorial about creating an “iCal-like” calendar for your website.

» Read tutorial

Build a Simple Password Strength Checker

Despite all hacking attempts and well known security problems, most random internet users are still using passwords such as secret or admin. So, how about helping your users by telling them that their password is strong enough.

» Read tutorial

Favorite Rating with jQuery and Ajax

A very cool way to interact with your visitors is to implement this “I love this” code, which will enable your visitors to let you know that they liked a post of your blog with a single click.

» Read tutorial

Advanced CSS Printing Using CSS Page Breaks

Although printing web pages is bad for the environment, many internet users have the nasty habit to print pages to read them later. Although, sometimes printing a page is very useful; for example you may want to print your invoice after ordering a product online.
Printing is often neglected by designers and developers, and this is a bad thing. Using CSS, you can definitely make your website printer-friendly. Just read this excellent tutorial from David Walsh to find out!

» Read tutorial

Have fun with all those cool techniques. I hope it will help you to build even better websites. By the way if you’re into WordPress, I just published a very cool hacks list for Thesis on Cats Who Blog, so you might want to check it out. Also, have you grabbed your copy of the excellent book “Digging into WordPress?”

Comments (53) - Leave yours

  8. Matt Burgess said:

    Interesting to read your opinion on external link icons that they are “a real usability enhancement for your visitors”. To me it’s always rather been a distraction to the text, and something that breaks the “flow” for your reader?

  14. Jean-Baptiste Jung said:

    @Matt Burgess : Yes, I think those icons are better than the “target=blank” attribute, and let the visitor know when he’ll leave the site.

    @mrashdi : I just used the default Mac OS X screenshot app.

  18. Jack Courtney said:

    I find icons very useful as a reader or visitor of a particular blog. Actually, I do check those icons most of the time cause I know that the blog owner won’t create an external link if not needed.

  20. খবরাখবর: ডিসেম্বর ১ « পিএইচপি, বাংলায় said:

    [...] দিন নিয়ে * ক্যাটসহুকোড এ ওয়েব সাইটের ইউজেবিলিটি বাড়ানোর ১০টি চমৎকার টিপস নিয়ে লেখা হয়েছে * ওপেন অ্যাট্রিয়াম – [...]

  22. Rok Mejak said:

    I think you have spend lot of nights to collect and summarize this awesome collection of tutorials. Really thanks for great collection as well as your hard work(specially).

  35. Serious Monday Roundup #20 said:

    [...] 10 front-end techniques to improve your site usability – Usability is a very important part of website building. Sadly, this is often neglected by designers and developers. In this article, you’ll find 10 great techniques that you should definitely implement into your website. [...]

  41. Mike Portson said:

    There are very nice tips. I like when someone more experienced shows the less experienced users how to do things. Sometimes this can be really helpful and I also think that giving something from yourself to another human being without any charge is great. Keep up the good work.

  42. Appunti di storie di web » links for 2009-12-15 said:

    [...] 10 front-end techniques to improve your site usability Usability is a very important part of website building. Sadly, this is often neglected by designers and developers. In this article, you’ll find 10 great techniques that you should definitely implement into your website. (tags: frontend front-end jquery usability ux tutorials) [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!