But as a designer, I need to know the full range of options — and limitations — I have at my disposal when building a design for a client. jQuery presents some amazing options for design. If I want to be at the top of my field, I felt I needed to push myself out of my box and learn what the heck this whole jQuery thing is all about.
Now, take a step back and don’t freak out (deep breaths!). As I’ll demonstrate, you don’t need to know what all that techie stuff is to understand how jQuery can make your designs more interactive and exciting.
Why do I need to know about jQuery?I know there will be some folks who adamantly disagree with me, but jQuery is the future. More importantly, jQuery gives you a whole new set of design tools that you should be aware of as a designer. If you don’t know about certain capabilities, you’ll never use them. jQuery puts a whole new set of visual opportunities on the table.
At a minimum, as a designer, you need to know WHAT options you have for bringing your client’s vision to life. If you know HOW to implement something like jQuery, you become that much more valuable.
What can jQuery do for my designs?Plenty. From typography upgrades, to image galleries, to beautiful comment forms — jQuery already has thousands of pre-built, ready to go resources that can dramatically improve how your designs look and feel.
Once you know a little bit about jQuery, your design options will explode. You may find that the technology is very easy to work with and create your own code. At the least, you can start looking for design tools you may have completely left unexplored.
How hard is it to implement jQuery?It’s actually very easy, but you have to start off the right way. I’ll explain as if you’ve never worked with HTML before. You can copy and paste this code into a text editor and save it as a .HTML file and it will open in a browser. Save your file with the file name “example.html”, just so you and I stay on the same page:
Now this is as basic as it gets, and I’m sorry for the designers out there already pretty comfortable with HTML. It gets better pretty quickly.
Now in the section of the HTML document, we're going to implement jQuery with this simple code (highlighted for emphasis):
A couple of important points here. First of all, I’m referencing a document hosted by Google. You can download that file and host it on your website, but my preference is to let the big companies host these files and keep the pressure off of my server. You may want to reference somebody other than Google. Two other popular sources for the file are Microsoft and Media Temple. These files are on what are referred to in the developer community as Content Delivery Networks (CDN) and these files are available for public use.
So let’s test this out to see what’s going on. If you’ve never delved into the depths of developing for the web, this is going to be an exciting moment for you. The new code is highlighted:
Look, Ma! No pop-ups! This is because you didn’t call the jQuery that tells the browser that the alert box should open up. Delete out the comments or just paste the code from example #2 above so you have the jQuery code reference as needed.
So I made a pop-up. Now what?Yeah, so the pop-up example is super-simple, but if you have never gone through the steps of implementing jQuery on your own, this is a HUGE leap for you. So don’t downplay it too much, although you can feel free to make fun of my pop-up all you want.
The next thing to do is find the jQuery you want to implement. Options abound! Based upon your needs, you can find all kinds of fancy effects to apply to your web pages.
Can you show me how to implement a jQuery plugin?Sure! I’ll walk you through just one example using one of my (new) favorite jQuery plugins — Lettering, by Davatron5000.
First, you need to download the jQuery code which will almost always be a .JS file, like the “jquery.min.js” in our above examples. You can download Lettering.js from Github. Copy the code into a blank text document and save it as Lettering.js in the same folder as your example.html file.
Second, add the script from Davatron5000 to the above example #2 code:
So let’s slow down a bit. In the fifth line from the top we’ve referenced your new Lettering.js file. You can put this file on your web server and reference it directly at some point.
Next we see our script. I called this little beauty “triple_threat” because I am going to break the typography into three lines. Lettering.js can do a lot of amazing stuff, including automatically break every letter down into its own CSS class so you can manipulate each and every letter very easily.
Instead of going through the motions of each letter, I just want three lines. To do this, I referenced the code “lettering(‘lines’) as you can see on line eight. You can also break each letter down by leaving the code blank — .lettering();. Or, by using ‘words’ you can have it automagically break each word down.
Just to make sure we are on the same page, the contents of your folder should look like this:
Now that Lettering.js has used jQuery to break down the lines of HTML, we need some CSS to work our magic. Add this code to Example #5 from above:
What we now have are some CSS classes. You can reference the “triple_threat” class and see the results. So let’s add the class to our example.html. Remember, we need three lines, so we will use the
tag to create those. For those brand new to HTML, I know this is a lot of information, but just copy and paste for now and research these concepts later if you need to.
I consolidated the CSS to save space and added the “triple_threat” paragraphs. The results aren’t stunning, but if you’ve successfully transformed the characters, then you’ve implemented jQuery!
I’m hooked! Where can I find more information?!I’m glad you asked. The primary source for the code side of jQuery is over at jQuery.com.
For jQuery plugins you can use today, check out these resources:
An Introduction to jQuery for Designers Reviewed by Aamir Pathan on 1:56 PM Rating: