Get documents about "Proposed title Designing with jQuery Subtitle capturing
Document Sample
Title: jQuery for Designers
Subtitle: Design Dynamic websites and applications without learning to program.
Table of Contents
Part 1 - Introduction
1. Introduction
1.1. Why was this book written?
1.2. What is UX?
1.2.1. Visual Design
1.2.2. Interaction Design
1.2.3. Information Architecture
1.2.4. Who should know about UX?
1.2.5. About the Author
1.3. How are websites and web applications designed today?
1.3.1. Design by Committee
1.3.2. Design by Micromanagement
1.3.3. Design by Fear
1.3.4. Throwing JPEGS over the wall
1.4. Enter jQuery
1.4.1. HTML Only
1.4.2. CSS Only
1.4.3. Other things that were too hard
1.4.4. jQuery, the hero
2. jQuery: Web Design the New Wave Way
2.1. Review of HTML and CSS
2.1.1. Basics of the Box Model (What's a DIV?)
2.1.2. The DOM tree
2.1.3. Selectors
2.1.4. Classes
2.1.5. Pseudo Classes (Hover!)
2.2. jQuery Selectors (Finding stuff is even easier)
2.2.1. Different selecting strategies
2.3. jQuery CSS Manipulation
2.3.1. Adding and removing classes
2.3.2. Changing CSS on the fly
2.4. jQuery effects
2.4.1. Fading and Transparency
2.4.2. Basic Animation
2.5. jQuery DOM manipulation
2.5.1. Changing Text
2.5.2. Changing attributes
2.6. jQuery Plugins
2.7. Summary
2.7.1. Easy for non-programmers
2.7.2. A strong community
2.8. Designers unbound! Hello World with jQuery
2.8.1. Fade on instead of blink.
2.8.2. HTML, CSS and jQuery (all on 1 page)
2.8.3. UX Review
2.8.3.1. Getting users to read information.
2.8.3.2. Smooth transitions make context easier to understand.
2.8.3.3. Visual aesthetics improved.
2.8.4.
Part II – Real World Scenarios for Websites
1. Communicating with Dynamic Forms – “Required fields”
What is the best way to communicate required form fields and the errors that the user
encounters?
1.1. Visually designing the form
1.1.1. Room for errors
1.1.2. How to make a row look “required”
1.1.3. HTML and CSS
1.2. Interaction design the form
1.2.1. The desired effects
1.3. The jQuery solution
2. Revealing information as it’s needed
With interaction design and jQuery, a long FAQ list becomes engaging and easier to read.
2.1. Visually designing the page
2.1.1. How to make a list item look clickable (affordances)
2.1.2. Visually indicate Open and Closed
2.2. Structuring a FAQ list for growth
2.2.1. UL-LI – the Unordered List
2.3. The jQuery Solution
2.3.1. Basic solution
2.3.2. Advanced Options and when to be conservative
3. Turning “too many links” into “Unexpected Wow”
Often the homepage of a site has too many links for SEO purposes. How can we turn that
negative into a positive with UX Design and jQuery?
3.1. Different needs
3.1.1. Maintenance
3.1.2. Testing
3.2. Visually designing the interface
3.2.1. Emphasis of a control. How to dial it down?
3.3. Structure helps everyone get along
3.3.1. Loading information with Ajax
3.3.2. CSS Strategy
3.4. The jQuery Solution
4. Readability and information architecture
It’s called “Me too!-ism” Everyone wants to be on the homepage. How can you turn
“information overload” into “well organized and sensible” with the use of Tabs?
4.1. Visually designing tabs
4.1.1. Rules about tabs and folder metaphors
4.2. Setting up Panels and Tabs
4.3. The jQuery Solution
4.3.1. Options for the Tab plugin
5. Aesthetic choices like Rounded Corners
Rounded edges were difficult until now. This opens the door to more exciting visual
treatments.
5.1. Visual Design of web applications and websites
5.1.1. How to decide on a visual treatment
5.2. The JQuery Solution
5.2.1. Use the Curvy Corners Plugin
5.2.2. Advanced Options
6. Screenshots with the LightBox Effect
Screenshots and image galleries are common on many sites. What is the best way to zoom
into a screenshot and focus the user’s attention in one area?
6.1. The user interface of LightBox
6.2. The jQuery Solution
6.2.1. ThickBox Plugin
6.3. Advanced Options
Part III – Real World Scenarios for Prototyping and Application Design
1. The Prototyping Process
1.1. Who should do the work?
1.2. How long should it last?
1.3. How can iterations be managed?
2. Drag and Drop
This is one of the most powerful user interface tools available to a UI Designer. How easy
can it be?
2.1. The Interface Plugin
2.1.1. Draggable
2.1.2. Droppable
2.2. UX rules for Drag and Drop
3. Tooltips
Handing tooltips well in an application can increase task completion substantially. jQuery
removes the effort.
3.1. The jTip Plugin
3.1.1. Getting the text from Ajax
3.1.2. Other options
3.2. How users read tooltips.
4. Slider
A slider is often the best choice for showing a range of options the user can choose.
However, this control has been difficult to implement. Until now.
4.1. The Interface Plugin
4.1.1. Slider Options
4.2. Visually designing your slider.
5. Accordions
Many applications employ the accordion technique to segment objects and features into
manageable sizes. Making one is easy.
5.1. The Interface Plugin
5.1.1. Accordion options
5.2. UX rules for Accordions
6. Menus
Every application has a menu. Designers should be able to prototype strong menus on their
own.
6.1. The XX Plugin
6.1.1. Advanced Options
6.2. UX rules for Menus
6.2.1. The dreaded neck of the menu.
7. Advanced Animation
SlideDown and SlideUp are awesome, but what about more advanced animation?
7.1. The Interface Plugin Effects
7.1.1. Blind, Bounce, Drop, Fold, Highlight, Open/Close, Pulsate, Grow, Shrink, Puff,
Shake, Slide, Transfer, Easing Droppable
7.1.2. UX rules for Animation
8. Modal Dialogs
Every application has them. Designers should use them in prototypes.
8.1. The jQModal Plugin
8.1.1. Advanced Options
8.1.2. UX rules for Modal Dialogs
Part III – Summary
9. The Designer Manifesto
9.1. What is your responsibility?
9.2. Will user’s care? Will your boss care?
9.3. Good Luck
Appendix A: Resources
1.1. Online Communities
1.1.1. CSS
1.1.2. HTML
1.1.3. jQuery
1.2. References
1.2.1. Books
1.2.2. Sites
1.2.3. APIs
1.2.4. Blogs
1.3. Tools
1.3.1. HTML/CSS Editors
1.3.2. Virtual Magnifying Glass
1.3.3. Tray Color
1.3.4. Firebug
1.3.5. IE Developer Toolbar
1.4. Code samples
1.4.1. Online source, errata
Book Contents
Part 1 - Introduction
1. Introduction
1.1. Why was this book written?
I had recently worked in the central Web division of a Fortune 1000 software company. The
company had a reputation of being designer friendly. It had spent a lot of money on usability
labs and analytical technology, all for the purpose of improving the user experience and more
importantly, the bottom line.
I worked with two very talented designers named Sean and Florence. (Florence and I started
work on the very same day.) When I arrived, my job was Sr. UI Designer and Prototyper. The
first words out of my mouth to my team mates were, “OK guys, anything is possible. Design
with that in mind.”
The next year was a wonderful experiment in how Design is practiced in the business world. I
observed both the good and the bad. I learned how fear and consensus water down designs
until they are meaningless or worse. I learned how power influences design and how
Designers, as a group, are incredibly oppressed by those around them. These talented
individuals who knew how to make money through design were forced to take credit (blame)
for designs that failed. They were frustrated and fatalistic.
A typical saying was, “It’s great but, they will never go for it. I’ll put it in my portfolio.”
In his landmark book, The Design of Everyday Things, Don Norman taught us that Design is the
thing that separates us from the animal kingdom. We are able to design things that people can
use in intended ways. But we often design incorrectly causing users to use products poorly and
hate every minute of it. He said it was the responsibility of the Designer to make sure that the
product was usable and pleasant. Bad user experience was the fault of the designer, not the
user. That book helped me dedicate my life to better User Experience Design.
Unfortunately, on the web, this was easier said than done. When push came to shove,
someone had to build the actual web site. And although designers often learned HTML and
CSS, the technologies beyond that were just too hard to learn. Flash and Flex and JavaScript
required significant investments of time and created a barrier to entry that most designers
declined to surpass.
Until recently, this was the way it was. Engineers told designers what was possible. Marketers,
business folks and project managers pressured designers to stick to basics so that the product
could be shipped. They didn’t have the vision of a better user experience. A common refrain
was, “Amazon doesn’t do that. We shouldn’t either.”
But something changed. A new, very small, addition to the recipe created a tipping point. A
small piece of JavaScript was written by John Resig in 2006. It had the modest vision of
applying CSS Selectors to a basic JavaScript framework. This idea, like many brilliant ideas,
seems so simple on the surface, but in reality it changed the entire dynamic of the situation.
I am not a programmer, but I do have some technical skill. I have little to no experience with
object-orientation, closures, patterns and other Computer Science major topics, but I am very
good with HTML and CSS. For years, I only used JavaScript that was created for me or that
someone had posted online. These online widgets had some customization and filled a need,
but I was at the mercy of the engineers who created them.
jQuery has allowed me to create my own interactivity without learning to program. It has
allowed me to create design rules that change CSS in ways that CSS alone could never have
done. Everyone to whom I showed jQuery was astounded at how simple and easy it was. The
results were stunning. The User Experience improved overnight.
I had taken control of the prototyping and website production and was able to finally add real
interactivity to it. The design team had new control and used it immediately to improve the
user’s lives and the bottom line of the company.
I wrote this book because I want to share that experience with everyone. I want every designer
to feel the same responsibility and power that comes with UX Design and jQuery. I want every
designer to open their minds to new possibilities and improve the lives of their customers. I
want them to understand, “OK guys, anything is possible. Design with that in mind.”
1.2. What is UX?
UX Stands for User eXperience. Usually I use it as an abbreviation of User eXperience Design. It
covers anything designed, like a keyboard, a car stereo or a website. For the purposes of this
book, we will stick to Web Design including websites and web applications. UX is a broad term
and includes everything and anything that will affect the user’s perception of the world. It
includes:
Visual Design
Interaction Design
Information Architecture
I will go into detail on each of these fields briefly so we can all be using the same terminology.
This is also a primer for anyone entering the field of UX and wants to learn more.
1.2.1. Visual Design
Also known as Graphic Design, these are the people who spend most of their lives in Adobe’s
products such as Photoshop, Illustrator, Fireworks and others. Many of them use Windows, but
more often, you will find the Mac on their desks.
Graphic Designers usually major in Fine Arts or Graphic Design in college. It is a four year
degree covering many topics such as Composition, Color Theory, Balance, Swiss Design
Techniques, and much more. For a wonderful primer on Design Principles see Universal
Principles of Design by William Lidwell, Kritina Holden and Jill Butler.
In layman’s terms, the Visual Designer is responsible for the way something looks. How it
works is not as important in this field. The test of the visual designer is often to print it out and
put it on the wall. If it looks like Art, then they succeeded.
Visual Design alone (without any of the other disciplines) will lead to beautiful but unusable
designs. Don Norman described a door that was beautiful to look at and won awards for
design. Unfortunately, no one could figure out how to open it. If you have ever tried to push a
door that was mean to be pulled (or vice-versa) then you have encountered a “Norman Door”.
1.2.2. Interaction Design
Interaction Design is the missing ingredient for a “Norman Door”. Interaction design only looks
at how things work. Interaction designers care less about how it looks and much more on
usability and interaction. This is also called UI Design, which emphasizes the widgets and
controls that a user uses to interact with the system.
Don Norman’s book spoke in depth on this subject. However, many complaints arrived at his
doorstep saying, “If we follow your instructions, we will end up with very usable, ugly
products.” He followed up with Emotional Design which sought to balance out the two.
Interaction design on the web answers questions like:
What happens when the user puts their mouse over there?
What happens when he clicks on it?
How do we tell the user if there is a problem?
How will we ask the user a question?
These questions are fundamental to the idea that the best way to achieve business goals is to
engage the user interactively. This engagement can happen in a million ways. Most of those
ways are confusing and contradictory leading to unhappy customers and poor sales. Designing a
solid interaction model takes years of practice and a strong sense of empathy. My personal
secret to success in this field is to buck a commonly held belief.
Glen’s secret to strong Interaction Design
Never pretend to be the user. People do that all the time. Professionals often create personas
(Pioneered by Alan Cooper, in About Face 2.0) and misuse them by pretending to be the
persona in a role playing exercise. My philosophy is to role-play, but rather than the user, you
should pretend to be the website or web application. “Hi! I am the website, how can I help you
today?”
If you pretend to be the user, you often assume they have skills, knowledge or patience that
they just do not have. If you pretend to be the application, then you make fewer such
assumption. You say things like, “The user keeps trying to perform a function that is only
available somewhere else. What can I do to help them?”
It’s a subtle difference, granted. But for me it makes all the difference in the world.
Another analogy is looking at parents and children. My kids say to me, “I want some Cheerios.”
They will repeat this sentence as many times as they need. I find myself ignoring them for the
first 10 times. It’s not that I am stupid and don’t understand the request. It is that I have other
things on my mind and am usually distracted.
Your website is like the child to the user. It keeps saying important information that the user
should focus on, but the user is just too distracted to notice and react. They are smart people,
but they are extremely distracted. You have to think, “If I were the child, how would I get the
adults attention.” Screaming might work, but won’t usually get you the answer you want.
Figuring out the best way for the website/child to engage the adult is all about interaction
Design.
1.2.3. Information Architecture
Information Architecture (IA) is simply about organizing things. There is a Gold Rule of IA is,
“Everything should be findable with little or no concentration.” This rule has driven many
designers insane. It is much harder than it looks. First of all, people look for things in different
places. Secondly, there is usually too much information to group together logically.
IA is not a major in any college I have heard about, but it could be. Organizing information is a
major responsibility and makes the difference between a usable website and application and a
terrible one.
IA takes place on several levels including: across the entire application, across a section, within
a page and within a part of the page. I worked on a shopping cart application that had poor
performance in one area because the text was not in a grid. The Information Architect is
responsible for users comprehension and navigation. It is a major responsibility.
This book will demonstrate several techniques, with jQuery, which can help information
architects do a better job and help more users.
1.2.4. Who should know about UX?
Besides the above groups who practice User Experience every day, there are other groups who
would be wise to understand User Experience Design.
Usability Professionals are the people behind the 1-way mirror. They have focus groups and
labs with fancy eye-tracking devices to monitor users and their ways. My experience has been
that these well-meaning professionals often have conservative leanings. Just because it doesn’t
work in a lab, doesn’t mean people won’t love it. Labs are imperfect tools. Use them to
develop ideas, not to shoot ideas down. Understanding the creative positive position behind
user experience design is valuable to give these professionals a different perspective.
Marketing Departments are very often involved in website development and even web
application development. My experience has shown me that the marketers have a significant
say in the design process. More say than I think is wise, but it is somewhat unavoidable. The
more the Marketers understand what UX is all about, the better they are able to have a dialog
with the design team.
Business managers have the power. They are the ones with the money and rank. They are also
the ones with the ultimate responsibility for success failure. Although I always counsel
delegation in the Design team, I think that Business managers would be wise to understand the
principles that the Design team live by. User Experience Design is a powerful tool to make
money. Micromanaging the process eliminates creativity and ultimately fails to deliver success.
Analytics and Testing teams should be aware of UX principles. It will help them craft their tests
to maximize positive outcomes. If you know that a certain principle exists, then you can plan a
strategy that optimizes around that principle.
Finally, the biggest and most valuable part of the team, the Engineers should be more than
familiar with UX Design. Engineers build the applications most of the time. They build most of
the websites most of the time. A strong partnership with the design team will yield a strong
product. A weak partnership yields unhappy customers.
1.2.5. About the Author
Glen is a UX Architect in Silicon Valley , currently leading UX at Marketo, a RIA marketing
automation company. Pioneering UX Design since 1995, Glen has been at the forefront of rich
internet experiences for over a decade. His early internet design company Koko Interactive
developed the first web animation, the first all-Flash e-commerce site, the ground-breaking e-
commerce work with Grainger and the award-winning business extranet Hotkoko, which was
one of the first RIA applications.
Not a programmer, yet more technical than a designer, Glen has always had a passion for
enabling designers to take control of the User Experience. In addition to designing the Marketo
Application, Glen is writing a designer revolution book called, jQuery for Designers. He blogs
frequently at http://www.commadot.com.
1.3. How are websites and web applications designed today?
It is important to understand what the reality is on the ground. The current design process is
extremely flawed and yields unhappy customers and sub-optimal application and websites. By
sub-optimal, I mean that they do not have the highest possible levels of successful metrics.
These metrics differ from situation to situation but usually include:
High Task Completion
High Sales or Conversions to Leads
Low Exit rates
High Satisfaction Scores
Few complaints
The role of design is to achieve these goals. If a designer is trusted and approves a design yet
fails to achieve these goals then you must consider the possibility that you have a poor or
untrained designer. The key concept here is that you must hold the designers feet to the fire by
stipulating which metrics they must improve. Never allow personal opinion to judge a
designers work. Only trust actual metrics against real world situations. As we shall see, the
reality is that opinion and power rule the workplace.
1.3.1. Design by Committee
The famous saying is by Alec Issigonis. He states, “A camel is a
horse designed by committee.”
Why is a committee so bad? Aren’t two heads better than one?
And why not 10 heads? The problem with this approach is the
basic rules of getting along. When faced with multiple options, it
is easier for a group to compromise to gather consensus.
Consensus is actually the designer’s enemy. For example, let’s
say a design would look good in blue or yellow. One person on the committee favors blue, and
the other favors yellow. An impasse occurs. An intelligent compromise is green. It is a mixture
of yellow and blue. Unfortunately, green doesn’t make either party happy and the design
suffers.
A perfect illustration of this phenomenon is from a weblog called Creating Passionate Users.
(http://headrush.typepad.com/)
Great designs happen when a single vision is followed. In movies, there is a director. In books,
there is an author. In websites, the designer should play that central role. Without a singular
vision you end up with a mishmash of compromises.
Additionally, the committee has a negative effect on the designer for another reason. It blurs
the line between expert and novice. In a committee, everyone’s opinion counts equally.
Democracy, right? The problem with the democratic process is that not all opinions are created
equally. The designer has training and experience that make their opinions based in the craft of
design, while other opinions are based on “gut instinct” and personal preference. “Personal
Preference” has never been the driver of brilliance or creative genius. It only serves to let non-
designers get their fingerprints on the project. I also call this “Backseat Designing”.
This is how 95% of all projects are designed. It is a horrible process and yields watered down
designs and sub-optimal metrics. It depresses the designers and makes the user unhappy.
Unfortunately, I cannot think of a silver bullet to make this trend go away. Maybe I could start
a committee to come up with recommendations.
1.3.2. Design by Micromanagement
The twin sister of Design by Committee is Micromanagement. This is where managers and
other people in the process will look over the designer’s shoulder and give them detailed
instructions. This turns designers into “Pixel Pushers”. Words like, “Make that purple and
move it to the left” suck the life right out of a designer. Design requires time and iterations.
This is why Designers usually hate to have someone look at an unfinished design.
Creating Passionate Users has another illustration to show this trend. They call it the Zombie
Function. It defines a straight correlation between the level a designer uses his/her brain and
the level of micromanagement.
A pixel pusher is someone who knows how to use an image editing tool like Photoshop. A
designer is someone who knows how to achieve goals for users. When a designer is
transformed into a Pixel Pusher, then everyone loses.
Again, I do not have a magic bullet for managers to suddenly trust their designers. This is the
way it has been for some time on the web. I hope this book gives designers at least a sense of
community, that they are not alone.
1.3.3. Design by Fear
It has been a widely used term since the 1920’s. FUD stands for Fear, Uncertainty and Doubt.
FUD was first defined by Gene Amdahl after he left IBM to found his own company, Amdahl
Corp.: "FUD is the fear, uncertainty, and doubt that IBM sales people instill in the minds of
potential customers who might be considering Amdahl products." The term has also been
attributed to veteran Morgan Stanley computer analyst Ulrich Weil, though it had already been
used in other contexts as far back as the 1920s.
Regardless of its origins, it is a powerful aspect to human psychology. Design suffers from FUD
in almost every project I have ever witnessed. It usually shows up when the Designer attempts
to introduce a new concept.
New concepts have been the driving force for the modern economy. New concepts have made
billions for those rare companies who have the new and different idea. So why do most
projects flatly refuse to attempt new things? The answer is FUD. People are afraid of failure
more than they are desirous of success. Have you ever heard the expression, “No one ever got
fired for going with IBM.” This was a saying invented by IBM!
The design corollary is “No one ever got fired for having a white background”. Many projects I
have worked on suffered from this exact problem. When a designer tries to do something a
little different, the immediate reaction is to look for other companies who have done the same
thing. This is also called CYA (Covering Your Ass). If you can tell your superior, “But Microsoft
does it, so it must be ok” then you have covered your hind quarters from attack. However, if no
other project can be found, then it must be wrong. The people at [Insert Competitor Name
Here] aren’t doing it, then it must be wrong. A great commercial showed this vicious cicle by
alternating between companies where they all ask themselves, I wonder what [other company]
would do in this situation.
Design can put you ahead of the pack, if you forget
about the competition and focus on doing what is
right for the user. Keeping up, or staying behind,
with the Jones’ is a recipe for stagnation.
Once again, I have no silver bullet. This illustration
by Creating Passionate Users should help illuminate
the issue. But conquering fear may be a task too
mighty for one book.
Fear manifests itself in another more complex way.
In this book, I claim that iterations are good. That
many improvements can come by working on
polishing the existing design. Although, I firmly
believe in this kind of iterations, I also believe
sometimes you need to break new ground and start from scratch. Incremental improvements
can take you only so far. Once again, a perfect illustration of the concept by Creating
Passionate Users.
Fear and incremental improvements lead to lateral design changes. The colors change and
things move around, but the needle does not go up. If the metrics, do not improve, then the
design is failing.
1.3.4. Throwing JPEGS over the wall
The current execution process for most websites and other
web projects goes something like this:
1. Designer iterates in static Photoshop/illustrator.
2. Designer throws flat JPEG over cubicle wall.
3. Web Developer/engineer render pixel-perfect
(sometimes) html rendition.
4. Engineering plugs in server-side logic.
5. QA Tests
6. Launch
7. Analyze and go back to step 1
The problem with his method is that the designer is only
involved in the static rendition of the project. They are doing
little or no interaction design and can only watch while
engineers attempt to add in interactivity on their own. The
results are often a mishmash of inappropriate interactivity and unfortunate design mistakes.
JPEGS are inappropriate tools for communicating interaction design. They can only
demonstrate visual design. To get to the next level, the process must change to include a new
step to replace step 3. Step 3: Designer and Engineer iterate prototype together until
interaction design is completed. I am advocating that designers make their own prototypes
including html and CSS, but I also acknowledge that this is difficult for many designers.
If you know HTML and CSS, then the rest of this book will show you how to elevate your work
and include real interactive components. It requires no knowledge of programming on any
level.
If you do not know HTML or CSS then the next couple of chapters will attempt to give you a
basis for doing it anyway. HTML and CSS do not require computer science degrees.
Fundamentally, they are similar to a print layout tool like Quark or Illustrator. The only
difference is that all of the information is typed out rather than entered in the GUI of the
program. Give me the benefit of the doubt and read on. I promise to keep it simple.
1.4. Enter jQuery
On August 22, 2005, John Resig wrote a blog entry called Selectors in Javascript. This idea was
pretty new, but extremely powerful. John spent the next year creating jQuery, which is
categorized as a JavaScript framework. The specifics of jQuery make it a dream-come-true for
designers and web developers. It is currently on version 1.1.3 and has been improved for speed
and flexibility by a strong and vibrant open source community.
Before we get into the specifics of jQuery, I think it’s important to review why HTML, CSS and
other more complicated technologies are insufficient to improve the design situation.
1.4.1. HTML Only
HTML has improved over the years, but not much. The first and biggest improvement was the
introduction of HTML Tables. Tables provided a mechanism of layout that could be used to
design with. It was not nearly as simple as it could have been. Tables had little control over
style. Colors, borders, backgrounds, padding, margins; all were all incredibly complex to
achieve. I spent the better part of the late 90’s banging my head against html tables.
One invention to help was Spacer.gif. This was a 1x1 image made as a transparent gif. The
browser wouldn’t show the gif, but it would still take up space. Therefore, it was used to create
spacing effects. If you wanted to move something down 10px, you just put a spacer.gif above it
and gave it a height of 10px. Additionally, you could nest your tables to create more complex
layouts.
The problem with spacer.gif and nested tables was that they did not scale. The larger your site,
the messier your html became. Usually it became an impenetrable mess of spaghetti that could
not be untangled. The content and the layout were inseparable. This meant that one could not
change the style of the page easily. Ultimately, HTML alone was not a designer’s friend. There
just were not enough tools to make it work.
1.4.2. CSS Only
When CSS arrived, I knew right away it was a major step forward. Style sheets could be created
in separate files to define the classes of things in your design. A header could be styled like a
header. Padding, Margins, Borders and Backgrounds were native and easy. CSS reduced the
amount of time it took to create the layout. In turn, this created more time for iterating and
improving the design.
CSS allowed the developer to eliminate the nested tables and the spacer.gif hacks. The only
problem was cross-browser compatibility issues. In other words, the benefits of CSS were
largely removed because each browser implemented the rules differently. What was a promise
of simplicity turned into a hornet’s nest of complications. It took 10 minutes to learn CSS and
the rest of your life to figure out the safe path between browsers.
One thing that browsers did mostly right was to introduce the concept of a pseudo class. A
perfect example of this is :hover. With a simple CSS definition you could specify what
happened when the user put their mouse over a link. This was the first time you could have
any real interaction without programming. It was so simple. This allowed visual designers to
introduce hover states on artistic links, like tabs.
The problem with hover and CSS is that it was just too limited. Sure you could change the CSS
on hover, but you couldn’t animate the effect. CSS held great promise, but the reality was
much more complicated. CSS did improve the lives of developers immeasurably from the HTML
only days, but it was a shallow victory. Interactivity was no closer than before.
1.4.3. Other technologies that were too hard
Flash was originally called FutureSplash and made its debut in 1996. Early on it was thought of
as an alternative to HTML. Quickly, it was bought and renamed Flash, by Macromedia.
Macromedia, who pioneered the Director multimedia authoring studio, recast Flash as a low-
bandwidth version of Director. They immediately put two levels of complication on it. One,
you had to use their program to develop. This program was hard to use and although became
popular with some, never achieved the kind of success that HTML has earned. I believe this is
because it was just too hard for a non-programmer to learn.
The second layer of complication was ActionScript, which was a programming language similar
to JavaScript which allowed Flash developers to use more interactivity in their movies. This was
complicated because it required even more programming prowess to make something that the
designer intended. Although Flash is thought of as a designer’s tool, it is actually geared for
programmers. This is evident in where they are taking the product.
In the past few years, Macromedia has taken Flash more and more over to the programmers
world. Macromedia merged with Adobe and has moved further by introducing Flex. Flex is like
Visual Basic. It is a programmer’s tool, but creates flash applications rather than Visual Basic
applications. While this may be a good strategy for them, it does nothing for me and millions of
non-programmers like me.
A senior engineering manager recently tried to get me to design for Flex. I didn’t know what to
say. Flex was really hard. Flash couldn’t be read by search engines. Designing in that tool
would require massive amounts of learning and trial/error development. What I wanted was
something I could work with easily, without having to learn to program.
JavaScript has always been just 1 step away from useful for me. It allowed all kinds of great
interactivity in the browser, but I just couldn’t grasp the programming concepts. I could cut and
paste from other people’s applications, but customization was next to impossible. I was
basically using pre-made widgets without having any real control.
JavaScript has had an exciting time in the last few years. The triggering event was the demise of
Netscape 4.7, the last of the Netscape series of browsers. In all statistics, Microsoft Internet
Explorer held 90%+ of browser share. Mozilla Firefox was just getting off the ground. This
period allowed developers to ignore older browsers. This was a big deal. The first browsers
were very different and had terrible support for advanced functionality like CSS. Internet
Explorer 5-7 and Firefox changed the dynamic. They had good CSS support and a fairly
compatible programming model. All of the sudden, new and exciting web applications were
being developed.
Without getting into specifics, we will call these new websites and web applications, Web 2.0.
It was the break from the old Netscape series of browsers to the new ones. This was great for
web developers who used HTML and CSS, in that they could reduce the number of hacks and
make the page simpler. However, it still didn’t change the fundamental fact that CSS has little
to no interactivity built in. JavaScript had the power, but only engineers had the pre-requisites
to use it.
1.4.4. jQuery, the hero
Frameworks started being build during this period. A framework is a JavaScript file that allows
another developer to ignore the cross-browser complexities and use a more standard API. For
instance, adding an onClick event (this is something that happens when a user clicks on the
screen) you would have to know 3-4 different ways of doing it, one for each browser.
By using a framework, you could call a single way of adding an event and the framework would
do the messy stuff underneath. jQuery was not the first framework, nor will it be the last.
However, it is special to me for one single, simple reason. It is designed so that non-
programmers can enjoy it as much as hard core engineers.
The reason for this is that it based its logic very closely to CSS. In the coming chapters I will
explain why this is the case. For now, let’s just assume that it is no harder than CSS.
For the first time, I am able to add advanced animation and interaction techniques to a web
page without having to ask an engineer for help. For the first time, I am able to prototype
iteratively at my desk without threatening the schedule of the project. For the first time, I feel
like I have control over the User Experience and can deliver strong markup to engineers with
interactivity included. JQuery made this possible. It is why I evangelize jQuery to every
designer I see. When a developer or designer uses jQuery they are improving the User
Experience of the user by the virtue of reducing the time it takes to muck with code. Less time
to struggle with code equals more time to focus on the user.
Add to this, the strongest, nicest community of people I have ever met. Most technical
communities are antagonistic to the newbie. Asking a simple question will often get you
ignored or worse yelled at. One other community told me to RTFM or RTFS (look it up on
google). I thought this was incredibly counter-productive. Don’t they want other people to use
the thing they slaved over? On the jQuery list, there are simple questions every day. I find
immense pleasure in personally answering as many questions as I can.
In the next chapter, we will review HTML and CSS and get started with jQuery. These are
exciting times. It’s time for you to get involved.
2. jQuery: Web Design the New Wave Way
2.1. Review of HTML and CSS
The following chapter is a review of HTML and CSS. It doesn’t contain much UX. We will get
into that with the real world scenarios after this chapter.
HTML is the stuff that web pages are made out of. The most basic one looks like this:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4. <head>
5. <title>The title is all the way at the top</title>
6. </head>
7. <body>
8. Everything goes in here.
9. </body>
10. </html>
I have little or no idea what the lines 1-3 do and you don’t need to know either. They do,
however, need to be there. The title (5) is pretty minor and it changes the text at the top of the
window the browser is in. Number 8 is the big one. It contains all of your content. If you type
this into a text file and save it as hello.htm on your desktop, you will have created a web page.
Most of what we will work on will be contained in the body (8). For the rest of the examples,
we will just write the parts inside the <body>. The main thing to understand is how html is
structured. This requires understanding the DOM Tree and the Box Model. Sounds fancy but is
really just jargon for an outline.
2.1.1. The DOM tree
Everything in HTML is part of an outline. Like a family tree or a organizational chart.
1. Penny (Parent of Ben and Katie)
a. Katie (Child of Penny, Sibling of Ben)
i. Ethan (Child of Katie, grand child of Penny, etc)
b. Ben (Child of Penny, Sibling of Ben)
2. Susie (Sibling of Penny)
You can define everything as a parent or sibling or child of something else. CSS uses this
concept all the time. The C in CSS stands for Cascading. This implies that your styles would
cascade down the tree to all the children and grand-children.
Each level is called a node. A node is anything in your html, like an image or a link or a
paragraph. Anything that looks like <something> is a node. If you have ever written HTML,
then you understand that there are lots of things that look like that. If this doesn’t ring a bell,
then you may want to try to make a webpage. It’s very easy and you can have a basic page in
about 5 minutes.
Let’s look at that example again, but this time with HTML.
<ul>
<li>Penny<li>
<ul>
<li>Katie<li>
<ul>
<li>Ethan</li>
</ul>
<li>Ben<li>
</ul>
<li>Susie</li>
<ul>
It’s the same information, but this time it’s in HTML. Every single thing in brackets <something>
is a node and can be found with CSS.
2.1.2. Basics of the Box Model (What's a DIV?)
There is another great way to visualize this tree.
There are lots of tools for browsers like Firebug (http://getfirebug.com) or IE Dev Toolbar
(http://blogs.msdn.com/ie/archive/2005/09/16/469686.aspx) which show you your html
exactly in this kind of format. It is immensely helpful to understand this kind of tree.
The second thing to understand in HTML is that everything is a box. Each node is represented
as a two dimensional rectangle with a height and width. There are no circles in html. No
octagons and no triangles either. Everything is a rectangle. They call this the box model.
Curves lines and circles can be created, but mostly through trickery.
A DIV is just a box like anything else. <DIV> The nice thing about DIV’s is that they are pretty
basic boxes. You can make anything out of them. I use them for almost everything. A <DIV> is
the basic layout building block in HTML.
2.1.3. Selectors
CSS has a simple way of finding things. Let’s build off out previous family tree html and make a
separate file called style.css. It is important to let your page know that a style sheet exists. You
do that by putting this somewhere near the top.
<link rel="stylesheet" href="style.css" type="text/css" />
The contents of the CSS file look like this:
ul li {background: purple}
ul li li {background: green}
ul li li li {background: yellow}
The results are:
The part that says “ul li” is a selector. There are lots of selectors. This one says “find any <li>
that is inside a <ul>” This actually finds every LI in the page, because they are ALL inside a UL.
However, “ul li li li” only finds Ethan because he is the only <LI> that can be described as in a
line of UL->li->li->li. Although we can get more creative with CSS selectors, let’s look at a
simpler example.
2.1.4. Classes
<div class="fancy">With a class</div>
<div>With a class</div>
And CSS that looks like:
div {background: purple}
div.fancy {background: yellow}
In CSS you can find specific kinds of nodes by simply saying class=”something”. In this case I
had two DIVs and made one have a class of “fancy”. The end result is
One neat thing that I discovered early on is that you can have an item with more than one class.
So you can have html that looks like:
<div class="fancy pants">With a TWO class</div>
<div class=”pants”>With a class</div>
This allows you to apply both classes to the item. CSS has lots of fancy tricks like this, but
mostly you use it by defining a single class. CSS is one of those things that takes 5 minutes to
learn the first 95% and forever to master the last 5%.
But since this isn’t a book about CSS, I will leave that 5% for another time. Let’s jump into the
more interactive part of CSS.
2.1.5. Pseudo Classes (Hover!)
Although some browsers allow more, all of them support a special function. If you have a link:
<a href=http://www.commadot.com>Blog</a>
You can define psedo classes that look like this:
a {text-decoration: none
a:hover {font-weight: bold; text-decoration: underline}
This works magically to bold your links and put an underline under them when the user puts
their mouse over the link. So short and simple, and it works automagically.
This has been an overview only. There is much more to HTML and CSS if you want to master it.
I just wanted to touch the basics and make sure we are all talking the same language.
2.2. jQuery Selectors (Finding stuff is even easier)
Normally when you use CSS, you must use the subset that most modern browsers support.
With jQuery you can use many more. Here is a list of the different ways you can find something
using jQuery. It is not needed to memorize or really understand all these selectors. As you get
better with jQuery you will find neat uses for many of these.
* any element
E an element of type E
E:nth-child(n) an E element, the n-th child of its parent
E:first-child an E element, first child of its parent
E:last-child an E element, last child of its parent
E:only-child an E element, only child of its parent
E:empty an E element that has no children (including text nodes)
E:enabled a user interface element E which is not disabled
E:disabled a user interface element E which is disabled
E:checked a user interface element E which is checked (for instance a radio-button or
checkbox)
E:selected a user interface element E which is selected (one or more option elements
inside a select) - not in the CSS spec, but nonetheless supported by jQuery
E.warning an E element whose class is "warning"
E#myid an E element with ID equal to "myid". (Will only match, at most, one element.)
E:not(s) an E element that does not match simple selector s
E F an F element descendant of an E element
E > F an F element child of an E element
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element
E,F,G select all E elements, F elements, and G elements
There is also a fancy way of finding things in jQuery which use something called xPath. Here are
some examples:
E[@foo] an E element with a "foo" attribute
E[@foo=bar] an E element whose "foo" attribute value is exactly equal to "bar"
E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string
"bar"
E[@foo$=bar] an E element whose "foo" attribute value ends exactly with the string
"bar"
E[@foo*=bar] an E element whose "foo" attribute value contains the substring "bar"
Additionally, jQuery supports a bunch of non-standard selectors like these:
E:link
E:visited an E element being the source anchor of a hyperlink of which the target is not
yet visited (:link) or already visited (:visited)
E:active
E:hover
E:focus an E element during certain user actions
E:target an E element being the target of the referring URI
E::first-line the first formatted line of an E element
E::first-letter the first formatted letter of an E element
E::selection the portion of an E element that is currently selected/highlighted by the
user
E::before generated content before an E element
E::after generated content after an E element
:even Selects every other (even) element from the matched element set.
:odd Selects every other (odd) element from the matched element set.
:eq(0) and :nth(0) Selects the Nth element from the matched element set
:gt(4) Selects all matched elements whose index is greater than N.
:lt(4) Selects all matched elements whose index is less than N.
:first Equivalent to :eq(0)
:last Selects the last matched element.
:parent Selects all elements which have child elements (including text).
:contains('test') Selects all elements which contain the specified text.
:visible Selects all visible elements (this includes items that have a display of block or
inline, a visibility of visible, and aren't form elements of type hidden)
:hidden Selects all hidden elements (this includes items that have a display of none, or a
visibility of hidden, or are form elements of type hidden)
Form elements also have special selectors like these:
:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type="text").
:password Selects all password fields (type="password").
:radio Selects all radio fields (type="radio").
:checkbox Selects all checkbox fields (type="checkbox").
:submit Selects all submit buttons (type="submit").
:image Selects all form images (type="image").
:reset Selects all reset buttons (type="reset").
:button Selects all other buttons (type="button").
GLEN NOTE: The explanations of these are terrible. They need examples. Maybe an
appendix?
Again, remembering all of these is not important. The important thing is knowing that you can
find almost anything on the page easily. This will help immeasurably in the real world
usefulness of jQuery and help improve your designs.
2.2.1. Different selecting strategies
There are two schools of thought in terms of which selectors to rely upon. Some people put
ID’s on every node and reference them specifically.
Example: div#something would find the following node:
<div id=”something”>
Alternate example div.something would find:
<div class=”something”>
The key difference is that IDs are usually unique on a page, wheras classes are assumed to be
repeated. I believe it is good to use IDs if you have something that is truly unique. However,
my philosophy starts with a different point. I believe html should be stripped down to it’s
barest essentials. I consider it a challenge to make the page as simple and devoid of specifics as
possible. This yields some good results. First, the page is easy to read by search engines. This
will help with people trying to find your content. Secondly, it allows you to change the design
style without changing the html. Ideally, the html is descriptive of the content, but not
particular to the style. This is called “Seperation of Content and Style”.
Additionally, I believe is something called “relative pathing”. I think it wouldn’t make sense to
describe it here, so I will bring it up again in a couple of chapters.
2.3. jQuery CSS Manipulation
90% of what I use jQuery for is to manipulate CSS. It’s always surprising to me how often I want
to simply change some css based on some logic in my head. Before jQuery I was out of luck.
But here you will see how very simple it all is.
But, before we get started, we have to change out html a tiny bit to enable jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The title is all the way at the top</title>
<script language="JavaScript"
src="http://code.jquery.com/jquery-latest.js"
type="text/javascript">
</script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
// All the jQuery goes here
});
<script>
</head>
<body>
HTML content goes in here.
</body>
</html>
The first part is just calling jQuery and letting it act on your page. The second part is
establishing a place to put the jQuery information. It’s always the same, so you don’t need to
customize it. From here on, all the example will be put in where it says “All the jQuery goes
here.
2.3.1. Adding and removing classes
Here is the first use of jQuery. It took me a while to get to it, but I am excited. So without
further ado:
$(“tr”).addClass(“someclass”);
Ok, it’s deceptively simple. Let’s think about this. This means that when the page loads, jQuery
will look through your html and find every single <TR> and add a class called “someclass” to it.
You might say, “Well, I could have done that by putting <tr class=”someclass”> in the html.
Let’s look a slightly different example:
$(“tr:even”).addClass(“someclass”);
This will find every EVEN numbered TR and add a class of “someclass” to it. If you are a
designer, then you know that shading every other row in a long grid will make the table more
readable. If I want to do this in normal javascript it would look like:
var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) {
var rows = tables[t].getElementsByTagName("tr"); I am here to
for ( var i = 1; i < rows.length; i += 2 )
if ( !/(^|s)odd(s|$)/.test( rows[i].className ) ) confuse you!
rows[i].className += " someclass";
}
Ok, for the rest of the book, I will not do that again. I can’t read the above box at all. But look
at the way jQuery does it. It’s so simple. It makes sense to non-programmers. It was so easy, I
have to do some more.
$(“ul li:first”).addClass(“someclass”);
This will find all of the very first <LI> nodes of lists on the page. I use this often when I want the
first LI to look a little different than the others for visual design reasons.
$(“input[@value=Glen]”).addClass(“someclass”);
This will look through all the input fields and see if any have a value of Glen. When making
HTML, this is impossible to know in advance. But a designer may very well want to change the
CSS of an element based on its value.
$(“div.firstclass.secondclass”).removeClass(“secondclass”);
This one finds all the of the DIV nodes that have both classes “firstclass” and “secondclass” and
then removes the “secondclass” part. As we get more advanced you will see how you may
want to do this based on things the user does, like open a menu or click a tab or put their
mouse over something important.
2.3.2. Changing CSS on the fly
In addition to adding and removing CSS classes you can change CSS attributes on the fly. The
syntax is very simple.
$(“div b”).css(“font-size”,”18px”);
This would find all of the items in bold (yes <B> is a node too) and, in addition to making them
bold, it would increase the font-size to 18px. These examples are simple, but they help give you
the basics so that we can use them in real world situations in the coming chapters.
2.4. jQuery effects
Almost all of jQuery works with the basic formula:
$(“SOME CSS SELECTOR”).DO-SOMETHING();
All of the previous examples had this exact formula. In the coming pages you will see some of
the cool things you can put in the second part, the “DO-SOMETHING” part. These techniques
are invaluable to a creative mind working on a website or application.
2.4.1. Fading and Transparency
$(“div”).fadeOut();
$(“div”).fadeIn();
$(“div”).fadeOut(“slow”);
$(“div”).fadeIn(“medium”);
$(“div”).fadeTo(“fast”, 0.5);
These are all easy operations in jQuery. They allow you to pick an element or group of
elements and fade them in or out at your pleasure. The fadeTo() function particularly
interesting. I have used this effect to enhance the user experience several times. Just recently,
I used it to fade a large button to 75% opacity. Then when the user put their mouse over the
button, it came back to 100% opacity. This effect really helps a button come to the forefront
when attention is needed and then let it recede when the user is uninterested.
2.4.2. Basic Animation
$(“div”).slideDown();
$(“div”).slideUp();
$(“div”).hide(“slow”);
$(“div”).show(“medium”);
$("div").animate({ height: '500px' }, "slow");
These are some of the simplest, yet coolest parts of jQuery. I find myself looking for places to
use them because I have such a good feeling when I see them in action. Its amazing to me how
a little animation, when used well, transforms the userexperience.
SlideDown is a critical function. So many applications just need a simple animation that opens
and closes a panel. You can put in lots of options on these as well. If you put a number in the
parentheses, it will tell jQuery how many milliseconds to make the animation last.
$(“div”).slideUp(2000) would tell jQuery to close all instances of <div> in animation style in
2000 milliseconds, or 2 full seconds.
User Experience Rule:
Animation will draw a user’s eye directly at it, like a magnet. However, if the
information they see looks like an advertisement, they will note the area that
it is in as “ad space”. This kind of effect causes Ad Blindness, where the user
will refuse to look at anything moving on your site and assume it is an
advertisement.
Once you lose a user’s trust on animation, you cannot easily get it back.
The best animation is one where the effect helps the user understand the content of the page
and what just happened. For example, when you expand a search box to reveal “advanced
search criteria” it helps the user to understand the relationship of the “advanced” versus the
“simple” when a slideDown() is used instead of just blinking the advanced tools on the screen.
There is so much you can do with just slideDown and Fade. I feel like I could show a hundred
examples of how they can help user experience. Each one could have a hundred variations just
to suit the preference of the designer. This is why I wrote the book. This little bit of technology
has empowered a whole world of possibilities. The examples if this book should be enough to
whet your appetite. At the end of the book, I will give you resources to find out more.
2.5. jQuery DOM manipulation
This sounds technical, but it really is pedestrian stuff. It allows you to change the stuff that the
user sees on the page. There are infinite reasons why you would want to do this. With jQuery
you can change the text of an element (like an H1 or <div> or <A> link) or even change the value
of text box or other form field. Additionally, you can change the css that is applied to these
elements. Every day I use jQuery I find another reason to do these things. In some cases, the
engineers could have made some backend programming to achieve a similar result, but in the
end, they prefer I could do it on my own. I prefer it that way too.
2.5.1. Changing Text
$(“div”).text(“something new!”);
$(“input”).val(“another something”);
$(“div”).html(“<b>formatting</b> works too”)
The reasons for changing text are myriad, especially if your application has other dynamic
components like Ajax. A simple example is something that I do to improve a search text input
on the page. My User Experience improvement was to put the word “Search” inside the text
box and then remove it when the user clicked on the input field. I used $(“input”).val(“search”)
and the input magically changes. I even added different classes to make it look grayed out.
This technique on a text box is called OverLabels
.
2.5.2. Changing attributes
Another extremely useful tool is the ability to change CSS on the fly. We saw how you can
addClass and removeCLass, but many times you just want to change a simple CSS rule. I have
even used this powerful feature to make complex rules. Like add 100px height to whatever
height is already there.
This brings up a powerful aspect of jQuery. Almost all of the rules to change text can also be
used to tell you what was there in the first place.
This will pop up an alert on
$(“div”).css(“border”,”1px solid red”) the screen telling you what
$(“div”).css(“height”,”50%”);
the current padding is of
the <div>.
alert($(“div”).css(“padding”));
90% of all my jQuery usage is manipulating DOM elements and their CSS attributes. Sometimes
I animate them, and sometimes I just change them. When you have this in your toolkit, you will
be surprised how often you need to do it.
2.6. jQuery Plugins
One of the great things about jQuery is the architecture of it encourages people to extend it
and make plugins. This means that jQuery itself can be very simple and that more advanced
tools and features can be put into separate plugins that handle specific jobs. The amount of
plugins and their variety is staggering. jQuery.com maintains an ever-growing list of plugins
that people have made. We will explore some of them in this book.
Additionally, at the end of the book, we will include the current list of plugins and their general
features.
2.7. Summary
2.7.1. Easy for non-programmers
The reason I love jQuery so much is the same reason I loved HTML, Tables, and CSS. They are
easy for a non-programmer like me to learn and use. Some of the more “advanced” libraries
out there may have appeal to engineers, but jQuery has hit the most important aspect, right on
the head. If non-programmers, especially designers, can have more in their toolkit, then the
web will be a better place.
I cannot overestimate how the ease of learning jQuery has changed my life. I had been
frustrated with the offerings on the web and not I feel as though I had been set free.
2.7.2. A strong community
Another huge benefit of jQuery has been its community. Specifically, it’s the mailing list. I
joined the mailing list in 2006, fairly early in the development of jQuery. Immediately, I was
surprised at how active and responsive it was. Questions asked usually got answered within
minutes. John Resig personally answered the simplest of questions. Newbies were welcomed,
not just with words, but with answers. The tone and culture, which I believe are the offspring
of John’s personal approach is the best I have ever encountered. I don’t know if it will always
be this way. But as of the writing of this sentence, it has 99% signal and 1% noise. It has my
highest recommendation and makes learning jQuery even easier.
Another benefit of the mailing list is the ease of access to the developers of the plugins. Each
plugin author wants his plugin to be used. They are interested in your feedback and
suggestions for improvements. The whole ecosystem is strong and feeds on itself.
2.7.3. Designers unbound!
Although many engineers love jQuery as I do, I believe the biggest impact is for html developers
and designers. So often in the past, they have been at the mercy of the engineering
department. A friend of mind recently recounted a story of how an engineer had told him
something was impossible. With jQuery and 15 minutes, I prototyped what they had asked for.
It is this kind of power that unleashes the full creative potential of the designer. No longer,
must the designer beg permission to add interactivity. No longer must the design create
conservative products. Anything is possible and we must design with that in mind.
2.8. Hello World with jQuery
One of the things omitted from all of the examples above is how any of this stuff happens when
the user does something. Learning that you can slideDown a panel is great, but how to I
connect that to the user clicking on a link. This example shows the basic method of hooking up
to an event. Events are things the user does. They can “click” on something or “hover” over it.
Many elements, especially form elements, are useful to do things on “blur”, “change”, “focus”
and even on drag or drop or resize.
For the scenarios in the book, we will set the stage with a pretend conversation.
2.8.1. Fade on instead of blink.
2.8.2. HTML, CSS and jQuery (all on 1 page)
2.8.3. UX Review
2.8.3.1. Getting users to read information.
2.8.3.2. Smooth transitions make context easier to understand.
2.8.3.3. Visual aesthetics improved.
2.8.4.
Part II – Real World Scenarios for Websites
7. Communicating with Dynamic Forms – “Required fields”
What is the best way to communicate required form fields and the errors that the user
encounters?
7.1. Visually designing the form
7.1.1. Room for errors
7.1.2. How to make a row look “required”
7.1.3. HTML and CSS
7.2. Interaction design the form
7.2.1. The desired effects
7.3. The jQuery solution
8. Revealing information as it’s needed
With interaction design and jQuery, a long FAQ list becomes engaging and easier to read.
8.1. Visually designing the page
8.1.1. How to make a list item look clickable (affordances)
8.1.2. Visually indicate Open and Closed
8.2. Structuring a FAQ list for growth
8.2.1. UL-LI – the Unordered List
8.3. The jQuery Solution
8.3.1. Basic solution
8.3.2. Advanced Options and when to be conservative
9. Turning “too many links” into “Unexpected Wow”
Often the homepage of a site has too many links for SEO purposes. How can we turn that
negative into a positive with UX Design and jQuery?
9.1. Different needs
9.1.1. Maintenance
9.1.2. Testing
9.2. Visually designing the interface
9.2.1. Emphasis of a control. How to dial it down?
9.3. Structure helps everyone get along
9.3.1. Loading information with Ajax
9.3.2. CSS Strategy
9.4. The jQuery Solution
10. Readability and information architecture
It’s called “Me too!-ism” Everyone wants to be on the homepage. How can you turn
“information overload” into “well organized and sensible” with the use of Tabs?
10.1. Visually designing tabs
10.1.1. Rules about tabs and folder metaphors
10.2. Setting up Panels and Tabs
10.3. The jQuery Solution
10.3.1. Options for the Tab plugin
11. Aesthetic choices like Rounded Corners
Rounded edges were difficult until now. This opens the door to more exciting visual
treatments.
11.1. Visual Design of web applications and websites
11.1.1. How to decide on a visual treatment
11.2. The JQuery Solution
11.2.1. Use the Curvy Corners Plugin
11.2.2. Advanced Options
12. Screenshots with the LightBox Effect
Screenshots and image galleries are common on many sites. What is the best way to zoom
into a screenshot and focus the user’s attention in one area?
12.1. The user interface of LightBox
12.2. The jQuery Solution
12.2.1. ThickBox Plugin
12.3. Advanced Options
Part III – Real World Scenarios for Prototyping and Application Design
10. The Prototyping Process
10.1. Who should do the work?
10.2. How long should it last?
10.3. How can iterations be managed?
11. Drag and Drop
This is one of the most powerful user interface tools available to a UI Designer. How easy
can it be?
11.1. The Interface Plugin
11.1.1. Draggable
11.1.2. Droppable
11.2. UX rules for Drag and Drop
12. Tooltips
Handing tooltips well in an application can increase task completion substantially. jQuery
removes the effort.
12.1. The jTip Plugin
12.1.1. Getting the text from Ajax
12.1.2. Other options
12.2. How users read tooltips.
13. Slider
A slider is often the best choice for showing a range of options the user can choose.
However, this control has been difficult to implement. Until now.
13.1. The Interface Plugin
13.1.1. Slider Options
13.2. Visually designing your slider.
14. Accordions
Many applications employ the accordion technique to segment objects and features into
manageable sizes. Making one is easy.
14.1. The Interface Plugin
14.1.1. Accordion options
14.2. UX rules for Accordions
15. Menus
Every application has a menu. Designers should be able to prototype strong menus on their
own.
15.1. The XX Plugin
15.1.1. Advanced Options
15.2. UX rules for Menus
15.2.1. The dreaded neck of the menu.
16. Advanced Animation
SlideDown and SlideUp are awesome, but what about more advanced animation?
16.1. The Interface Plugin Effects
16.1.1. Blind, Bounce, Drop, Fold, Highlight, Open/Close, Pulsate, Grow, Shrink, Puff,
Shake, Slide, Transfer, Easing Droppable
16.1.2. UX rules for Animation
17. Modal Dialogs
Every application has them. Designers should use them in prototypes.
17.1. The jQModal Plugin
17.1.1. Advanced Options
17.1.2. UX rules for Modal Dialogs
Part III – Summary
18. The Designer Manifesto
18.1. What is your responsibility?
18.2. Will user’s care? Will your boss care?
18.3. Good Luck
Appendix A: Resources
1.5. Online Communities
1.5.1. CSS
1.5.2. HTML
1.5.3. jQuery
1.6. References
1.6.1. Books
1.6.2. Sites
1.6.3. APIs
1.6.4. Blogs
1.7. Tools
1.7.1. HTML/CSS Editors
1.7.2. Virtual Magnifying Glass
1.7.3. Tray Color
1.7.4. Firebug
1.7.5. IE Developer Toolbar
1.8. Code samples
1.8.1. Online source, errata
. IE Developer Toolbar
1.8. Code samples
1.8.1. Online source, errata
Related docs
