I found approaching jQuery to be an intimidating experience because
I’m not a developer. Implementing JavaScript was what “they” did on the
back-end of a website, but had little to do with my process when
creating a design for a website.
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.
What is jQuery?
In short, it’s a library of code that lets you tell web browsers how
to do fancy stuff. The less short, and more technical, description is
that jQuery is a JavaScript library that makes it easy to quickly
implement AJAX, CSS, and other web technologies with consistent results
across browsers — even mobile browsers.
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:
3 | <title>jQuery for Designers</title> |
6 | Lots of insightful stuff here. |
jQuery example #1
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):
3 | <title>jQuery for Designers</title> |
9 | Lots of insightful stuff here. |
jQuery example #2
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.
Getting to the code, all we have done is told the browser to run the
JavaScript. You won’t see any changes to your web page if you copy and
paste this into a new document. Not yet at least.
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:
3 | <title>jQuery for Designers</title> |
6 | <script type="text/javascript"> |
7 | $(document).ready(function(){ |
8 | alert("I made a jQuery!"); |
14 | Lots of insightful stuff here. |
jQuery example #3
Paste this into a blank document, save it as an HTML file, and open
it in a browser. You’ll get a nice pop-up with the “I made a jQuery!”
message. To prove that this is in fact a simple jQuery implementation
and not just JavaScript, comment out the jQuery script and run the
same code:
3 | <title>jQuery for Designers</title> |
7 | <script type="text/javascript"> |
8 | $(document).ready(function(){ |
9 | alert("I made a jQuery!"); |
14 | Lots of insightful stuff here. |
jQuery example #4
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:
3 | <title>jQuery for Designers</title> |
6 | <script type="text/javascript" src="Lettering.js"></script> |
8 | $(document).ready(function() { |
9 | $("#triple_threat").lettering('lines'); |
16 | Lots of insightful stuff here. |
jQuery example #5 — adding Lettering.js and calling the ‘lines’ function
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:
3 | <title>jQuery for Designers</title> |
5 | <script type="text/javascript" src="Lettering.js"></script> |
7 | $(document).ready(function() { |
8 | $("#triple_threat").lettering('lines'); |
12 | <style type="text/css"> |
15 | text-transform: uppercase; |
23 | text-transform: lowercase; |
32 | text-transform: uppercase; |
41 | Lots of insightful stuff here. |
jQuery example #6 — adding CSS
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.
3 | <title>jQuery for Designers</title> |
5 | <script type="text/javascript" src="Lettering.js"></script> |
7 | $(document).ready(function() { |
8 | $("#triple_threat").lettering('lines'); |
11 | <style type="text/css"> |
12 | #triple_threat
.line1{font-size: 38px; text-transform: uppercase; display:block;
text-align:center; letter-spacing: 8px; } #triple_threat
.line2{font-size: 21px; text-transform: lowercase; font-style: italic;
display:block; text-align:center; margin-bottom: 6px; } #triple_threat
.line3{font-size: 13px; text-transform: uppercase; display:block;
text-align:center; line-height: 24px; } |
17 | <p id="triple_threat">Lots of insights!<br /> |
18 | I wouldn't go so far as to say "genius".<br /> |
19 | But you can say that if you really want to.<br /> |
jQuery example #7 — implementing the jQuery
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:
No comments: