The way it came into my hands was totally by chance, actually by sheer good luck.
I simply happened to win a contest on the occasion of Natalie MacLees’ guest appearance on one of the well-known WPElevation podcasts. The best prize was Natalie’s book, and I won! Thank you WPElevation and thank you Natalie for making available a copy of your book to the winner.
The second edition of jQuery for Designers (the first one goes back to 2012) is jam packed with how-tos, web design best practices, latest CSS3 techniques, and ways to test your learning. All of this, set in the concrete context of carrying out practical tasks that can be considered quite common practice when building contemporary website designs.
Let’s take a closer look into Natalie’s book.
jQuery for Designers – General Structure
What you’ll find inside Natalie’s book is a true development of what’s written on the cover, starting from its title.
What about the book’s approach to teaching? That too can be gathered from the cover. Just above the title, you find this simple maxim:
Learn by doing: less theory, more results
This is exactly what you’ll find in the book. In other words, soon after the proper introductions between Designer and jQuery have been made, therefore breaking the ice and making everyone involved feel quite comfortable with each other, it’s already time to tackle a practical design goal.
Not just any design goal, but a real world one, which gets gradually more ambitious as the book progresses from the earlier to the later chapters.
Just after the last project in each chapter, Natalie presents a Have a go hero section. Here, she suggests ways in which her readers could practice what they just learned and experiment with the new knowledge to better master it and get ready for the next step.
Where appropriate, the book also offers a quiz so that readers can further test their new knowledge. Answers to all the quiz questions are available at the end of the book.
Finally, each chapter closes off with a Summary section where the author briefly surveys the ground just covered and anticipates the topic of what comes next.
There are twelve chapters in the book, let’s examine them closer.
The first chapter is the only one that doesn’t dive straight into some project. That’s understandable, though. The author gently brings about the encounter between designers and jQuery.
On the basis of its content, the chapter can be further sectioned out into four parts.
In the first part, designers are encouraged to approach themselves to jQuery as the book’s author points out the designer-friendliness of the library. In fact, jQuery makes extensive use of what designers already are expected to know to do their job. For instance, jQuery targets DOM elements the same way as designers do with CSS.
Also, jQuery enables designers to achieve impressive effects by using only a few lines of code, and offers a range of plugins that makes almost anything possible without being an expert coder.
These core best practice principles are strictly applied by Natalie in each and every task and sample code contained in the book.
The third part of chapter one is a soft introduction to basic programming concepts to pave the way to a more comprehensive understanding of the coding samples and techniques to follow.
Concise and accurate notions of variables, objects, and functions are the bare minimum one needs to handle before tackling even the first line of a jQuery code snippet.
Finally, the fourth part of this first chapter deals with some action: downloading jQuery, setting up a web project with the jQuery library ready to go, and getting one’s hands dirty with DOM manipulation right away by adding a new paragraph using jQuery append() method.
The way each practical task in the book is structured is great:
- Short introduction to the task
- Step by step instructions on how to go about it
- A What Just Happened section where the author recaps and further clarifies the steps taken to accomplish the task.
The second chapter sets the tone for all the others. It opens with a real-world project for any designer: building a tabbed navigation component out of ordinary HTML links.
The second part of the chapter introduces designers to the use of jQuery plugins by explaining what they are, the benefits of using them, and some guidelines on how to go about choosing plugins for a project.
Finally, Natalie picks up Steven Benner’s jQuery PowerTip plugin and shows how to implement and configure it to make it do what you want.
This chapter is all about building a fancy FAQ page. In the process, readers will learn how to traverse the DOM, to code simple jQuery animations, and to toggle elements in and out of view.
The core project in this chapter involves building a horizontal and vertical interactive navigation menu with drop-down sub-menus. These tasks are accomplished using the SuperFish jQuery plugin.
This chapter is all about lightboxes. You start by building a simple lightbox for a photo gallery, then a slideshow, a fancy login form displayed in a lightbox, a video displayed in a lightbox, and finally a one-page web gallery. These projects are all accomplished with Jack Moore’s Colorbox plugin, that in this chapter gets closely examined by applying and testing most of its capabilities and configuration options.
What’s more common than slideshows and galleries on web pages nowadays? Chapter six is entirely dedicated to building these widely used widgets.
Readers will learn…
- how to plan for and code a simple cross-fading slideshow from scratch
- how to build a more sophisticated one using the Basic Slider plugin
- and finally to build fantastic slideshow and carousel widgets using the versatile Cycle 2 plugin.
The demands that responsive design makes on designers are quite pressing: images and videos need to be fluid, elements have to look nicely laid out when viewed on wide as well as small screens, etc. Some of these demands are easily met by CSS Media Queries. However, CSS doesn’t cover all bases, and when this is the case, here’s jQuery to do the heavy-lifting for us.
Chapter seven starts to deal with tasks that involve responsive design. In particular:
- responsive video embedding using the popular FitVids plugin
- responsive navigation menus using the MeanMenu jQuery plugin integrated with SuperFish
- and finally a responsive tiled layout using the Masonry library.
This chapter is dedicated to the use of images on the web.
Who hasn’t come across a website where images magically appear as the user scrolls down the page? It’s a nice feature, not only aesthetically, but also from a user experience point of view. In fact, the user doesn’t need to wait until all images are loaded in the browser before being able to access the page content. Images are instead loaded as necessary, that is, only as the location where they’re expected to appear is inside the browser’s viewport.
In this chapter, Natalie shows how this can be accomplished using the Unveil plugin by Luis Almeida.
Other great tasks involving images included in this chapter are the creation of zoomable images with Jack Moore’s jQuery Zoom plugin, and how to build a full-screen image background using Jay Salvat’s Vegas Background plugin.
This is a great chapter on responsive typography, which is a somewhat neglected aspect of responsive design, at least with respect to the attention given to images.
The chapter guides readers to the use…
- of the FitText plugin to size headlines responsively to the browser width
- of the SlabText plugin to create perfectly sized multiline blocks of text
- of the Lettering.js plugin to fine-tune kerning and apply special effects on the text
- and of the ArcText plugin to set text on a curve.
This chapter is all about solving the problem of how to display data in a beautiful way. And jQuery is great for this.
The author shows how to turn a boring-looking table into an interactive data grid using the DataTables jQuery plugin. She also shows how to customize the appearance and behavior of the data grid with the jQuery UI ThemeRoller plugin.
Finally, readers will learn how to use tables of data to create charts and graphs with the jQuery Visualize plugin.
This is a chapter that I’m sure will be very popular among designers. One-page websites with amazing scrolling effects are so trendy lately that it’s impossible for anyone to fail to take notice of them.
Well, Natalie shows all the jQuery and CSS3 tricks of creating parallax effects and fancy animations on page scroll using the Scrollorama plugin by John Polacek, and making the navigation menu react to scrolling.
The final chapter is about an essential element in most websites, but a real pain for most web designers, i.e., web forms.
Here Natalie shows…
- how to code an accessible web form using HTML5 and place the cursor in the first form field automatically
- how to validate user input using Jörn Zaefferer’s Validation plugin
- and how to style unstyleable form elements to our heart’s content with Lutrasoft’s FancyForm plugin.
jQuery for Designers is extremely practical in its orientation, but also very dense in content. I could only give an outline of what it has to offer.
I’m talking about the Designers Learning jQuery screencasts, that is:
… quick, easy videos that introduce you to one jQuery concept. Learn jQuery in easily digestible bites!
This is an excellent resource that Natalie generously shares with her readers. Don’t miss out!
To Sum Up
This means that you’ll also find precious nuggets of web design knowledge like HTML5 and CSS3 tricks, or how to handle large images on the web.
It also means that jQuery plugins are not just plugged into the project, but are fully configured and adapted to meet the project’s needs, and I repeat, the book is crammed with real life web design projects that are very current to today’s trends.
Will jQuery for Designers turn every designer into a jQuery coder? Certainly not, but that’s not expected from this book.
A number of jQuery for Designers readers will also feel empowered to advance in their knowledge of the jQuery library by heeding Natalie’s encouragement to do so at the end of her book: