Preface

Introduction

If you’re reading this book, you’re probably a web designer who has heard of Drupal, wants to get started with it, and may have even tried it out a couple of times. And you might be frustrated because even if you’re used to code, Drupal has thrown you a major learning curve that you hadn’t expected. And just when you think you’ve gotten a basic site together, now you have to figure out how to make it look right—and the whole process starts over again.

Yep, I’ve been there too. That’s why I wrote this book.

This book is for the solo site builder or small team that’s itching to do interesting things with Drupal, but needs a bit of help understanding how to set up a successful Drupal project. It’s for the designer who knows HTML and CSS, but doesn’t want to have to learn how to speak developer in order to parse Drupal documentation. Most importantly, this book is for those who want to use Drupal to make their vision a reality, but need help working their minds around the way that Drupal handles design challenges.

What I present here are not recipes for specific use cases; although recipes can be useful, experience has shown there’s rarely just one way to accomplish an objective in Drupal. Rather, what I’m offering is context: a way of understanding what Drupal is and how it works, so that you can get over the hump and start figuring things out on your own. Over the course of this series of books, I’ll help you understand:

In This Volume

In this second volume, Design and Prototyping for Drupal, we’ll start digging into the practical design challenges that Drupal presents, and look at some strategies for dealing with them. You will learn:

  • Strategies for sketching, wireframing and designing effective layouts for Drupal

  • How to break down a Drupal layout to understand its basic components, and where those components are coming from within Drupal

  • An introduction to working with layout grids and the 960 grid system to facilitate efficient wireframing, layout and theming

  • The basics of Drupal’s theming layer, including what to look for in a base theme, and how to create a subtheme to hold your customizations

  • Strategies for managing the markup that Drupal produces, including the markup that comes from Views, the powerful module that helps organize and display the content in your Drupal site

  • An introduction to LessCSS, which can help you organize your CSS and theme your site more efficiently

A Quick Note on Nomenclature

Before we continue, it’s important to make a distinction between visual design and theming. While many themers can design and vice versa, visual design (as defined in this guide) is the act of creating a set of visual standards that will control the way the site looks. This could involve something as simple as picking out colors and font choices for the site, and creating some standards for laying out type, boxes, etc. More often, it involves creating visual mockups in a program such as Fireworks or Photoshop.

Theming, on the other hand, is the process of implementing those visual standards across the site’s template files, using HTML, CSS, and PHP. While theming can (and sometimes does) happen without visual design, design is what truly brings the message home to the client’s audience. When well constructed, and implemented by talented themers, a site’s visual design is an important factor in whether the site meets the client’s business objectives.

Theming, as a distinctive job description, seems relatively unique to the Drupal universe. While many other CMSs include some idea of a theme layer—“theme” being defined as a set of customizable templates through which content is displayed—with many CMSs, designers either appropriate an existing theme to create their design, or they hand finished design comps off as either images or HTML files to a developer, who integrates those files into the website’s structure. While this can also be done in Drupal, it’s not advised; Drupal’s theme layer has a level of complexity to it that makes simply modifying an existing theme problematic. For this reason, many Drupal designers will turn to themers, also called “Front-End Developers,” to help them implement their designs, particularly if they include any kind of fancy stuff.

A Note on Code

One thing I must emphasize about the Drupal design process is that it often involves getting into code—but not always. As mentioned before, many excellent Drupal designers never touch a line of code; however, those designers always have developers who help them implement their designs. If you want to design for Drupal but don’t have access to developers, well, you’re going to need to learn code and site building in Drupal. There’s no way around it if you want to do good work.

The good news, however, is that’s part of what you’ll learn about in this book. While I’m not going to provide you with a recipe for a generic promotional site, or guidance on how to install Drupal, what I will do is show you how I figured out some of the stickier design and implementation challenges for a couple of real world projects, which will give you an insider’s look at what it’s like to design and prototype in Drupal.

But Dani, I’ve Never Even Installed Drupal Before; What Do I Do?

This guide assumes that you’re at least somewhat familiar with Drupal, particularly Drupal 7. If you’ve never worked with Drupal at all, you might find some of the examples confusing. If you need to get started working in Drupal from the ground up, I recommend checking out NodeOne’s excellent “Learn Drupal 7” training series. The series, located at http://nodeone.se/blogg/learn-drupal-7-sceencast-series-summed-up, will walk you through the basics you need to get started building your own site. Don’t worry; I’ll wait for you.

Get Design and Prototyping for Drupal now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.