Demystifying Drupal

Book Review: Design and Prototyping for Drupal

May 15, 2012 - 1:02pm

Most Drupal books tend to be very code oriented, or spend the first 25% rehashing the same basics from a dozen other books. If you haven't installed Drupal, forget a book and get cracking over at drupal.org! If you are having trouble installing Drupal, odds are a book will not have the magic answer. More direct help may me needed. Luckily this book jumps right in to the content and doesn't waste any time!

At 170 pages it is a quick read, and a cheap read as well. Drupal Association Members can get the ebook for about $7, directly from O'Reilly! (Which is what the HackMonkey did.) You are a member of the Drupal Association, right? Design and Prototyping for Drupal is actually the second book in a 3 book series, which also includes Planning and Managing Drupal Projects and Drupal Development Tricks for Designers. All three are soon to be bundled together as a single book targeted at designers. Don't let that fool you, this isn't all pretty pixels and unicorns. This book is about getting work done, and the expectations are very much inline with HackMonkey's, the reader is expected to know HTML & CSS, but not be fluent in developer speak.

The primary topics relate to:

  • Sketching and wireframing
  • Breaking down a layout for Drupal
  • A brief discussion on grids
  • Some theme basics, including base themes and sub themes
  • Dealing with generated markup, focused on Views
  • An introduction to LessCSS

That is a fair bit of info to cram in, but Dani does a pretty good job by not languishing on any particular item, much. She keeps it brief, and meaningful.

Alright, one minor correction (already?!) Installing Drupal is touched on, but done so in a brilliant way! (Take note, anyone preparing to write a Drupal book!) Dani takes one paragraph, not a chapter, and simply directs readers to NodeOne's amazing Learning Drupal 7 screencast series. Bravo!

The books 15 chapters are grouped into 3 parts:

Part I
Getting Started: Some Stuff to Consider

Immediately no punches are pulled as she quotes Dries Buytart stating he makes designers write PHP, which is of course horrible code. The point is made that Designers using Drupal may occasionally have to peak under the hood to better understand what Drupal is up to. This is really about understanding and learning, not producing the next big module. The chapter continues on explaining the importance of focusing on the content, structure and functionality of the site; reserving the visuals till later. She breaks down the design process into 4 steps: 1) Ideation, 2) Wireframing, 3) Design Comps, 4) Iteration and Client Signoff. It is obvious she shares the Monkey's view that design is problem solving, not just images. This section is wrapped up with a quick run down on a few software tools for the Drupal Designers Toolkit.

Part 2
Design and Layout

Straight into Ideation and sketching. Included is a conversation with Mike Rhode and some examples of his process.

Included is one of the better break downs on using and creating Style Tiles I have seen, without droning on about each little part. While mobile isn't a topic in this book, the Monkey would note that Style Tiles are also an good way to explain visuals to clients for Responsive/Adaptive sites, without having to do a dozen mock ups.

The beginning of layouts are covered, focusing more on elements, such as tabs, H tags, blog titles and alerts. This avoids being blinded details, by focusing on the "page". There is also a new topic to the HackMonkey - Greyboxing.

The almighty grid! We also get the first peak at some HTML and CSS3. Todd Nienkerk discusses his love for grids. Again I learned something new, the CSS3 grid layout module. Pretty cool stuff, and a mind bender- an actual w3c draft,  CSS3 grids are only supported by IE10 at the moment. Duck! That is the sky falling!

A chapter on Fireworks, huh? Actually this chapter was an eye opener. I had long since dismissed Fireworks as "not Photoshop", however this chapter showed Fireworks strength of dealing with vectors and objects to mock up and design to a grid. The HackMonkey will be digging out the DVD to install Fireworks for the first time under Adobe's reign, and re reading this chapter.

Part 3
Prototyping, Theming, and Managing your Markup

There is a quick run through prototyping, including a discussion with David Rondeau. Layouts are broken down into smaller pieces, such as Nodes, Views, and Blocks.

Popular base themes are discussed, with some tips on evaluating them. The awesome Omega theme gets some extra attention, but a couple features mentioned are actually part of the Delta companion module. That is followed by a quick primer on creating a child theme. Jason Pamental discusses the somewhat controversial topic of theming in the browser.

Then there are 2 chapters of Views tutorials. Rather lengthy Views tutorials at that. They are well done, with lots of screen shots, but it seemed a bit out of place at this point in the book. However...while the first tutorial was a rather typical, it sat the stage a very good tutorial on controlling views markup. Drupal 6's Semantic Views, which are now in the core Views 3 on Drupal 7, are highlighted. There is also  some CSS and a little foreshadowing of LessCSS. The 2 chapters are quite good together, but still felt somewhat out of place, as they are the only areas actual site building is done in the book.

A few modules to help manage code are then highlighted. Personally, this HackMonkey would have rather seen this chapter expanded and the Views chapters shortened. There are many good modules to help wrangle code.

Finally we learn about this LessCSS mentioned and even shown previously. CSS Preprocessors are awesome! The HackMonkey will be giving more love to these in the future. Perhaps it is because the HackMonkey is more inclined to Sass as a preprocessor, but it would have been nice to at least mention Sass/SCSS and Stylus? Sass and Less pretty much work the same, and are wrote the same, except they are processed differently. Less is processed with javascript and Sass is Ruby. While Sass seems to be grabbing a larger share at the moment, none the less, CSS preprocessors are awesome, no mater which flavor you choose. This final chapter is a good, quick overview of the power of preprocessing CSS.



This really is one of the better Drupal books this HackMonkey has read recently. It actually taught me something by just reading it, as well as cause me to rethink my stance on Fireworks. I knocked it out on my flight to Drupalcon Denver. It covers some great areas that don't get much attention in the other avenues, and doesn't heap on a pile of code. You aren't going to master any skills from reading it, but will give you enough info to understand the value of the topics and wet your appetite to dig deeper. Additionally, the editing is done quite well. In the rush to get books out, there have been a few other Drupal titles that have severely suffered from bad editing.


The copy of Design and Prototyping for Drupal used for this review was purchased privately by Scott Wilkinson of HaloFX Media LLC. No compensation was received for this review and this review was published without prior review or any influence from O'Reilly Media, Inc.