10 front-end techniques to improve your site usability

by Jean.

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

CWC Special Deal!

Get one year of quality hosting + domain from A Small Orange for only $40 with our exclusive deal!

Featured WordPress Theme

Extra - Elegant magazine-style WordPress theme

  • Pingback: 10 front-end techniques to improve your site usability | Webs Developer()

  • http://www.christiandesigns.net63.net Paul Sanduleac

    Thanks! Very useful!

  • http://veerasundar.com/blog Veera

    Informative.

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

  • Pingback: 10 front-end techniques to improve your site usability - Ids & Classes()

  • Julio Cesar Fagundes

    Nice post man!

    Thanks a lot!

  • http://randrewgillette.com Andy Gillette

    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.

  • Pingback: Tip to improve your sites usability | Ron Stalnaker()

  • http://australiagreyhoundracing.com/blog/ Matt Burgess

    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?

  • http://darshana4it.com/ Darshana Gunawardana

    Very useful collection. Thanks

  • http://www.webmediabuilder.com webbie

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

  • http://outwestauctions.com brightsoni

    Thanks for the tutorial, very useful

  • http://www.honourchick.com/blog honour chick

    wow… thanks for the tutorials. excellent info 😉

  • mrashdi

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

  • http://www.wprecipes.com Jean-Baptiste Jung

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

  • http://sadiq.in Sadiq

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

  • http://www.serradinho.com George Serradinho

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

  • http://www.sravni-hosting.com/ Сравни Хостинг

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

  • http://www.petmedsreviews.com Jack Courtney

    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.

  • Pingback: 10 techniques front-end d’utilisabilité web()

  • Pingback: খবরাখবর: ডিসেম্বর à§§ « পিএইচপি, বাংলায়()

  • Pingback: links for 2009-12-01 « Köszönjük, Emese!()

  • http://twitter.com/rokmejak Rok Mejak

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

  • Jayman Pandya

    Amazing Post…

  • http://michael.theirwinfamily.net Michael

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

  • Pingback: Daily Digest for December 1st()

  • http://www.webdevtuts.net/ Marcell Purham

    Very useful websites and tutorials. Great post!

  • Pingback: links for 2009-12-01 | Digital Rehab()

  • http://pinoytech.org Thorpe Obazee

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

  • Pingback: links for 2009-12-01 « Mandarine()

  • http://www.imagineboris.com Boris

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

  • Pingback: FAQPAL Blog()

  • http://www.techsuperb.com/ Ashok

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

  • http://www.designstudio16.com saurabh shah

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

  • Pingback: Notable Tech Posts – 2009.12.06 | The Life of Lew Ayotte()

  • Pingback: Serious Monday Roundup #20()

  • Pingback: Tutoriais, artigos e referências 06/12 | Leandro Rodrigues()

  • http://www.phonello.com/ Antony

    thanks for sharing, I believe this will be usefull

  • http://www.webassist.com Jon Crim

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

  • http://www.tense.pl Tense

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

  • http://www.dms-lodz.com.pl DMS

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

  • http://www.geniustablet.com Mike Portson

    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.

  • Pingback: Appunti di storie di web » links for 2009-12-15()

  • http://www.dellseriousbusiness.com tommy

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

  • http://www.camp26.biz Eko Setiawan

    This article very useful for me…thanks

  • http://www.denbagus.net denbagus

    nice techniques . thank you

  • http://www.dineshr.com Dinesh

    Very nice article. Much useful indeed!

  • http://www.codesquid.co.uk Codesquid

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

  • http://junkiee.net Nina

    Great read, thanks for posting 😀

  • Pingback: 25 handige webdesign artikelen • STATE OF_()

  • Pingback: Fábio Caparica » del.icio.us entre 04.11.2009 e 08.04.2010()

  • http://neoprenedogboots.com Ismael Senato

    Thanks for your ideas. I do like using ajax as it makes the site much more useable.

  • http://theneworder.net Jon

    I love the ajax stuff you posted!

  • http://www.youtube.com/watch?v=x5fWPcmo6uk Jamie

    This is so nice. I really appreciate your effort for incorporating this list. Thanks for sharing.

  • ggg

    4545432154452312312313531231……….:)(;