www.it-ebooks.info www.it-ebooks.info Drupal for Designers Dani Nordin Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo www.it-ebooks.info Drupal for Designers by Dani Nordin Copyright © 2012 Dani Nordin. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Editors: Julie Steele and Meghan Blanchette Production Editor: Rachel Steely Copyeditor: Audrey Doyle Proofreader: Kiel Van Horn Indexer: Angela Howard Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrators: Robert Romano and Rebecca Demarest July 2012: First Edition. Revision History for the First Edition: 2012-07-11 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449325046 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Drupal for Designers, the image of a butterfly blenny, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. ISBN: 978-1-449-32504-6 [LSI] 1342019778 www.it-ebooks.info Table of Contents Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii 1. Some Things to Remember About Working with Drupal . . . . . . . . . . . . . . . . . . . . . . . 1 A Quick and Dirty Guide to DrupalSpeak 1 Discussing Drupal with Clients 5 Organizing Your Files 5 Life Cycle of a Drupal Project 6 Implementation Plans: Breaking Up Your Work 9 And Now We Are Six 10 Part I. Discovery and User Experience 2. Setting the Stage—Discovery and User Experience . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Discovery: Breaking Down the Project Goals 13 Project Discovery 14 User Experience: Framing the Design Challenge 15 Getting Your Hands Dirty with UX 15 Bringing UX Design to an Embedded Team 19 Study the Organization You’re Working With 20 It’s Not About Looks 21 The Drupal Designer’s UX and Design Toolkit 21 Balsamiq Mockups 22 Fireworks 22 Axure RP 24 3. User Experience—Techniques for Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 User Personas 27 User Flows 30 iii www.it-ebooks.info Mind Mapping 31 Functional Breakdowns 31 Screen Sketches and Wireframes 36 Content Strategy Documents 37 Low-Fidelity Prototypes 37 Functional Specifications 37 Paper Prototypes 38 When to Use a Paper Prototype 39 Creating a Paper Prototype 39 Walking Through the Prototype 40 Non-HTML Digital Prototypes 43 HTML or Drupal Prototypes 44 UX Techniques and Drupal: Some Practical Issues 44 A Further Note on Documents 44 4. Putting It in Practice—A Short-Form Project Brief . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Real-World Example: The TZK Project Plan 48 Step 1: Identify the Project Goals 49 Step 2: Identify the Audience 50 Step 3: Focus on the Information Architecture and Content Strategy 51 Step 4: Identify New Features or Technologies You Want to Include 52 Step 5: Upgrade, or Start from Scratch? 53 Step 6: Figure Out Theming and CSS Issues 53 Go Deeper: User Experience and Project Management 54 Books 54 Websites 54 Part II. Sketching, Visual Design, and Layout 5. Sketch Many, Show One . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Style Tiles: A Way to Explore Multiple Design Ideas 65 Design Layout: Covering All Your Bases 68 Greyboxing: An In-Between Option 70 6. Working with Layout Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Why Use a Grid? 73 Grids in Wireframing 75 Grids in Theming 76 Anatomy of a Grid Layout 78 Working with Square Grid 82 But What About All These Presentational Classes? There Must Be a Better Way! 83 iv | Table of Contents www.it-ebooks.info The New CSS Grid Layout Module: The Future Is Now 84 Going Deeper: CSS Layout and Grid Systems 86 7. Putting It in Practice—Setting Up Fireworks Templates for Drupal . . . . . . . . . . . . . 87 Step 1: Set Up the Grid 88 Step 2: Set Up the Header 89 Step 3: Create a Single Node Page Without a Sidebar 91 Step 4: Create Single Node Pages with One and Two Sidebars 93 Step 5: Create the Other Pages 96 Part III. Setting Up a Local Development Environment 8. The Drupal Designer’s Coding Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Wait, What? Why? 103 A Note for Windows Users 103 The Drupal Designer’s Coding Toolkit 106 Coda 106 Less.app 107 MAMP 108 Terminal 108 Navicat 109 phpMyAdmin 109 Drush 109 Git 109 Dropbox 110 Working on the Command Line: Some Basic Commands 110 Commands 111 That Wasn’t So Bad, Was It? 112 9. Installing Drush . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Installing Drush 113 Another Option: Creating a Symbolic Link to Drush 116 Now the Fun Begins 117 10. Getting Started with Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Master Versus Origin 119 Setting Up Git for Your Workflow 120 Step 1: Create an SSH Key 121 Step 2: Install Git 123 Step 3: Set Up Your Git Configuration 124 Step 4: Set Up a GitHub Account 125 Step 5: Create the Remote Repository 125 Table of Contents | v www.it-ebooks.info Step 6: Set Up the Local Repository 126 So, What Happens on a Team? 127 First Things First: The Git Workflow 127 And There We Go 128 11. Putting It in Practice—Setting Up a Local Development Environment and Installing Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Step 1: Install MAMP 130 Step 2: Set Up Your Local File Structure 130 Step 3: Set Up the Drupal Files 133 Step 4: Set Up the Drupal Database 134 Step 5: Install Drupal 137 Step 6: Use Drush to Install Some Modules 138 Part IV. Prototyping in Drupal 12. Prototyping in Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Working with Content and Content Types 148 Trial by Fire 149 Working with Content Types: A High-Level Overview 151 Organizing Your Content 153 Putting It All Together 156 13. Choosing Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 So Many Modules; How Do I Choose? 159 Go-To Modules 160 Pathauto 161 Views 161 Context 161 Webform 162 WYSIWYG 162 Mollom 162 Media 163 Block Class 163 Semantic Fields 165 Fences 165 Oh-So-Nice-to-Have Modules 165 Field Group 166 Link 166 References 166 View Reference 166 Block Reference 167 vi | Table of Contents www.it-ebooks.info Submitagain 167 I Don’t Need This, but Ooh, It’s Purty! Modules 167 Views Slideshow 167 Colorbox 168 User Points 168 HTML5 Tools and Elements 168 @font-your-face 168 A Completely Incomplete Listing 168 14. Making Views Sing—Using Views to Enhance a Layout . . . . . . . . . . . . . . . . . . . . . 169 But I’m Not a Developer—What If I Don’t Want to Code? 171 Step 1: Create the “Event Categories” Taxonomy Vocabulary 172 Step 2: Create the Event Content Type 173 Step 3: Create an Image Style 180 Step 4: Create the User Profile 186 Step 5: Get Profile Content into the Event Page 189 Setting Up the View 190 Step 6: Set Up the Contextual Filter 194 Step 7: Set Up the Related Events Block 196 So, What Did We Just Do Here? 200 15. Making Views Sing—Controlling Views Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Step 1: Associate an Image with a Taxonomy Term 203 Step 2: Create the Event Categories View 204 Step 3: Update the Field Settings 206 Step 4: Add a Custom Class to Each Taxonomy Term: Name Field 208 Step 5: Style Away 210 So, What Did We Just Do Here? 212 16. Getting Started with Drupal Theming: Base and Child Themes . . . . . . . . . . . . . . . . 215 Breaking Down a Layout for a Drupal Implementation 215 Nodes 215 Blocks 216 Views 216 Choosing a Base Theme 218 How to Choose a Base Theme 219 Other Base Themes to Try 221 Creating a Child Theme 222 Other Things You Should Know About Base Themes 225 Clear the Theme Registry! 225 Working with Regions 225 Please, Tell Me More! 226 Table of Contents | vii www.it-ebooks.info 17. Making CSS Easier with LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Creating Variables 227 The Mighty Mixin 228 Nested Selectors and Styles 228 Compiling the Code 229 Working with LESS: Organizing Your Stylesheets 230 Setting Up Color Variables 230 Why LESS Is Awesome (Besides the Obvious) 233 Working with LESS on a Team 235 Part V. Making It Easier to Start Projects 18. Using Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Still More Awesomeness Awaits 246 19. Working with Drush Make and Installation Profiles . . . . . . . . . . . . . . . . . . . . . . . . . 247 Step 1: Install Drush Make 248 Why This Is Lovely 250 Getting Started with Install Profiles 250 Part VI. Working with Clients 20. Proposing and Estimating Projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Preproposal Discovery: What You Need to Know 255 Pricing a Project: Fixed-Bid Versus Hourly 257 Writing the Proposal 258 21. Getting Clients to Love You, Even When You Have to Tell Them “No” . . . . . . . . . . . 261 That’s Easy for You to Say 263 The “Professional Relationship” Clause 264 22. After the Handoff—The Project Retrospective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Including Clients in the Retrospective 266 Documenting What You Learned 267 Documenting for the Community 269 Part VII. Sample Documents A. Project Brief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 viii | Table of Contents www.it-ebooks.info [...]... | Introduction www.it-ebooks.info She is a regular feature at Boston’s Drupal meetup and is a regular speaker at Boston’s Design for Drupal Camp In 2011 she was one of several contributors to The Definitive Guide to Drupal 7, published by Apress, and she wrote three guides for O’Reilly’s Drupal for Designers series; Drupal for Designers, which combines the three guides with new content, is her fifth... the Drupal community, he regularly speaks at Drupal events and participates in code sprints all over the world As a member of the Drupal. org Redesign Team, he helped spearhead the effort to redesign Drupal. org and communicate a fresher, more effective Drupal brand He is also a member of the Drupal Documentation Team and has chaired tracks for DrupalCon Copenhagen 2010, DrupalCon Chicago 2011, DrupalCon... is a quick and dirty guide to DrupalSpeak, which is my tongue-in-cheek way of describing Drupal s unique jargon It includes the most common terms you’ll find people using when they talk about Drupal Drupal core (or core Drupal) The actual Drupal files that you downloaded from http:/ /drupal. org Drupal core” is also used to talk about any functionality that is native to Drupal, as opposed to contributed... processors So if you’re new to Drupal, welcome! Please ignore the gallows humor in the previous paragraph Drupal is great! If you’re already a Drupal pro and picked up this book to see how other folks do it, we should get together and do what Drupal experts do best: complain about Drupal All kidding aside, Drupal is an amazing platform built and supported by more than 17,000 talented designers and developers... rendering For the most part, we won’t talk about theme hooks in this book; however, they’re quite useful to know as you move forward in Drupal Konstantin Kafer and Emma Jane Hogbin’s Front End Drupal (Prentice Hall) is a great resource for anything you’d want to know about theme hooks, although the current edition (as of this writing) is still focused on Drupal 6 Check out http://www.frontenddrupal.com/ for. .. information on that book, and for a bunch of interesting tutorials on advanced Drupal theming The chapter on theming written by Jacine Luisi for The Definitive 4 | Chapter 1: Some Things to Remember About Working with Drupal www.it-ebooks.info Guide to Drupal 7 (Apress) also contains a lot of great information about theme functions Full disclosure: I’m one of the authors of that book Discussing Drupal. .. important information For clients who are new to Drupal or just learning about it, you need to do a bit more handholding in order to get them on board with the process Designing for content management systems is very different from designing for Flash or with straight HTML; it’s remarkably common that designers new to Drupal realize too late that the brilliant layout they designed won’t go into Drupal without... template.php for your theme Advanced themers may also create their own base themes or build a custom theme for every project Template files (*.tpl.php) Individual PHP files that Drupal uses for template generation Most Drupal themes will have, at the very least, a tpl.php file for blocks, nodes, and pages Once you get the hang of working with tpl.php files, you can create custom templates for anything... you gained through the project, either in an internal wiki for your team, or on Drupal. org, where it can benefit the Drupal community Figure 1-2 provides a quick visual breakdown of how a typical Drupal project works 8 | Chapter 1: Some Things to Remember About Working with Drupal www.it-ebooks.info Figure 1-2 Typical project life cycle for a Drupal site Implementation Plans: Breaking Up Your Work Another... getting into the practical examples, the site building examples in this book are focused primarily on working in Drupal 7 The reason for this is simple: although I’ve done a lot of work in Drupal 6, the usability enhancements in Drupal 7, the latest version of the Drupal CMS, have made it my choice for starting new projects Despite this focus, much of the material in this book is version-agnostic—particularly . www.it-ebooks.info www.it-ebooks.info Drupal for Designers Dani Nordin Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo www.it-ebooks.info Drupal for Designers by Dani Nordin Copyright. in Drupal 7. The reason for this is simple: although I’ve done a lot of work in Drupal 6, the usability enhancements in Drupal 7, the latest version of the Drupal CMS, have made it my choice for. three Drupal for Designers guides with some new material, a more logical flow, and better grammar, is for the solo site builder or small team that’s itching to do interesting things with Drupal