Search form

Add new comment

As a Drupal trainer, I am very interested in the results of usability testing because it often chimes with the same observations we make of new users as they learn Drupal. One finding in particular strikes a chord for those who are new to theming:

"While Drupal takes a "content-first" approach to site building, many people take a structure- and/or appearance-first approach." - Drupal usability testing results

It's true, Drupal takes a content-first approach, and while this may be disorienting for a new users, I think in some ways- that's a good thing.

“Start designing from the content out, rather than the canvas in.” - Mark Boulton

This brought to mind a recent interview with Mark Boulton on designing websites using 'content out' in .Net magazine, Nov 2011. Mark Boulton talks about the need for designers to have constraints. With the recent explosion in mobile use, designers have been tackling ways to achieve a truly responsive design. Yet, when the traditional edges of the canvas is gone, where are those constraints?

Many designers feel comfortable developing with "tag based templating systems". Recently a design student at a Hello Drupal event said to me he liked Expression Engine because he could just pop "template tags" into his HTML page. Tags systems tout the ease of making custom designs without needing to know PHP. Yet getting control over that output is often quite tricky when your content types and interactions get more complex. The templates include loads of logic, and it doesn't help that it's in a proprietary markup system. On the other hand, Drupal is more like an extrusion system. A blank theme in Drupal isn't blank. The job of the Drupal designer or themer is one of altering the configuration of modules to change the output and overriding finally in the theme layer.

Theming is easier in Drupal 7: a configuration before coding approach

Mark Boulton emphasizes the importance of focusing on the smallest unit of content to design your site around. That may be an ad size, a video size, or a thumbnail. As we begin to see more and more devices and applications lifting and twisting content into different shapes, the decisions we make at the point of content type design are as important. By making one crucial decision in the content design, a square thumbnail, Instagram can adopt a variety of layouts for different devices. If their content is pulled into an application like Flipboard, you know it's still Instagram content.

As a designer or themer you can have more fine-tuned control over content types, their output and design.

This is all much easier in Drupal 7. In fact, many overrides for Views in Drupal 6 which were done in Templates can now be done in configuration. Out of the box, you can make a basic theme with an .info file and CSS- and it just works. For the designer, this means less brittle themes. Views settings can be exported into code, and the theme can be more lightweight and easier to maintain. Drupal's menu system, layout system and content type display systems are de-coupled and highly configurable. When you add modules such as Display Suite you can create custom modes to view content; display it like this in one situation, and display it like that in another. Theming in Drupal is as much about configuration as code. If a designer is PHP phobic, is should be good news. Join our Drupal 7 Layout & Theming courses to learn more.

Learn Drupal 7 Layout & Theming with Acquia's training partners

In our course on Drupal 7 Layout and Theming we start by building a really basic theme from scratch, then expanding on this with template overrides. We also delve into configuring helpful modules like Context and Display Suite which makes designing much easier. For those who are new to PHP, we teach the basic concepts of if/then statements and arrays, giving you an understanding of the code you're using, and how Drupal outputs markup. We also learn how sub-theming works, and show you how to use popular responsive base theme systems to share you lots of work.

Join one of our courses on Drupal 7 Layout & Theming in 2012. Keep an eye for more dates. We can also schedule a private training with your internal team to get you all on the same page.

Plain text

Filtered HTML

Use [acphone_sales], [acphone_sales_text], [acphone_support],
[acphone_international], [acphone_devcloud], [acphone_extra1] and
[acphone_extra2] as placeholders for Acquia phone numbers. Add class
"acquia-phones-link" to wrapper element to make number a link.

To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.