Improve Website Usability Using jQuery, HTML5, And CSS3


Remember back when if you wanted to add interactivity to your site to improve the UX aspect to make it more appealing to visitors, you had to immediately go to a flash outlet? Well that sure does seem like a long time ago now, surprisingly so because it was just a few short years ago. The decline of Flash use for these instances can be credited to advances in web technologies such as HTML5, CSS3, and jQuery. These advancements have made the use of Flash in most cases an outdated and inefficient method of tackling interactivity in a website. That is why in this article, we’re going to take a look at HTML5, CSS3, and jQuery tutorials, techniques, and resources that can replace aspects of a website where the use of Flash was the dominant and most practical option.


Pretty Checkboxs with jQuery

This is a cool tutorial that teaches you how to turn your ordinary check boxes into something stylish, and quite fun to use.

Pretty Checkboxes with jQuery

Rethinking Forms in HTML5

This is a great tutorial by the people at Nettuts+ about how you can get the most out of HTML5 for your fomrs.

Rethinking Forms with HTML5

jQuery Impromtu

jQuery Impromtu is a great replacement for alerts, prompts, and confirmations that users will enjoy and not find annoying in the slightest.

jQuery Impromptu

jQuery Simple Modal

Simple Modal is a flexible modal dialog framework which provides a great interface for development, allowing for some really nice looking forms too.

jQuery Simple Model


This multi-column drop down layout is great for giving users a detailed tree of options to select from.


jQ Transform

jQ Transform is a great tool for adding some style to your forms, giving them cool skin elements.


Emblematiq Niceforms

Niceforms by Embematiq is a cool jQuery plug-in that allows you to turn your boring forms into something cool with one of their designed themes, or with your own custom made one.

Emblematiq Niceforms


Uniform masks your standard forms with custom skins and works in perfect sync with your real form elements, ensuring great accessibility and compatibility.


Image Buttons a Part of Input Fields

This is a great tutorial to learn how to have image buttons inside of your input fields.

Images As Apart of Input Fields

DynamicWP Contact Form

This is a great WP plug-in that gives you a contact form that slides conveniently from the side of the page, and then back once it is no longer of use.


DynamicWP Contact Form

jQuery Highlight

jQuery Highlight is a great jQuery feature that gives your active input fields a highlight over them, as we know some users need all the extra guidance they can get.

jQuery Highlight

jQuery inline form Validation

jQuery inline form Validation is a cool hassle free form validation option that takes away the mess that is usually associated with this form feature.

jQuery inline from Validation


White Smoke Menu Style

This jQuery powered navigation menu is very reminiscent of what was usually done in flash, and moves so smoothly you might think it was. It is fully browser compatible, and even maintains functionality if Javascript is turned off.

jQuery White Smoke Menu

jQuery mb.Menu

This jQuery menu plug-in is a great option to look into when aiming to build a complex multilevel tree menu with some style and great functionality.


Coda Slider

Coda Slider is a very versatile and feature full panel slider. It comes as is very well suitable for your panel slider needs, and there have been great advancesin how to better it.

Coda Slider

 ID Tabs

This is by far the best tabs and/or panel navigation jQuery plug-in when level of how extensibility is concerned.

ID Tabs

Smooth Horizontal Sliding Menu

This is a cool tutorial that teaches you how to make a jQuery powered menu with the sub entries sliding out horizontally.

Horizontal Sliding Menu

jBreadCrumb Menu

This collapsible bread crumb menu that collapses based on the the amount and length of the elements in the set.



FLOWERNAV is a cool animated navigation plug-in that, well gives a flower effect to your link.


jQuery Accordion

This is an easy to follow jQuery accordion style navigation menu tutorial.

Accordion Style Menu


jQuery Slide Note

Slide Note is a great plugin for giving your visitors a little hint, or note about something on your website.

Slide Note

jQuery Page Peel

Page peel is a simple to use jQuery plug-in that is great when you want to advertise something in a cool way.

jQuery Page Peel

jQuery InfiniScroll 

InfiniScroll is a cool plug-in that allows for an never ending scrollable section. This is great for websites that have sections with long lists.

jQuery InfiniScroll

jQuery SliderNav

SliderNav is a jQuery plug-in that allows you to incorporate dynamic vertically sliding content to your website.


jQuery Tipped

Tipped is a cool plug-in that easily allows you to add tips to your website’s content, there are also cool skins to choose from.



Supersized is a jQuery plug-in that allows you to have a image slideshow as your website’s background.

jQuery Supersized


Imagin8 is not just another jQuery image slider. This one allows for you to direct a path folder, so ALL THE IMAGES DON’T HAVE TO BE IN YOU HTML! Just label your first image as 1.jpg for example, and the following the numerically after that, and they will be automatically added to your slideshow. Great for clients.


jQuery Lettering

Lettering is a jQuery plug-in that allows you to have complete control of  every letter, opening for great creative web typography experimenting.

jQuery Lettering

jQuery Stylesheet Switcher

Stylesheet Switcher is a jQuery plug-in that lets you set links within your page to change to different stylesheets.

jQuery Stylesheet Switcher


Flip is a jQuery plug-in that lets you flip your web elements in one of four directions.



AwesomeWeb is Awesome!

Andreas W.

Submitted 9:02 AM .Oct 16, 2014

Hi Nick. If you have work that needs to be done, send me an email. I am glad to help out. AwesomeWeb already helped me to earn an awesome 3,700 dollars since the start.;) ... yeah farewell Elance!


  1. Donny

    Thank you for this amazing list. I have noticed many people are using jQuery and HTML5 plus CSS3, so this way I can take a better look and learn some more. If we’re not keeping up with the progress, we’ll be left behind ;)

    • Wow, thank you for thinking my list is amazing. Truly flattered and appreciate that Dojo :). Yeah its been a slow moving train seemingly forever now, but it gained a lot of steam last year. Gotta keep up to keep working, but isn’t that why you gotta love our field? :)

  2. Kerr Hutchinson

    Great list of jquery add ons. I love the form ones as that is usually such a hard part of the site to really make look nice and modern.

  3. Great article man! I am also a web designer based in the US. I absolutely agree that flash is on a fast decline, and its scary that I even considered to start learning it! But with the awesome jQuery and HTML5, these options are better. I am really fascinated by the user models that jQuery can do. Got to look more into that.

    • You should, they offer great possibilities. Flash is only essential to know in certain instances, for the most part in web design/development when regarding UX its not so important.

  4. Fab post Jamal, I know a lot of people think it’s too soon to jump on the HTML5/CSS3 train, but I personally couldn’t wait to get started with it. jQuery is the thing I’m focusing on at the moment though – I love how user-friendly it is. Thanks for the links, I’ve bookmarked this post for future reference!

    • Thanks for liking my post Jenni :). As soon as I found a way for older IE browsers to accept HTML5 tags, last year or so I think, I moved right into HTML5 and CSS3. I love jQuery too, and much prefer coding in it than Actionscript.