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!
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.
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?
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
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.
The author walks you through what you have to do to via a numbered step by step list. It’s pretty easy to follow and do right along with her. I learned a lot just by doing this….It was a good introduction to jQuery and will help web designers in their day-to-day activities. If you’re a designer and absolute beginner when it comes to jQuery, this book can help you. –Bruce
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
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.
A great book for freelance web designers who are asked to take care of the programming as well as the graphics, even if you hate coding as much as I do. Keep this book by your side and you’ll be able to design slide shows, photo galleries, dropdown menus, navigation tags, you name it. All very easy to follow and non-scary. A worthwhile investment! –forcor
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.
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.
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.
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 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.
My goal for jQuery for Designers
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.[box type=”info”]
This book may not be for you if…
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]