We often talk about how to make our websites more usable, whether it’s tweaking the HTML structure of pages to benefit the user’s process or figuring out how best to display a message via CSS. But we never bring this thought process into our jQuery-based (and other JavaScript-based) elements. How can we enhance the user experience and usability of our jQuery events?

Below, we’ll briefly discuss ways to look at the code and the result of our interactive designs and, thus, improve their usability. Most if not all jQuery is fired through events from the user, whether it’s loading new content, posting forms or simply modifying the presentation of an item. Such events are fired through a click from the user.

Read my article on how to make your interactive design and jQuery more usable at Smashing Magazine.

Being in the web industry, we can never really say we know it all. New technologies are developed and released, new design trends are created, followed and therefore requested from clients. That is why it is important for us as developers and designers to constantly look how to improve our knowledge and skill sets.

Moving forward I will be scheduling time every week to each of the following subjects – much like a revision time table, except there are no exams at the end.

JavaScript/jQuery

As my header clearly states, I have a large passion for jQuery — the effects that can be created and the fact that it is so easy to pick up and use. However, my knowledge doesn’t go much further than the simple to implement effects. I need to do more reading up and applying more complex jQuery functions to my websites.

On top of this, I want to get a step further and learn more core JavaScript. As Stuart Langridge rightly stated at a FOWD workshop I attended, “If you are serious about  car racing, you need to know what is under the hood of the car to gain a full understanding of driving the car” (or something along those lines). So even though you might know the in’s and out’s of jQuery, extending your knowledge into core JavaScript can really benefit the effects you want to create with jQuery.

Usability/User Experience

Since starting my job, I have been conscious on how to progress my coding skills in order to give users a more user friendly experience, and also increase the accessibility of the websites. Having recently written an article for Smashing Magazine, ‘Usability Review of Charity Websites Taking the Lead’, has sparked a further interest in this subject.

There is talk within my work that I will be doing more Information Architecture work and helping make the websites we build more usable. I will also have the chance to over look some user testing soon, which as odd as it sounds, I am really looking forward to.

.NET

Working for a company which uses .NET technologies for all of their websites means I am surrounded by ASP.NET code day in and day out. Over these 2 years I have become confident in working around this code and manipulating it to render HTML will can easily be styled and suit the designs.

However I have a yearning to take this a step further and be able to create my own web applications. With phrases such as ‘Data Access Layer’ flying around the room, it is hard not to be intrigued and confused at the same time!

Luckily though, having a room full of .NET developers around me, and a tonne of books, I should have the resources available to me to become much more confident with .NET and not have to ask for help every time I hit a brick wall.

PHP

PHP was one of the first internet technologies I was exposed to, along with HTML and CSS. This, with my constant use and exposure to WordPress, has made me want to develop my PHP knowledge. Though this is lower down on my priorities, it definitely would benefit me as a developer in the long run – becoming more well rounded and having more exposure to different technologies cannot be that harmful, can it?

The benefits of having friends such as Jem and Amelie also means I have 2 very talented PHP developers at hand to rack their brains if needed.

Design

When I was first introduced to the web industry, I always had an interest in design, this is still the case and is also why I always put a lot of effort into the presentation of my front end development. Making my templates pixel perfect using semantic and valid code is something I aspire to all the time.

The reason I did not pursue a web design role rather than development was down to, like Stuart, the ability to churn out new and fresh designs day in and day out.

Even though I am no longer looking for a web design role, my interest in design has continued and thus led me to run a fairly successful CSS gallery, CSSbake. Having recently redesigned CSSbake along with Melissa, I have found the joy in designing for myself again and blown the dust and cobwebs off Photoshop.

The plan for the near future is to work on designing and developing free WordPress templates and Mint themes (one of which is nearly finished) to make available for download. So watch this space!

After implementing their code, I still felt it was lacking slightly. Therefore I decided to develop the code further to give a cleaner finish and put jQuery’s animation to good use.

I felt the code should, once a thumbnail is clicked:

- Fade out the existing enlarged image

- Change the src attribute of the enlarged image

- Amend the alt and title values of the enlarged image (based on the alt of the thumbnail)

- Remove class="current" from all thumbnails and add to the click thumbnail

- Fade in the new enlarged image

For added effect, in the demo I have including a loading graphic which is displayed when the enlarged image is faded out. This is achieved by adding a background image to the enlarged image’s div

This may seem like just another Image Replacement Gallery script, but it can act as a great building block for more complicated galleries and once that I use often on my own projects.

View the finished code below or try out the demo.

The Code:

$(function() {
	// When a thumbnail is clicked
	$(".gallery .thumbnails a").click(function() {
		// Get enlarged image attributes
		var largeImg = $(".gallery .feature img");
		var largeImgPath = $(this).attr("href");
		var largeImgTitle = $(this).children("img").attr("alt");
		var largeThumbnail = $(this);
		// Fade out enlarged image
		$(largeImg).fadeOut('slow', function() {
			// Change the attributes of the enlarged large image
			$(largeImg).attr({ src: largeImgPath, alt: largeImgTitle, title: largeImgTitle }).load(function() {
				// Once image is loaded:
				// Remove class="current" from all thumbnails and add to clicked thumbnail
				$(".gallery .thumbnails").children().removeClass("current");
				$(largeThumbnail).addClass("current");
				// Fade in enlarged image
				$(largeImg).fadeIn('slow');
			});
		});
		return false;
	});
});