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?”

 

34 Comments

  1. Posted November 30, 2009 at 6:21 pm | Permalink

    Thanks! Very useful!

  2. Posted November 30, 2009 at 8:05 pm | Permalink

    Informative.

    I liked the tutorial about making wizards instead of Forms. Thats a much needed one for my current development.

  3. Julio Cesar Fagundes
    Posted November 30, 2009 at 10:41 pm | Permalink

    Nice post man!

    Thanks a lot!

  4. Posted November 30, 2009 at 10:50 pm | Permalink

    Ditto @Veera – This is a great post, and that forms to wizard thing is so intuitive and awesome I can’t believe I haven’t seen it before. Thanks a lot.

  5. Posted December 1, 2009 at 1:37 am | Permalink

    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?

  6. Posted December 1, 2009 at 2:57 am | Permalink

    Very useful collection. Thanks

  7. Posted December 1, 2009 at 3:04 am | Permalink

    This is a nice post, very useful in my current project. Thanks a lot.

  8. Posted December 1, 2009 at 5:44 am | Permalink

    Thanks for the tutorial, very useful

  9. Posted December 1, 2009 at 6:29 am | Permalink

    wow… thanks for the tutorials. excellent info ;)

  10. mrashdi
    Posted December 1, 2009 at 7:38 am | Permalink

    nice tuts..by the way screen capture software did you use?

  11. Posted December 1, 2009 at 9:02 am | Permalink

    @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.

  12. Posted December 1, 2009 at 9:20 am | Permalink

    Its pretty good information. Thanks for such a effort.. Usability always shud be treated with every way possible for the user..

  13. Posted December 1, 2009 at 11:09 am | Permalink

    Wow, some nice techniques. I will have to go through and see which ones I would like to implement or try out.

  14. Posted December 1, 2009 at 12:11 pm | Permalink

    That’s the second jQuery compilation that I read from you and its awesome. I would definitely try the table sorting plugin in one of my comparison sites.

    With every new jQuery plugin I see I keep being amazed how powerful it is :)

  15. Posted December 1, 2009 at 12:12 pm | Permalink

    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.

  16. Posted December 1, 2009 at 1:39 pm | Permalink

    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).

  17. Jayman Pandya
    Posted December 1, 2009 at 1:41 pm | Permalink

    Amazing Post…

  18. Posted December 1, 2009 at 3:37 pm | Permalink

    Thanks for the post! I like a lot of them…might have to include them here soon! Thanks!

  19. Posted December 1, 2009 at 11:24 pm | Permalink

    Very useful websites and tutorials. Great post!

  20. Posted December 2, 2009 at 3:55 am | Permalink

    Wow. Thanks for having one of my posts on the lists. I should probably check the other sites as well. Pretty neat stuff.

  21. Posted December 3, 2009 at 2:05 am | Permalink

    thank you for this post. this is an excellent collection of tutorials. I will forward this post link to all of my coworkers :-)

  22. Posted December 6, 2009 at 8:04 am | Permalink

    These are great tutorials for building a useful website. Excellent collection. Thanks.

  23. Posted December 6, 2009 at 7:53 pm | Permalink

    nice post ! very useful tutorials…. thanks for sharing !

  24. Posted December 8, 2009 at 8:42 pm | Permalink

    thanks for sharing, I believe this will be usefull

  25. Posted December 11, 2009 at 12:33 am | Permalink

    I would fully agree, usability is often overlooked and it’s crucial to an effective website – this is a nice list of tips.

  26. Posted December 11, 2009 at 4:54 pm | Permalink

    Great tips. Most designers forgets about this, in my opinion, most important aspcect in new site design.

  27. Posted December 14, 2009 at 3:46 pm | Permalink

    Very useful list for novice webdesigners (like me ;-) . Thanks for sharing this.

  28. Posted December 14, 2009 at 4:51 pm | Permalink

    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.

  29. Posted December 17, 2009 at 10:31 pm | Permalink

    very nice and complete tips for us. as a sign of my gratitude i will digg it. keep the works!

  30. Posted December 26, 2009 at 4:56 am | Permalink

    This article very useful for me…thanks

  31. Posted January 14, 2010 at 4:43 pm | Permalink

    nice techniques . thank you

  32. Posted January 19, 2010 at 9:23 am | Permalink

    Very nice article. Much useful indeed!

  33. Posted February 7, 2010 at 1:21 am | Permalink

    Good list, but would be nice to see a few more that didn’t rely on javascript.

  34. Posted February 19, 2010 at 4:32 pm | Permalink

    Great read, thanks for posting :D

14 Trackbacks

  1. [...] 10 front-end techniques to improve your site usability Share and Enjoy: [...]

  2. [...] via catswhocode.com [...]

  3. By Tip to improve your sites usability | Ron Stalnaker on December 1, 2009 at 12:06 am

    [...] Check  This These Out Categories [...]

  4. By 10 techniques front-end d’utilisabilité web on December 1, 2009 at 12:51 pm

    [...] 10 outils et techniques pour améliorer vos front-end et augmentez l’utilisabilité web de vos… AKPC_IDS += "4027,"; [...]

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

  6. By links for 2009-12-01 « Köszönjük, Emese! on December 1, 2009 at 1:33 pm

    [...] 10 front-end techniques to improve your site usability (tags: usability jquery css webdesign tutorials javascript ui code) [...]

  7. By Daily Digest for December 1st on December 1, 2009 at 10:04 pm

    [...] 10 front-end techniques to improve your site usability [...]

  8. By links for 2009-12-01 | Digital Rehab on December 2, 2009 at 2:37 am

    [...] 10 front-end techniques to improve your site usability (tags: usability jquery css webdesign javascript) [...]

  9. By links for 2009-12-01 « Mandarine on December 2, 2009 at 6:10 am

    [...] 10 front-end techniques to improve your site usability (tags: webdesign webdev tutorial usability ajax ux calendar) [...]

  10. By FAQPAL Blog on December 4, 2009 at 4:44 pm

    [...] @catswhocode 10 front-end techniques to improve your site usability 10 front-end techniques to improve your site usability [...]

  11. [...] 10 front end techniques to improve your site usability [...]

  12. By Serious Monday Roundup #20 on December 7, 2009 at 9:01 am

    [...] 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. [...]

  13. [...] Who Code – 10 front-end techniques to improve your site usability: Apanhado de artigos sobre técnicas de usabilidade utilizando jQuery, CSS e outras [...]

  14. By Appunti di storie di web » links for 2009-12-15 on December 16, 2009 at 1:09 am

    [...] 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) [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Smashing Network
WordPress Appliance - Powered by TurnKey Linux