Notes from Design4Drupal 2010: Designing with Drupal

 

These are my notes from Earl Miles' talk on January 24, 2010 at Design4Drupal at the Stanford Law School. The talk was titled Designing with Drupal. It started out with Earl saying:

"This isn't an attack against designers."

This is an observation of how it's difficult for new designers to design for Drupal.

Back in Drupal 4.6, there was much less flexibility to adapt Drupal to different design UIs. We had to design a site for kids, which had very specifc UI requirements, so we ended up not using a bunch of core Drupal functionality like blocks. We re-wrote the User module.

I want you to re-think how your architect, design and implement a Drupal website. The way we do Drupal now is kind of a pre-Copernican idea of "everything revolves around the Earth." A typical Drupal design contains regions, blocks in regions are unrelated to the content, you have to use PHP snippets to make blocks context sensitive, you can only place a block in one region, and all regions always render, even when they're not included in page.tpl.php!

That's a problem, because designers don't see a page like that. Designers just see one page! It may be a template for a series of pages, but they want to put things where they want, and not be saddled with the Drupal hindrances.

Also, designers like grids.

OH: Come on people, you're supposed to laugh at that.

One of my goals ever since I got started with Drupal to make this possible, where you didn't have to use the block administration tools. Fixing block administration would leave a lot of maintainability problems, so instead we have this new system:

  • Panels helps turn Drupal from its standard "river of news"
  • Chaos Tool Suite (Ctools)
  • Page Manager looks like the views UI, but it controls pages
  • Panels Everywhere
  • Views
  • A good foundation theme (Zen, Adaptive Theme, Fusion)

Panels

Panels 3 is a lot smaller than Panels 2; it's the most replaceable part of this architecture, because you can substitute, for example, the drag-and-drop UI.

Page Manager

Don't let the page own the content, let the content own the page. Content that's specific to your site can be written as plugins, and then plug them into your pages. They are versioned! It's part of the Chaos Tools suite. It comes with overrides for a number of pages that Drupal comes with, so you can change how they look, for example the search page.

How do you figure out what pages are? Decide where it lives: since the URL controls the hierarchy. That makes it easy to put in a piece of content without designing everything that's on a particular page.

Context is the data environment where the page is being rendered. Specifically:

  • Node
  • User: the logged in user is part of the context of the page, especially through access control.
  • Language
  • Taxonomy Term
  • Forum
  • Organic Group

You can find context from arguments, for example /forum/%forum. Also node author and node reference. But sometimes, they just are. Maybe you'll embed a node into a page because you've embedded them explicitly.

Context is tough. You have to think about everything that's being displayed, in order to put it together. The Page Manager is designed to deliver the context to the content, instead of having the content specify the context.

If you've ever written code like, take the argument from the URL, and check if it's numeric, and then load a node with this node ID, that is a way of manually defining a node context. You're taking a key (the ID) and casting it in the node context. Context allows you to pass in data from the beginning of the page to the end, and not care where it's from. It might have come from the URL, or it might have come from the logged in user.

Drilling it In

Node views need a node context. User profiles need a user context. Forum listings need a forum context. And views need contexts too!

Variants

There is a way to choose which variation of a page this user should see based upon the context. Is this user an administrator? A member of this group? Does the user speak French? Does the user share a taxonomy term with the current node? You can create rules to determine who will see what. If the user is an administrator or just a plain user, they can see something different, due to variants.

You can also use variants to make the same page look different. For example, you can modify the /node page using node templates, but you still can't change the node list that much. In the same way, the taxonomy page is always the same page no matter which term is being displayed.

Panels Everywhere

Your page.tpl.php is unneeded! It provides a special "page" in Page Manager which is your site template. You create panel layouts, place your content in the panel layout, and then say "I want to use this content for this set of pages."

A lot of common pages that are tiny pieces of content like the lost password page can be overwritten, at the cost of having to pay more attention to your layouts. Because it's more work up front to keep your site going, but it is more maintainable, and it will more closely match your designer's view of what you want your site to do. And that, right there, is a big win.

Thanks to Earl for giving this talk. Check out Earl's delightfully-named blog, Angry Donuts: Delicious Pastries of Pure Rage.

Did you enjoy this post? Please spread the word.