• Article

jQuery, A Designer's Perspective

Emily P. Lewis | July 19, 2010

 

Though I've been working as a web professional for over ten years and I've had my hands in everything from project management to ASP to markup, I've always struggled to get my head around JavaScript.

I blame the instructor I had back in 2001, who introduced me to DHTML. The "simple" animations and interactions he attempted to teach might as well have been advanced mathematics explained in Chinese. I passed the class, but struggled the entire time. And once the class was over, I put JavaScript in the same box as Calculus: something I would never understand.

Years later, as JavaScript libraries and frameworks entered the picture, I got my hopes up that, finally, I would be able to make JavaScript work for me. And so, I messed with Prototype, MooTools and Dojo.

While these resources made things a bit easier to understand, it wasn't enough for me to feel comfortable using them without the help of someone who actually understood JavaScript … especially when it came to troubleshooting errors. I also was frustrated with the documentation. And don't even get me started on some of the markup and CSS that was injected into my lovely semantic, accessible sites.

And then jQuery entered my life.

Designer-Friendly Documentation

There are oodles of sites extolling the benefits of jQuery. From how lightweight it is to its support of CSS3 selectors to its simplicity. But for me, one of the things that made jQuery instantly stand out from other frameworks was its documentation.

As I already mentioned, I don't completely "get" JavaScript. So, if documentation is presented according to methods, events and objects, it isn't always (actually, it's never) clear to me where to go or what to do.

With jQuery, particularly jQuery User Interface, the documentation is organized by what you want to do with it. Want to resize something? Want to make something draggable? It is immediately clear where to go because they use those actual words.

jQuery also provides an extensive list of tutorials with plain English titles. And I love the FAQs: organized by "how do I…" and "why do I…" they make immediate sense to me as a designer.

Designer-Friendly Installation

The other thing that immediately appealed to me about jQuery is how easy it is to install. All you have to do is download the latest version (currently 1.4.2) to your server and reference it in your pages:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

You can choose the minified version, which is compressed for a smaller file size, or the uncompressed version, which can be useful if you want to get familiar with what is going on behind the scenes.

But what I really love is that there are CDN-hosted versions of jQuery you can reference. Personally, I use Google's:

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

One benefit of using a CDN-hosted version is caching and, therefore, performance. These hosted versions load a copy of the script that is geographically closest to you and, potentially, your visitors. Which means it is likely that your visitors already have a cached version in their browsers.

And then you also get the benefit of Google's (or whichever CDN) speed and reliability for delivering your resources, not to mention these hosted versions always use the latest version of jQuery.

A Note on Source Order

When you do add scripts to your web pages, you should add it to the bottom of your HTML, just before the closing </body> element. This allows your pages to fully load before reading the JavaScript, which can help users who may not have the fastest of connections.

Of course, this isn't a requirement of jQuery, simply a recommendation for better page load times. You can still add jQuery to your document <head> if that is your preference. Regardless of where you call the scripts, you should make note of the order of your jQuery code:

  1. jQuery script
  2. jQuery plug-ins
  3. Custom scripts

Easy Interactions with jQuery UI

Once you have jQuery installed, getting interactions on your web pages is amazingly easy thanks to jQuery UI, which is a widget/interaction library built on jQuery core. It includes a wide range of widgets and effects ready for you to use immediately, including accordions, sliders, buttons, dialog boxes, date pickers and much more.

But before you can take advantage of all these interactions, you need to download and install jQuery UI, making sure you get the right version (jQuery UI 1.8 works with the current jQuery 1.4.2).

Fortunately, this is made super easy with the Download Builder, where you can select exactly what you need, whether it is all the widgets and effects, or just a few.

Once you pick and choose what you want (being careful to note dependencies), you get a .zip file with:

  • /css/
  • /development-bundle/
  • /js/
  • index.htm

Simply extract these to your server and you are ready!

Installing jQuery UI

Once all your jQuery UI resources are in place, you need to make sure to reference them on any pages you plan to utilize a component. First, make sure you include a link to the CSS in your document <head>:

<head>
    …
    <link type="text/css" href="/css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
</head>

This CSS contains the "theme" you picked from the Download Builder. You can customize this using ThemeRoller or pick from a gallery of pre-designed themes.

Next, add the jQuery UI script after your jQuery core. Again, at the bottom of your document before </body>:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>
</body>

And now, you are ready to start adding interactions!

Accordion Widget

Let's start with a simple accordion. jQuery UI requires that your markup be composed of pairs of headings and content, all contained by an element assigned id="accordion":

<div id="accordion">
    <h2><a href="#">News</a></h2>
    <div>
            <p>News paragraph one.</p>
        <p>News paragraph two.</p>
        <ul>
            <li>News item one</li>
            <li>News item two</li>
        </ul>
    </div>
    
    <h2><a href="#">Services</a></h2>
        <p>Services paragraph.</p>

    <h2><a href="#">Products</a></h2>
        <p>Products paragraph.</p>  
</div>

You can use whatever element is appropriate for your headings, as long as you use the same element for all headings within the accordion. Also, in this example, I've nested links inside the heading <h2>s. This isn't required for the accordion functionality, but it is required to take advantage of the theme (CSS) I'm using.

Additionally, you can use whatever elements you need to contain your content. However, if you use, as I did in the example above, a combination of paragraphs and lists (or whatever) for your content, they need to be contained by a parent element, in this case a <div>.

Next, add the accordion function after your jQuery core and UI scripts:

<script type="text/javascript"> 
    $(function(){
        $("#accordion").accordion({ header: "h2" });    
    });
</script>

Note that I specify header: "h2" in the function to indicate the specific element I'm using for my headings in this example. Customize according to the element you choose.

And that's it! You get a cleanly styled and fully functional accordion:

See this example in action.

Tabs Widget

Now, how about some of those interactive tabs we see all over the web today? The markup required is a list of tab links and corresponding content, all contained by an element assigned id="tabs":

<div id="tabs"> 
    <ul> 
        <li><a href="#newsTab">News</a></li> 
        <li><a href="#servicesTab">Services</a></li> 
        <li><a href="#productsTab">Products</a></li> 
    </ul> 
    
    <div id="newsTab">
            <p>News paragraph one.</p>
        <p>News paragraph two.</p>
        <ul>
            <li>News item one</li>
            <li>News item two</li>
        </ul> 
    </div> 
    
    <div id="servicesTab">
            <p>Services paragraph one.</p>
            <p>Services paragraph two.</p>  
    </div> 
    
    <div id="productsTab">
            <p>Products paragraph one.</p>  
            <p>Products paragraph two.</p>  
            <p>Products paragraph three.</p>    
    </div> 
</div>

Note that the list items contain links with href values corresponding to the id values of the content <div>s:

<li><a href="#newsTab">News</a></li>

Corresponds with:

<div id="newsTab">
    <p>News paragraph one.</p>
    <p>News paragraph two.</p>
    <ul>
        <li>News item one</li>
        <li>News item two</li>
    </ul> 
</div>

And, as in the accordion example, your content can be anything … lists, paragraphs, headings, images. They all just need to be contained by a parent element assigned an id value that is targeted by the list link href.

Next, add the tabs function:

<script type="text/javascript"> 
    $(function(){
        $('#tabs').tabs();
    });
</script>

Once again, that's all you need for a simple, effective set of interactive tabs:

See this example in action.

Making Your Markup Semantic

Another thing I like about jQuery is that I can (most of the time) rely on my own semantic markup for structure. That is, I'm not necessarily tied to any particular markup to achieve interactions, which makes this standardista very happy.

Let's consider the accordion example. Personally, I can see that content being a good fit for a definition list (<dl>):

<dl id="accordion">
    <dt><a href="#">News</a></dt>
    <dd>
        <p>News paragraph one.</p>
        <p>News paragraph two.</p>
        <ul>
            <li>News item one</li>
            <li>News item two</li>
        </ul>
    </dd>
    
    <dt><a href="#">Services</a></dt>
        <dd>Services paragraph.</dd>

    <dt><a href="#">Products</a></dt>
        <dd>Products paragraph.</dd>    
</dl>

This time, I drop the non-semantic containing <div> from my markup and apply id="accordion" to the <dl>. My "headings" are contained by <dt>, while my content is contained by <dd>s. Everything else is the same.

And all I have to do with my function is indicate which element I'm using for my headings:

<script type="text/javascript"> 
    $(function(){
        $("#accordion").accordion({ header: "dt" });    
    });
</script>

With that, I get an accordion that is visually identical to the first example, but the markup is a bit more semantic:

See this example in action.

We All Start Somewhere

This article only touches on the smallest bit of what jQuery can do for you. There is so much more than the pre-built jQuery UI widgets I've demonstrated. Not only are there interactions — such as resizing, draggability and droppability — that are easy for designers to use straight away, but once you get more proficient, you can modify and create your own custom functionality.

What I hope I've demonstrated is how easy it is for you to get your hands dirty now. You'll never learn until you start getting familiar with the syntax and the possibilities, not to mention start building your confidence in a scripting language that may have intimidated you in the past.

I didn't start my journey as a web professional already knowing web standards or markup best practices. It was over time and through practice that I became expert in those areas.  The point is to get started. Don't be intimidated by what you don't know. Over time, you'll learn what works best for you, your sites and your users.

To help you along your way, definitely check out:

 

About the Author

Emily Lewis is a freelance web designer of the standardista variety, which means she gets geeky about things like semantic markup andCSS, usability and accessibility. As part of her ongoing quest to spread the good word about standards, she writes about web design on her blog, A Blog Not Limited, and is the author of Microformats Made Simple and a contributing author for the HTML5 Cookbook. She’s also a guest writer for Web Standards Sherpa, .net magazine and MIX Online.

In addition to loving all things web, Emily is passionate about community building and knowledge sharing. She co-founded and co-manages Webuquerque, the New Mexico Adobe User Group for Web Professionals, and is a co-host of the The ExpressionEngine Podcast. Emily also speaks at conferences and events all over the country, including SXSW, MIX, In Control, Voices That Matter, New Mexico Technology Council, InterLab and the University of New Mexico.

Find Emily on: