Improve Website Usability Using jQuery, HTML5, And CSS3

Posted in Tools, Usability, Web Design2 years ago • Written by 9 Comments

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.

Forms

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

mcDropdown

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

mcDropdown

jQ Transform

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

jqTransform

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

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

Uniform

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

Navigation

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.

mb.Menu

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.

jBreadCrumb

jQuery FLOWERNAV

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

FLOWERNAV

jQuery Accordion

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

Accordion Style Menu

Interface

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.

SliderNav

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.

Tipped

Supersized

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

Imagin8

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.

Imagin8

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

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

Flip

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

34 Written ArticlesWebsiteGoogle+

I code, write, and stuff at Five Alarm Interactive. Tweet me: @5alarmint.

9 Comments Best Comments First
  • Samuel

    Friday, November 11th, 2011 17:09

    2

    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.

    +1
    • Jamal

      Saturday, November 12th, 2011 21:18

      8

      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.

      0
  • Jenni

    Friday, November 11th, 2011 19:26

    1

    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!

    0
    • Jamal

      Saturday, November 12th, 2011 21:13

      6

      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.

      0
  • Donny

    Friday, November 11th, 2011 17:55

    4

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

    0
    • Jamal

      Saturday, November 12th, 2011 21:14

      7

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

      0
  • Kerr Hutchinson

    Friday, November 11th, 2011 17:19

    3

    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.

    0
  • Chavon

    Saturday, November 12th, 2011 06:18

    5

    Thank you for such a wonderful post! Very useful. You rock!

    0
  • vikrant

    Tuesday, November 15th, 2011 22:17

    9

    you have solved my many problems, keep on updating more effects thank you this stuff…

    0
  • vikrant

    Tuesday, November 15th, 2011 22:17

    9

    you have solved my many problems, keep on updating more effects thank you this stuff…

    0
  • Chavon

    Saturday, November 12th, 2011 06:18

    5

    Thank you for such a wonderful post! Very useful. You rock!

    0
  • Donny

    Friday, November 11th, 2011 17:55

    4

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

    0
    • Jamal

      Saturday, November 12th, 2011 21:14

      7

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

      0
  • Kerr Hutchinson

    Friday, November 11th, 2011 17:19

    3

    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.

    0
  • Samuel

    Friday, November 11th, 2011 17:09

    2

    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.

    +1
    • Jamal

      Saturday, November 12th, 2011 21:18

      8

      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.

      0
  • Jenni

    Friday, November 11th, 2011 19:26

    1

    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!

    0
    • Jamal

      Saturday, November 12th, 2011 21:13

      6

      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.

      0

Comments are closed.

54.205.175.144 - unknown - unknown - US