Book Review – jQuery For Designers By Natalie MacLees

jQuery for Designers Second Edition (Packt Publishing 2014) by Natalie MacLees is certainly one of the best learning resources I’ve come across lately.

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.

The author, Natalie MacLees, is a brilliant developer and WordPress expert. I also add, a great teacher: she succeeds in presenting what to some appears as a scary subject, like JavaScript and coding more generally, as being user-friendly, approachable, and quite harmless really.

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.

Latest web design trends often involve injecting interactivity into web pages, and although CSS3 is helpful, it’s still far from outgrowing the input that JavaScript is capable of offering to web development in this regard.

This means that it’s quite common to expect web designers to add JavaScript to their skills set. Vanilla JavaScript could be quite off-putting to a designer, especially when it comes to reconciling browser quirks and working out long-winded lines of code.

Here’s jQuery to the rescue. To my knowledge, it’s the most popular and designer-friendly JavaScript library around today and has an enthusiastic community of developers implementing it and contributing to it.

However, it’s still JavaScript, and using it means getting familiar with some programming concepts, techniques, and best practices. All of this is in jQuery for Designers.

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.

Chapter 1

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.

In its middle part, this first chapter is very clear on some core principles of best web design practices when it comes to adding JavaScript interactivity to a web page.

These are:

  • Progressive Enhancement. In particular, before thinking about all the bells and whistles, build a basic web page that works for those users who don’t have JavaScript enabled in their browsers. Only then, progressively add the fancy effects that jQuery makes possible but that will be enjoyed only by those users who have capable browsers or the appropriate settings turned on in their browsers.
  • Graceful Degradation, which is the flip side of progressive enhancement. In other words, your fancy web page has to degrade gracefully, that is, be accessible and look good, although not necessarily the same, in less capable or older browsers without JavaScript enabled.
  • Separation of Concerns, that is, keeping the content (HTML), appearance (CSS), and behavior (JavaScript) layers separate and distinct.

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:

  1. Short introduction to the task
  2. Step by step instructions on how to go about it
  3. A What Just Happened section where the author recaps and further clarifies the steps taken to accomplish the task.

Chapter 2

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.

Chapter 3

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.

Chapter 4

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.

Chapter 5

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.

Chapter 6

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.

Chapter 7

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.

Chapter 8

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.

Chapter 9

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.

Chapter 10

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.

Chapter 11

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.

Chapter 12

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.

Additional Resources

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.

As if this weren’t enough, Natalie over-delivers. The book has in fact a companion website that offers great professional videos on how to use the awesome JavaScript library.

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

One point I’d like to drive home in this review is that jQuery for Designers is not just about jQuery. It’s about the solution of web design problems using the popular JavaScript library and its plethora of plugins.

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.

I’m certain, however, that Natalie’s book will give web designers the confidence to undertake and successfully accomplish real world tasks, most of which involving JavaScript programming, that their profession throws at them.

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:

Be sure to stay connected to the jQuery community – it will be your best resource moving forward while further improving and growing your JavaScript skills.

Do you use jQuery? What are your favorite resources for learning jQuery? Would you like to learn jQuery? I’d love to hear your thoughts in the comments below.

Have your Say

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s