jQuery for Designers offers approachable and beginner-friendly lessons for designers who have little or no background in JavaScript. It helps unmask the popular JavaScript library by simplifying how to create dynamic website features such as animated slideshows, parallax scrolling effects, responsive designs, and more.

Starting with an introduction to the jQuery library, and a brief description of JavaScript, you will then work through a few simple tasks before diving into using plugins to quickly and simply add complex effects with just a few lines of code. You’ll learn how to build an animated drop-down menu, how to show content in lightboxes, and how to create an assortment of slideshows and sliders. You really can create impressive effects with just a few lines of code.

Now in its Second Edition!

The first edition of jQuery for Designers was a huge success. But as with all things related to the web, it quickly became outdated as new versions of jQuery were released, new plugins were created, HTML5 and CSS3 gained wider browser support, and new techniques, like responsive design, were created.

The second edition is a huge update. Well over half the book was created from scratch, to make sure you’re learning the latest and greatest of what jQuery is capable of!

Available Now!

Just for Designers

As a designer, you don’t want to be forced to rely on a developer to put your ideas into motion. There’s that inevitable back and forth and sometimes the page still doesn’t quite look or function the way you envisioned.

Why should designers learn a bit of code?

The modern web is responsive and highly interactive. Neither of these properties can be communicated to clients, investors, bosses, or stakeholders with static designs created in Photoshop. Modern websites benefit from an agile, content-first approach to design that happens almost entirely in the browser itself. After all, the job of a web designer is to design websites, not to draw pictures of websites. Being able to create and show a responsive, interactive mockup in the browser helps to set the right expectations.

Photoshop has tools for smoothing type that just aren’t available in the browser, leading to design letdown when the client sees the final product. Plus, trying to set text in Photoshop is such a hassle, and after all that time and energy, a PSD just doesn’t look the same as a functioning website. Plus, a PSD can’t respond to the width of the window or show what happens after a button is clicked like a website can.

Be indispensable

A designer who can quickly mock up a website in Photoshop is a valuable asset for sure. But a designer who can quickly mock up a responsive website in the browser with a working animated slideshow and interactive accordion is absolutely indispensable. Having the skills that allow you to work effectively in a world of agile and responsive design makes you an integral part of any web design team. You don’t want to become an ‘old-fashioned’ web designer who draws pictures of websites in Photoshop.

You don’t need to be an experienced code ninja. With the help of jQuery and a choice plugin or two, you can quickly create dynamic and interactive mock ups for your designs. Having down a few basics in the medium you’re designing for is crucial and sets you apart from a field full of designers who lack those skills.

Who is this book for?

In a word, this book is crafted just for designers and other non-programmers who want to learn the basics of jQuery and JavaScript. If you know the fundamentals of HTML and CSS and want to extend your knowledge by learning to use JavaScript, then this is just the book for you. jQuery makes JavaScript straightforward and approachable — you’ll be surprised at how easy it can be to add animations and special effects to your beautifully designed pages.

Even if you’ve never written JavaScript before, I’ll step you through creating a variety of popular effects.

Wait..what’s the difference between jQuery and JavaScript?

You probably know JavaScript as that language developers use to create animations, do calculations, create games, and other assorted interactive things in the browser.

Well, jQuery is a JavaScript library. Developers tend to solve the same sorts of issues over and over again – just think of how many different websites use an animated slider, for example. Rather than having to craft solutions from scratch all the time, developers can make use of snippets of code written by other developers. When you collect up a bunch of useful snippets of code, you get a library of useful bits of code that will help you get through common tasks.

So jQuery is JavaScript. Using jQuery helps out by providing already-written JavaScript for common tasks. Instead of having to write all that stuff from scratch, we can just use the code that’s already written to give us a leg up. What that means is that we can create complex interactions and really cool animations in just a couple lines of code.[/box]

What’s in the book?

Working code samples are provided for each and every tutorial in the book, so you’ll always have real, working code to use as a reference while you’re learning. Here’s a look at a few of the things you’ll learn to do:

Designer, Meet jQuery

Chapter 1 introduces the reader to jQuery and explains why it’s an awesome choice for designers. We’ll cover some JavaScript basics, and then I’ll show you how to get set up to use jQuery on a simple HTML page.

Enhancing Links

In Chapter 2, we’ll dive into enhancing links with new styles and behaviors. We’ll cover creating a simple tabbed interface for displaying chunks of content and we’ll look at adding custom tooltips to your pages.

Making a Better FAQ Page

Chapter 3 steps you through creating a progressively-enhanced  and animated FAQ page, which is essentially a simple accordion.

Building an Interactive Navigation Menu

In Chapter 4 we look at creating interactive animated navigation menus – both dropdown menus and flyout menus are covered and I’ll also show you how to customize them to fit the design of your site.

Showing Content in a Lightbox

In Chapter 5, we’ll look at showing content in lightboxes. We start off the chapter with a thumbnail gallery of images – when clicked the full-size image is shown in a lightbox. Then we step through a variety of other options like showing a login box, videos, and even a website gallery in a lightbox.

Creating Slideshows and Sliders

Chapter 6 steps you through creating a variety of slideshows and sliders – probably one of the most common uses of JavaScript on the web today.

Working with Responsive Design

In Chapter 7, we’ll step through the ways jQuery can help iron out sticky issues with responsive design, from fitting videos to their container easily, to creating a responsive navigation bar, to creating a tiled layout for photos.

Getting the Most from Images

Chapter 8 will show you how to get the most from images. We’ll look at lazy loading images so that they’re only loaded when needed. Then we’ll learn how to create zoomable images – a great technique for ecommerce sites. Finally, we’ll take a look at how to create full-screen background images and slideshows.

Improving Typography

In Chapter 9 we’ll take a look at improving typography with jQuery. Did you even know such a thing was possible? Yep, JavaScript can even help your designs look more beautiful. We’ll look at fitting text to our layouts, adjusting kerning and styling individual letters, and finally learn how to shape text into arcs.

Displaying Data Beautifully

Chapter 10 covers displaying data beautifully. First we’ll learn how to turn a large table of data into an interactive data grid. Then we’ll learn how to turn tables of data into gorgeous and dynamic charts and graphs.

Reacting to Scrolling

In Chapter 11, we tackle parallax and other scrolling effects. We’ll learn to create animations that react to the page being scrolled, how to detect where we are on the page, and how to animate the move up and down the page.

Improving Forms

Finally, Chapter 12 covers improvements to forms. We’ll look at using the new HTML5 form elements, adding some nice effects for improving the user experience, and also look at how we can use jQuery to improve the design of our forms.

All the tutorials in the book are focused on using HTML5 form elements and attributes whenever possible, and also in making sure that we’re making use of progressive enhancement. With these principles in mind, you’ll ensure that your pages will work for the widest possible audience and also that you’ll improve the accessibility of your pages for people with disabilities.

Get Your Copy Now!

I’m a designer, too!

I got my start way back when in the world of print design. I used to design posters, trade show booths, catalogs, sales sheets, business cards, and packaging. Then I stepped into the web and fell in love. I was thrilled to learn that a design was never final and that my work never came back from the printers with the wrong shade of blue. If I spotted an issue on a website, I could just fix it.

I got started making websites with WYSIWYG tools. I started with FrontPage Express, then FrontPage, and eventually moved on to Dreamweaver. Even early on, though, I bumped up against the limitations of those tools and learned to fine-tune things in the code itself. And of course, it wasn’t long at all before I realized my carefully designed pages looked different in different browsers! So I learned to handle that gracefully and gained experience in a variety of hacks and techniques for dealing with browser differences.

I tried JavaScript…and quit!

I really tried. I read book after book, took workshops and online courses, asked questions in online forums, but I just couldn’t get it. Everything was written for programmers and coders, and it was impossible for my to use my design thinking to learn and understand. I was able to create really simple scripts, but anything beyond just changing a color or swapping an image was well beyond my skills.

Then I checked out a thick, chunky JavaScript book from the library, determined to sit down and make myself learn it once and for all. Well, within the first two pages, the author was going on and on about how hard and complex JavaScript was and that’s when I quit! I just closed up the book, returned it to the library and decided I didn’t need to learn JavaScript.

For awhile, I was fine. JavaScript was fussy and unreliable anyway, so not a lot of websites were making much use of it. But then the browsers ironed out their differences and JavaScript started becoming popular again. I resisted for as long as I could, but then not knowing JavaScript started getting in the way of my landing jobs and clients.

I tried JavaScript again

When I tried to dive in again, I was lucky to find a few patient souls that spoke to me about JavaScript in a way that my designer mind could understand. With the help of a few online communities and my own determination, I started to grasp the basics, and then I was able to understand more complex concepts and put them to use in my code. I slowly stopped relying on scripts written by others and started being able to code up my own JavaScript.

My goal for jQuery for Designers

When Packt Publishing approached me and asked me if I’d be interested in writing a jQuery book for designers, I jumped at the chance. I wanted to create the resource that I myself so badly needed 10 years ago when I was struggling to wrap my head around JavaScript.

I knew I wanted the book to be gentle, non-scary, non-intimidating, and one that would allow designers to wrap their heads around the basic concepts in JavaScript and jQuery. I knew I wanted to make designers feel comfortable stepping into the world of JavaScript. I wanted to take away the anxiety and show them how easy it could be.

jQuery is the perfect tool for the job – it irons out the differences between browsers, allows us to work with CSS selectors we already know, and provides us with code for tackling tons of frequently-used design patterns. jQuery helps make that first step into the world of JavaScript a manageable one.

In addition, the jQuery community is large and supportive. It’s easy to find support, get questions answered, and there’s a nearly limitless library of pre-built plugins available for us to use in our own projects.

This book may not be for you if…

If you’re an experienced front-end developer looking to really dig into JavaScript or jQuery in detail, then this is probably not the book for you. The techniques described in the book might be helpful to you, but I’m betting you’d be more interested in digging into the DOM in depth and figuring out the more advanced jQuery methods. You might even want to learn to write your own jQuery plugins. That’s all great, but you won’t learn those things in this book.

If you’d like to really dig in, allow me to suggest Learning jQuery, which was written just for advanced developers and programmers who want to really dig in and do all sorts of custom coding with jQuery. jQuery for Designers is just for beginners – designers and other non-programmers who want to get the basics down and accomplish something quickly without having to learn too many details.[/box]