An Introduction to jQuery for Designers

Tara Hornor

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:

<html>
<head>
<title>jQuery for Designers</title>
</head>
<body>
Lots of insightful stuff here.
</body>
</html>

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

<html>
<head>
<title>jQuery for Designers</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

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:

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
alert("I made a jQuery!");
});
</script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

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:

<html>
<head>
<title>jQuery for Designers</title>

<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->

<script type="text/javascript">
$(document).ready(function(){
alert("I made a jQuery!");
});
</script>
</head>
<body>
Lots of insightful stuff here.
</body>
</html>

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:


<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});

</script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

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:

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});
</script>

<style type="text/css">
#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;
}
</style>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

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.

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});
</script>
<style type="text/css">
#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; }
</style>
</head>
<body>

<p id="triple_threat">Lots of insights!<br />
I wouldn't go so far as to say "genius".<br />
But you can say that if you really want to.<br />
</p>

</body>
</html>

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:

Welcome to the world of jQuery, you savvy designer, you! Be sure to let me know what jQuery plugins become your favs!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.my-rellies.com John Dobson

    jQuery specifically and JavaScript in general suffer from one major drawback from the perspective of a web designer – in the main the data they manipulate, including menu and hyperlinks are unavailable to search-bots and therefore harm SEO.

    So a super sliding AJAX menu will not provide page links for search engine ranking.

    • Herbert Peters

      Really?

      Use another menu library. Most menu implementations using jquery are built on using a simple list. So even if Javascript is off, those lists will be displayed as a plain list.

      And responding to a point in the article. CDN. I opted out of this, the first time Google’s CDN was down for a few hours. Doesn’t happen that often, but when it does, users will blame you for it.

    • http://web101marketing.com Tom Parker

      There’s a few things to keep in mind regarding search engine crawling of pages using javascript in navigation. One, the engines are doing some javascript execution and that will increase over time. Two, in most cases of navigation the links are still on the page, it’s the display of them that gets manipulated. Three, always include a sitemap.xml file for the bots, and a sitemap.html is good for humans.

  • Arnold

    Great introduction to jQuery for us visual designers! Question: is it necessary to learn JavaScript? For example, for debugging purposes or to customize the JQuery plugin

    • Luis Bahiana

      Arnold, it is not mandatory to learn JS, but, it is ,yes, useful to know the basics: Operators, Conditional
      Statements, and, most of all , Functions.
      I´am no developer but i´ve done that.
      The more are exposed to all complexities of core JS the more we become grateful that JQuery Exists !

    • http://tommybrunn.com Tommy Brunn

      Yes. Definitely. You can use Javascript without knowing jQuery, but you can’t use jQuery without knowing Javascript.

  • http://www.jkb.com.au Jacob

    John, if you’re referring specifically to content retrieved using AJAX, then yes, that’s true.

    I would question, however, the need to use AJAX for such critical items such as navigation menus – I’d be inclined to have this within the page content, and hidden until required.

    Arnold – I’d say it would be in your interest to at least learn the basics of Javascript – the more you know about WHY things work, the better you can use them.

  • Rob

    Hi Tara
    the closing comment tag under jQuery example #3

    is before the closing em tag. Just wish to point that out for beginners so they dont have page/script error messages

    • http://creativecontentexperts.com Tara Hornor

      Thanks, Rob! I will get this repaired ASAP.

  • http://www.jazzncy.com Jazzncy

    Good stuff here in this introduction article especially the Lettering, by Davatron5000 and also the resources! Thank you!

    I’m a graphic designer and recently started designing my website from scratch with jQuery plugins.
    Within a month I have my brand new website up and running! (click on my name if you want to visit my website)
    Every now and then I would explore for new cool jQuery that I could implement to my website or my projects.

    I have to agree that jQuery is the future!!

  • http://blog.arunace.com Arun Sengupta

    i agree with this blog totally since I started off as a developer and then moved into web designing … and since I had a knowledge of javascript initially it helped me a lot to understand jQuery with my designing skills when it came to making the design and showing some interactivity in the page. :)

    • Ytrail

      Arun what made you go from a developer to a web designer?

  • http://blogverize.blogspot.com/ Nimsrules

    Great article. I learnt jQuery from an awesome book called Smashing jQuery and have also recently subscribed to tuts+ courses: http://tutsplus.com/course/30-days-to-learn-jquery/

  • http://www.lightson-studio.co.uk Aaron @ Lights.On Studio

    I have forwarded this to my designer to read! Thank you for sharing your insights.

    Much appreciated!

    Aaron

  • http://seo-harmony.com Pavlicko

    John,

    I use jquery and javascript on a daily basis for my clients and have zero problems with SEO. If you build out the site content first, then add jquery to enhance the page, you’ll be fine.

    Ajax can be advantageous when pulling in duplicate content for e-commerce sites (product descriptions, etc.) Everything has a use.

  • http://www.jazzncy.com Jazzncy

    Yes I agree that jQuery is the future!
    As a graphic designer, even if we might not be familiar with javascript language, we can still build website with the help of jQuery plugins! Thank you for this article and all the resources!

  • http://webdesignerblog.org web designer blog

    a must know part for designers “jQuery” thanks for nice article

  • Simon

    Favourite plugin – jqGrid.

  • http://martealdesigns.com bob marteal

    @Arnold – I had learned just enough javascript by the time jQuery came around to be able to decipher all of the jargon. That was very helpful as i dove into jQuery.

  • http://www.webvanta.com Michael Slater

    Good introduction to jQuery. We’ve found that JavaScript is intimidating for many designers, but that it is possible to learn “just enough” to be able to effectively use jQuery plugins.

    I’m presenting an online class on jQuery for designers, which may be of interest to folks reading this article who want to go further. Check it out at http://www.webvanta.com/course/686426-jquery-for-designers

  • http://www.crearedesign.co.uk/ James Willis

    Thanks for sharing this, really easy to read, I found it to be a great introduction to using this time saving, user friendly scripting language.

    As a designer I certainly found it a useful thing to learn in order to design around some of the many plugin’s that are available for use.

  • http://www.onlinetrainingguru.com .net geek

    Very informative and well presented. shared with facebook and twitter …

  • http://www.uniquelines.net Lenny Mayers

    I’m a newbie when it comes to programming and your approach to teaching was so understandable. Thank you for STARTING at complete ‘idiot’ level and then expanding SLOWLY. Hopefully I’ll have a website that’s professional looking in no time.

  • http://mgbfdhcfjgd.com Martine Meiser

    For a nice and reading the posts, and I just about believe what Mary said.

  • http://www.proitonlinetraining.com .net geek

    Good Stuff Tara on using Jquery. Working with Jquery is very exciting. Yeah, it is future for the designing. The visual appearance of the website improves a lot. Lots of jquery tools are available for the designers which makes him more flexible while designing. Vey good stuff. Thanks