jQuery, A Designer's Perspective
Emily P. Lewis | July 19, 2010
And then jQuery entered my life.
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.
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.
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:
But what I really love is that there are CDN-hosted versions of jQuery you can reference. Personally, I use Google's:
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
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:
- jQuery script
- jQuery plug-ins
- 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:
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> … <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
And now, you are ready to start adding interactions!
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
<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
Next, add the accordion function after your jQuery core and UI scripts:
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:
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
<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 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
Next, add the tabs function:
Once again, that's all you need for a simple, effective set of interactive tabs:
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 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:
With that, I get an accordion that is visually identical to the first example, but the markup is a bit more semantic:
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:
- jQuery Fundamentals
- jQuery for Designers
- Shape Up Your Buttons With jQuery UI
- Using Multiple jQuery UI Themes on a Single Page
- 10 Easy jQuery Tricks for Designers
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.