jQuery, A Designer's Perspective

Some rights reserved
jQueryADesigner’s Perspective
jQuery Summit November 16, 2010
Environments for Humans

jQuery, A Designer’s Perspective jQuery Summit 2
Freelance Web Designer
http://emilylewisdesign.com
Author, Microformats Made Simple
http://microformatsmadesimple.com
Email: emily@emilylewisdesign.com
Blog: http://ablognotlimited.com
Twitter: @emilylewis

jQuery, A Designer’s Perspective jQuery Summit
I’m a JavaScript idiot
3

“Web Designer”
What do they do?
4

“Web Designer”
What does Emily do?
5

“Web Designer”
6
CSS
HTML5
graphic design
visual design
XHTML
wireframing
usability
accessibility
content strategy
interaction design

JavaScript?
nope
7

It’s not just about what I do, but
what I
• Semantic markup
• Lean markup & CSS
• Accessibility
• Cross-browser support
8jQuery, A Designer’s Perspective jQuery Summithttp://www.ﬂickr.com/photos/danielgreene/3278394587/
love

JavaScript?
nope
9

It’s 2010
need rich, interactive experiences
10

I looked at
• Prototype
• Dojo
• MooTools
11
And ran in the other direction ...

WTF!?
12
Ajax.Responders
Fx.Transitions
OOP with dojo.declare()

jQuery
13
and it sounded pretty good
Then,I heard about

It shared some of my passions
• No inline scripting
• CSS3 selector support
• Cross-browser compatibility
• Works with other libraries
• Lightweight
• (Mostly) accessible
14

Ahhh, plain English
15
“How do I ...”

Almost designer friendly
• The documentation isn’t perfect, but it is better
• Focus on functionality (what do you want to do?)
• Lots of tutorials written by folks who have their
own “designer” perspective
16

jQuery, A Designer’s Perspective jQuery Summit 17jQuery, A Designer’s Perspective jQuery Summit
The
Intimidation
Factor

jQuery UI
The Path ofLeast Complexity
18
http://jqueryui.com

Deﬁnitely designer friendly
• Even simpler documentation than jQuery itself
• Fully-themed, live demos
• Clear markup examples
• Use a little or a lot
19

Deﬁnitely designer friendly
Add interactivity right away, without extensive
(or even mediocre) jQuery knowledge
20
• Accordions
• Tabs
• Sliders
• Date pickers
• Dialog boxes
• Dragging
• Dropping
• Resizing
• Selecting
• Sorting

ThemeRoller
• 24 pre-built themes (CSS)
• Customize a theme
• Or don’t use a theme at all
21
http://jqueryui.com/themeroller/

Download Builder
• Select the entire library
of eﬀects and widgets
• Or select only what you
need
22
http://jqueryui.com/download

Install jQuery
1. Download
2. Add <script>
23
Step 1
1.
2.
<script src="/js/jquery-1.4.4.min.js"></script>

Install jQuery
1. Add CDN-hosted <script>
24
Even Easier Step 1
1.
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>*
* Google CDN for 1.4.4 forthcoming

Install jQuery
1. jQuery script
2. jQuery plug-ins (this includes jQuery UI scripts)
3. Custom scripts
25
Source Order
1.
2.
3.

Install jQuery
Adding scripts to the bottom of your page can help
improve performance
26
Source Order
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4.2/jquery.min.js"></script>
</body>
</html>

Download jQuery UI
1. Pick the widgets and theme you want
2. Extract compressed folder and save ﬁles to your
server
27
Step 2
1.
2.
- /css/
- /js/

Install jQuery UI
1. Add UI <script> after jQuery <script>
28
Step 3
1.
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery-
ui-1.8.2.custom.min.js"></script>
</body>
</html>

Install jQuery UI
2. Add UI CSS
29
Step 3
2.
<link rel="stylesheet" href="/css/smoothness/
jquery-ui-1.8.2.custom.css" />
</head>

Apply a widget - accordion
1. Get your markup ready
30
Step 4
1.
<div id="accordion">
    <h2><a href="#">News</a></h2>
    <p>News paragraph one.</p>

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

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

Apply a widget - accordion
2. Add accordion function after jQuery and UI
<scripts>
31
Step 4
2.
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery-ui-1.8.2.custom.min.js">
</script>
<script>
$(function(){
$("#accordion").accordion({ header: "h2" });
});
</script>

Interactivity in 4 easy steps
32

Making it your own
With some widgets, markup is ﬂexible (POSH FTW!)
33
<dl id="accordion">
    <dt><a href="#">News</a></dt>
    <dd>
        <p>News paragraph one.</p>
        <ul>
            <li>News item one</li>
            <li>News item two</li>
        </ul>
    </dd>

    <dt><a href="#">Services</a></dt>
    <dd>Services paragraph.</dd>
</dl>
Semantic markup

Making it your own
Don’t forget to update the function to reference
your markup
34
<script>
$(function(){
$("#accordion").accordion({ header: "dt" });
});
</script>
Semantic markup

Making it your own
Skip the theme entirely and
design from scratch*
35
No theme
*You still need to add jQuery UI CSS to support interactivity

jQuery, A Designer’s Perspective jQuery Summit 36jQuery, A Designer’s Perspective jQuery Summithttp://www.ﬂickr.com/photos/jduty/3778581831/
Beyond the
Baby Steps

Get comfortable
• Explore plug-ins
• Learn the fundamentals of jQuery
• Learn how to troubleshoot errors
• Find and consume good resources
• Practice, experiment, screw up & learn
37
and your hands dirty

Questions?
38

Thanks!@emilylewis emily@emilylewisdesign.com
39

jQuery, A Designer's Perspective

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (14)

Similar to jQuery, A Designer's Perspective

Similar to jQuery, A Designer's Perspective (20)

More from Emily Lewis

More from Emily Lewis (10)

Recently uploaded

Recently uploaded (20)

jQuery, A Designer's Perspective

Editor's Notes