Jun 27 2011
Jun 27

One of difficulties of Drupal is the fragmentation of administration interfaces. Chapter Three addresses this difficulty by customizing the administration experience by championing the Panels as The Administrative Interface.

A Real World Example

[embedded content]

Note: I wasn't able to record audio to this video, the 'click track' is a bug from my video capturing software. The video shows me changing the view's style plugin via a customized Panels interface. One of our clients wanted the ability to decide if their data would show in a one, two, or three column display. We had three options:

  1. Train the user on the Views to change the display setting to grid
  2. Make more view displays to go with the options (requiring more than 50 displays, in this case)
  3. Customize the administration process to allow this feature

On this particular project, option three was the right choice. We were already exposing the Panels interface, so we could reuse what we already had. We decided to change the view based on a panel setting.

Three Easy Steps

  1. Make sure you have Content Pane view displays to play with
  2. Use hook_form_alter() to offer the option in the Panels settings form
  3. Use Views' alter hooks to pragmatically change the view depending on the options

1. Creating Content Panes

Creating content panes is out of the scope of this post, but it’s easy. The cool kids at Node One have a video tutorial walking you through the process.

2. Offering The Option

This step is a straight forward use of hook_form_alter(); 'select', '#options' => array( 1 => t('1 Column'), 2 => t('2 Columns'), 3 => t('3 Columns') ), '#default_value' => $conf['view-columns'] ? $conf['view-columns'] : 1, ); // Add our submit handler to capture our option $form['#submit'][] = 'c3_example_views_content_views_pane_submit'; break; } } ?> We also need to make sure we are storing our option in pane configurations:

3. Changing the View

Now we act upon the set options. The life stages of a view are handy to know:

  • Initialize sets up the the view object
  • Build builds the query
  • Execute executes the query
  • Render renders the results into HTML

Views follows the Drupal event model and allows modules to alter the view during this lifecycle. Depending on the options you are supplying, you figure out where in the lifecycle you want to change the view. Anything you can do in the Views UI is programmatically possible. Any option in the Views UI can be exposed to your client. In our example, our column option doesn’t change the SQL query so we can interrupt the view after it has been executed but before HTML is rendered. We write code that programmatically sets the view style to Grid and sets the number of columns. You’ll notice that we have access to the pane configuration in $view->display_handler->options[‘pane_conf’]. That is what using Content Panes display type gives us. display_handler->options['pane_conf']; // Now change our view based on the pane configuration // In the case, we set the display plugin to ‘Grid’ and set the appropriate number of columns if ($conf[‘view-columns’] > 1) { // We have to reset the style_plugin since init_style() has already been called. // TODO: There maybe a more appropriate place to attach to alter the view. unset($view->plugin_name); unset($view->style_plugin); $view->display_handler->set_option('style_plugin', 'grid'); $view->display_handler->set_option('style_options', array('columns' => $conf['view-columns'])); $view->init_style(); } } ?> This is just one example of what you can do with Panels setting interface. We really like the one-to-one metaphor of Panels and Panels In Place Editor. We think it's smart, accessible and the future of website building.

Jun 10 2011
Jun 10
Pushtape is a Drupal-based music publishing project I've been working on. It is currently under active development.

Design goals:

  • easily publish a discography with albums and tracks
  • simple admin interface
  • extendable, minimal framework using existing web technologies
The project is in its very early stages, but I wanted to share with you how we got here and why I believe building this piece of software is important. The idea of using Drupal for music publishing is not new. In 2005 I tried to build a music install profile to include with Civicspace, but Drupal was not mature enough and looking back my scope was way too broad. A few years later Bryght attempted something similar with Backstage, which was intended to be a music distribution directed at the music industry. And in the years since there has been a very long discussion about a music distribution on the Drupal Art & Music group, with some great ideas brought to the table by the likes of Dublin Drupaller and Gus Austin (who has also started scratching a similar itch). Most recently at the Drupal for Musicians BoF held in DrupalCon Chicago (view presentation slides here), a group of us talked about this some more, and while everyone seemed to agree that Drupal is great for music publishing, building a useful toolkit is harder than it first appears. Part of the challenge is that there are so many different use cases that pinning down a feature set is just too hard. Is this for a single band? Is this for a community of musicians? Is this for a label who is managing multiple bands? Is this for selling music? Who will actually be building the site and using it; should it be targeted towards developers or musicians themselves? My conclusion has been to first try and build a minimal toolkit to solve obvious problems related to publishing a discography for a single band, but try and make things easy to expand upon later. The other challenge is that web services have really improved over the years, making the need for an open-source solution less of an itch that people need to scratch. Musicians have a myriad of publishing options today. One of the best services out there right now is Bandcamp, which allows musicians to upload their music and sell it online with minimal branding and has an incredibly easy user interface. Another popular one is SoundCloud, which incorporates many social features. Then there are services like TuneCore which lets you sell your music through online vendors such as iTunes, Rhapsody, and more. These are all great options for musicians and I highly recommend checking them out. However, there are tradeoffs to using these services, just as there are with any web services. On the plus side, web services are generally always easier to setup and use and updates are automatic. However, ownership and control of data will always remain a concern, and you often can't view the code or hack and extend the software that runs the service (for obvious reasons). Hackable technologies definitely require more work but in my opinion are rewarding for those that enjoy building things and the freedom to modify software for their own purposes — something Drupal developers intuitively understand. For Pushtape I want to encourage this hackability. The bulk of the work is done with Panels, CCK and Views wrapped inside of Features. Most custom code is going into UI improvements and tweaks. A "song" or track is based on the song-is-a-page concept. If you already have your music hosted somewhere else, such as Bandcamp or Archive.org, that's great! Rather than try to duplicate functionality of other services, I want to keep things simple so you can customize and create an authoritative resource (i.e. your website) allowing you to define how people can reach your music. In some cases, you might want to have multiple links for a single song: Bandcamp for streaming, Vimeo for the music video, and iTunes for purchasing your music. Or you may choose to treat it solely as a simple discography tool, without any mp3s or links to purchase. Or maybe you'd like to upload mp3s and use Sound Manager 2 to create streaming playlists. The idea is to create a structured, yet flexible, framework for creating songs with metadata, and allow you to organize your songs into albums. It should be simple enough that you can modify it for your own needs without (hopefully!) too much hair pulling, yet still have some useful functionality out of the box. Do you have ideas for how Pushtape should be built or interest in supporting development? Please join the conversation! You can sign up for the email list on the Pushtape website or join the Art & Music group on groups.drupal.org. Looking forward to it!
May 20 2011
May 20

If you haven’t jumped into the mobile arena yet, you are late to the party. Luckily, Drupal makes it shockingly easy to serve mobile-optimized content. Here are some scenarios:

Scenario 1: Make an existing site mobile

If you've got an existing Drupal site that's content rich with a fairly standard layout, like a blog or magazine site, making it mobile doesn't take much time at all. It only took us a few hours to set up a mobile site for a client - 7x7.com - using existing CSS and design elements from their blog theme. What's the use case? When someone hits your site on a mobile device, you want Drupal to detect that they’re on mobile, then serve up your content in a mobile-optimized theme. No problem.

What you’ll need

There are a lot of modules that offer enhancements for mobile, but for the most basic mobile site implementation, all you really need is...

  1. twom’s Mobile Tools module.
  2. A custom mobile theme.
  3. Optional: For extra special layout sauce, you’ll be happy to have Panels.

Mobile Tools

Mobile Tools module is the essential mobile module for Drupal. It detects when a mobile device hits your site, and automatically switches to a mobile URL that you specify, and a mobile theme. It even lets you use different themes for different devices, which is perfect if you need to have an iPad optimized theme. Mobile Tools also does two other great things: It gives you mobile-only CCK content type display options for Imagefield images (more on this in a moment), and, it gives you a new Panels selection rule (more on that in a moment, too).

The Mobile Theme

Making a mobile theme is pretty intuitive. Even if you don’t have a designer to work with, you can probably riff on your existing theme, as long as you keep some basic tenets in mind. For instance, you’ll want to make links big and use white space around them (so people can easily isolate and tap them with fingers), and change the layout to fit on a mobile screen. That’s 320 by 240 pixels, or thereabouts. Follow the same sorts of guidelines you would follow if you were making a site for someone on dialup. Don’t use big background images, and use good alt tags for people who browse with images off. Take out all extraneous HTML & CSS. Make sure your theme isn’t printing empty regions, and don’t use {display: none;} to ‘hide’ things that don’t work with your mobile design - just remove them. Here’s a good post in the CivicActions blog about making a low bandwidth theme, many of the tips there will be relevant to you if you’re making a mobile theme. Don't forget to bend the viewport to your will: Once you have a theme designed to fit perfectly within a 320 pixel wide screen, you want to make sure that users are viewing your site at that size. Some mobile browsers will “zoom out,” ruining the effect of your layout. To force everyone to look at your site at its 320px size, drop in this meta tag:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

  • Mobile Layouts with Panels & Mobile Tools

    The first thing most mobile sites need to do is serve up different, more immediate, mobile content on the site's homepage. Sometimes, a mobile version of a site will need to serve fewer or different ads, move sidebar content below the main content to save space, etc. This can be accomplished to some degree with regions in your mobile theme, and mobile-only blocks. If you’re using the delightful Panels module for managing site page layouts, you can use the selection rule provided my Mobile Tools to serve content (views, nodes, blocks, or custom content you create) in different layouts to mobile users, on a per device basis - again, great for iPad only layouts. If you aren't hip to Panels yet, setting up mobile-only layouts is a good time to get hip to it. In general, Panels allows you to create custom page layouts, then serve those layouts based on certain criteria. With the Mobile Tools module installed, one of those criteria is "if the viewer is on a mobile device." You can see how this would quickly become awesome, at the very least for a custom, mobile only homepage.
  • What about images in the content?

    ImageField images If you use CCK’s Imagefield for images on content types, and ImageCache to resize them, Mobile Tools has got you covered for mobile image optimization. First, make new imagecache presets that are sized to work with your mobile layout, then visit the ‘display options’ for the content type in question. You’ll see Mobile Tools offers a new category called Mobile Device under “display fields,” Under mobile display fields, change the imagefield display formatters to your mobile-sized imagecache presets - and that’s it. Images embedded in node content If you have a ton of images embedded in node content, you’ll want to use the TinySrc module to filter and resize images upon mobile device detection.
  • What about video?

    Luckily, the top video hosting sites out there (YouTube, Vimeo, Dailymotion, Blip.tv) have included mobile device detection in their embedded players. They’ll serve up a mobile-optimized video for users on mobile devices, even if the embedding site doesn't do any mobile detection. This means, for the most part, if you use the bigger services, you don’t have to worry too much about filtering or resizing video for mobile.

Scenario Two: You’re making a new site and you want to take mobile into account.

This is a good situation to be in. If you’re starting from scratch on a new site, you can consider your mobile strategy before you begin. With a thoughtful responsive site design for your Drupal theme, you may be able to avoid mobile detection and theme switching altogether, which would be good for a number of reasons, not least of which is that mobile detection and redirection adds load time for a visitor. Responsive design is a term that's been bandied about for a while - all it means is a site design that responds to the environment in which it is being viewed. Usually this means it resizes and rearranges itself to fit the screen size. This is easier to demonstrate this in action than to explain, so check out the Media Queries gallery of responsively designed sites:

Media Queries

Resize your browser while looking at these sites, or look at them on a mobile device, and the way a responsive design works will become clear. This is the way forward for mobile design, though it only works in certain situations, it is one of the ways we're thinking about mobile design at Chapter Three.

A couple of other neat Drupal & Mobile things

If you're interested in integrating Drupal and iPhone apps, check out Kyle Browning's slides on creating iOS Applications that interact with Drupal
If you've seen the excellent jQuery Mobile interface, you are probably pretty psyched about it, because it is a great solution for app-like mobile site navigation. There is a Drupal module integrating jQuery Mobile it into Drupal 7. Whew! That was just a crash course - please feel free to comment and share any good Drupal + Mobile (Drobile?) tools you've found that I've missed here. I'm sure there are plenty. Happy mobile-ing!

May 15 2011
May 15

There are a lot of great things about being a Drupal Trainer. My favorite is getting to see -- first hand -- how the code we write affects the community. I noticed that with the release of Drupal 7 - the demand for training on theme development increased dramatically. It took me a while to figure out why - exactly - but after a night of heated Debate in IRC with chx, mikey_p, HedgeMage, heyrocker, and yoroy (among others) we may have arrived at a conclusion. Chx pointed out that the best Drupal themes are made by developers - people who know Drupal really well, and understand all the code. Even though he is probably right (and most of the themers we have at Chapter Three really are developers, too) I have always seen the theme as the entry point for people who are new to Drupal. I assumed this was because the template files (the ones ending in tpl.php) were written in HTML - and this is a language most people in web are already familiar with. It's the piece of the system that, until recently, seemed the most approachable. So what changed? People who aren't entirely comfortable with PHP seem to have no problem reading logic in template files, things like seem to just make sense. But things like make people pause. Words like 'if' and 'print' are pretty easy to figure out, even if you don't know any PHP - they're just English, and thus self explanatory. Based on the amount of explanation I usually need to provide in my theme classes on arrays vs objects, I think it's the presence of these data structures in template files that scares people off. When what they saw in there was they were fine, they just worked around it and let it be. But when that became they could all of a sudden see that there was something else there that they didn't understand, and they start to think "Maybe it's better just to leave it alone." The last thing our community needs right now is a decrease in the number of new people who are jumping into code and giving it a shot. Those people with the ambition and do-it-yourself attitude are going to be our next jr devs, and maybe even our next experts! We need them in our community to support the huge growth in Drupal adoption. In a lot of ways I think the Drupal 7 theme system is vastly superior to Drupal 6, but was the decision to use data structures in templates a mistake? Work has begun on removing these data structures from the top most levels (http://drupal.org/node/1158090) Join the discussion and let us know what you think!

May 09 2011
May 09

I'm not sure how many Tech camps or conferences can claim to have two women keynote speakers, but I'm happy to help Drupal Camp Twin Cities make some waves! Friday's Keynote speaker will be the highly respected Angela Byron, and I'm honored to follow in her wake.

The idea for my own keynote session Taking Drupal back came to me during several heated discussions with fellow Drupalvangelists about the current state of our favorite CMS, and where we're headed - both as a platform, and as a community. Drupal is growing, and growing fast. How are we going to manage these growing pains in a way that keeps the technology moving forward, but doesn't hurt the community that made us what we are today? The answer: by taking Drupal back!

Drupalcamp Twin Cities Graphic

I'll also be giving a session on Drupal 7 usability along with Angie Byron, Bojhan Somers, Brad Bowman, David Rothstein, Chad Fennell, and Dharmesh Mistry. The UX study will be conducted in the days leading up to the camp, and this session will be our first chance to report the findings of the study back to our community. Similar sessions will also be offered in Colorado and London. The UX study still needs funding, so please chip in if you can!

I'll also be conducting a FREE Drupal 7 training workshop along with two of Chapter Three's favorite trainers, David Needham and Carl Wiedemann. 73 of the 75 available seats have already been claimed by the Drupal-curious.

It's going to be a big week for me, but I'm looking forward to every minute!

May 09 2011
May 09

Open Academy is an easy to use Drupal product from Chapter Three specifically designed to create university department websites. Over the past few years, we have worked closely with the nation's leading universities - including Stanford, UC Berkeley, NYU, USC, and UCSF - to help them build great Drupal websites.  We now distilling down that knowledge down and offering it as a fully functional Drupal 7 powered "Departmental Website in a Box" package. Open Academy is currently being refined in a closed alpha/beta with an initial group of users, but will be rolling out more widely this summer. If you are interested in participating in our beta process, sign-up for our beta-list and follow @chapter_three for more updates. 

 

As a best practice departmental website, Open Academy lets you quickly and simply create a new departmental website by entering some basic information about your site in our installation wizard which sets everything up for you. For starters, we baked in critical functionality around departmental news, faculty profiles, publications and presentations, events and calendaring, courses, resources and links, video, social media, and degrees and programs.

In addition, we have built in a state of the art administration dashboard, basic SEO rules, WYSIWYG editing functionality, 508 Accessibility Compliance, and drag-and-drop page layout from the always amazing Panels module. All of this has been developed on a cleanly extendible Drupal 7 install profile with Features-basedKit Compliant functionality and a well documented starter theme you can modify and extend to meet your particular needs. 

We know that the university department is at the center of academic life and Open Academy lets an academic department get an amazing website online easily that communicates their teaching and research to the world using the power of Drupal.

Over the next few months, we will be talking more about Open Academy and highlighting the different universities already using it to build their departmental websites. If you are interested in participating in our beta or interested in helping us build even more features, get in touch with us on our beta-list and watch for our public beta release this summer!

Apr 22 2011
Apr 22

It is well known that Drupal can be a hog with server resources. What is not common knowledge is that high performance Drupal is a magic art that can only be done by wizard elves during the hours of midnight and 6am every other Thursday while the moonlight shines down from the north side of the sky. With recent developments in high performance Drupal hosting based on the Pantheon stack, we are quickly taking this black art and making it easier for the common man to have a Drupal site that scales and runs fast without any knowledge of wizardry and black arts.

Debugging with Xdebug

Not all that glitters is gold

One of the largest problems we face for Drupal sites is that this high speed hosting only affects about 80-90% of your site visitors. The power of Varnish is that anonymous users get a high speed site, but authenticated users including the site administrators or anyone with an account will still face scaling issues on an untuned site. Part of our services here at Chapter Three is to provide high performance consulting for sites that are running slow. We use common tools to analyze the data and optimize the Drupal application stack.

One of the tools that we use to diagnose site performance problems is Xdebug for code profiling and KCachegrind, Webgrind, and MacCallGrind for visualizing and tracing this data.

What we will learn

In this 3 part series of blog posts, I will show you how to:

  • Install and configure Xdebug
  • Profiling your Drupal application with Xdebug
  • Trace and visualize the execution flow
  • Benchmark the performance improvements

Installing Xdebug

The first step is getting Xdebug installed. This can have various levels of difficulty depending on your operating system. I use OS X and Linux primarily and typically like compiling things myself, but the Xdebug site hosts compiled DLL files for download that you can use to get this going on a Windows based computer.

Installing on Unix/Linux

The easiest way to install Xdebug on a Unix based operating system (ie. Linux or Mac) is to use PECL.

~ steverude$ sudo pecl install xdebug

Installing on Windows

The easiest way to install Xdebug on a Windows based OS (very uncommon) is to download a precompiled binary from xdebug.org.

Configuring and activating Xdebug

To configure Xdebug, you need to enable the trigger that allows you to execute Xdebug profiling. There are two ways to do this. The first is to allow Xdebug to run profiling on every page load by setting xdebug.profile_enable=1 to the ini file for PHP. The downside to this is that this adds a considerable amount of overhead to each request. The preferred method is to set the trigger to allow you to trigger profiling on demand. The last thing you need to do is tell Xdebug where to output the cachegrind files in order to analyze these files later. The configuration options for setting this up in your php.ini file are as follows:

zend_extension=/usr/lib/php5/20090626/xdebug.so xdebug.profiler_enable_trigger = 1 xdebug.profiler_output_dir = "/tmp"

Or on Windows you need to add:

zend_extension_ts="c:\php\ext\php_xdebug-2.0.1-5.2.1.dllphp_xdebug-2.1.1-5.2-vc6.dll xdebug.profiler_enable_trigger = 1 xdebug.profiler_output_dir = "/tmp"

Now when you browse to your site, you can add "XDEBUG_PROFILE=1" to the query string and it will trigger an Xdebug profiling session and output the cachegrind file.

Trigger Xdebug

What's Next?

In the upcoming blogs in this series, we will show you how to analyze the profiling data in the cachegrind file and how to optimize the site using this data.

Apr 11 2011
Apr 11

Dear Chapter Three,

I'm looking for a job and I'm fairly tech savvy. I've considered taking classes for web design and media, but a friend told me that I should learn Drupal... but I've never heard of it before. What exactly is Drupal and where do I start?

Sincerely,
Jonny

Thanks for writing Jonny!

What is Drupal?

Getting started with drupal
Drupal is an open source system for building websites and it fits into the category of Content Management System. A CMS is, simply put, a system for managing content. There are a ton of free CMS out there like Drupal, as well as a number of proprietary CMSs which charge for the privilege of using their system. If you want to compare, there are countless articles outlining key differences (like Jen's post last week: Wordpress vs Drupal).

Drupal stores pieces of content (referred to as 'nodes') in a database and lets you call from that to display the content anywhere you need it. This could be a single page (ie. the about page) or a page that has a list of content (ie. latest news articles, blog posts from December - just about anything you can imagine). By trusting Drupal with your content, you're able to focus on what your visitors will see and how they will interact with your site.

Drupal lets you get 80 to 90% done without having to know a lick of code whatsoever. For beginners, if you don't mind using one of the hundreds of contributed 'themes', you may not have to touch code at all. This is largely because Drupal is made up of 'modules' which are bits of code written by thousands of other people in the Drupal community. These modules allow you enable just about any features you could want on your site just by downloading a module and configuring it for your site.

What is the Drupal community?

Drupal has a very strong and compassionate community, which means we take care of people willing to learn. There are tons of avenues for getting help in Drupal, not least of which are the forums and issue queues on Drupal.org. If you prefer chat, you can also get help via IRC. Once you're part of the Drupal community, you'll probably feel inclined to help out beginners - even if just because so many people helped you. I found this to be true and have heard it from many other people as well.

The second Monday of every month, we have a SF DUG (Drupal User Group) get-together where people share what they've been using Drupal for lately, walkthroughs and tutorials covering various topics or what's been happening in the community. There's also a job board through the DUG and an ever growing "Users Helping Users" sub-group.

Ways to learn Drupal

We at Chapter Three are all about giving back to the community. Many of us have contributed modules and themes back to the community. We're all about presenting at Drupal camps, cons and meet ups, and many of those listed on our website have slides or videos embedded. We even have trainers that we send all over the world to train and consult in both private and public venues. We have a list of recommended resources for beginners and pros alike. For those of you who are just starting out, I especially recommend the book Using Drupal. In fact, from that link you can find a great video and free sampler to download.

You'll have to check our training schedule, but it looks like we're leading a Drupal in a Day training workshop on May 9th. It's specifically for beginners and covers everything you need to know to get started. You leave with a booklet that covers everything we talk about and a website sandbox that you can play with (build, break, rebuild, whatever) with for at least 90 days after the class. The class lasts the whole day and quite honestly, it's the best way to get your feet wet in Drupal. You'll leave with a solid foundation in Drupal basics and be prepared so build your first solo site! We had a series of classes last week that were sold out, so if you're interested, act fast!

Hope this helps Jonny! If anyone has any questions, please reply to this post in the comments below.

Apr 11 2011
Apr 11

Dear Chapter Three, I'm looking for a job and I'm fairly tech savvy. I've considered taking classes for web design and media, but a friend told me that I should learn Drupal... but I've never heard of it before. What exactly is Drupal and where do I start? Sincerely, Jonny Thanks for writing Jonny!

What is Drupal?

Drupal is an open source system for building websites and it fits into the category of Content Management System. A CMS is, simply put, a system for managing content. There are a ton of free CMS out there like Drupal, as well as a number of proprietary CMSs which charge for the privilege of using their system. If you want to compare, there are countless articles outlining key differences (like Jen's post last week: Wordpress vs Drupal). Drupal stores pieces of content (referred to as 'nodes') in a database and lets you call from that to display the content anywhere you need it. This could be a single page (ie. the about page) or a page that has a list of content (ie. latest news articles, blog posts from December - just about anything you can imagine). By trusting Drupal with your content, you're able to focus on what your visitors will see and how they will interact with your site. Drupal lets you get 80 to 90% done without having to know a lick of code whatsoever. For beginners, if you don't mind using one of the hundreds of contributed 'themes', you may not have to touch code at all. This is largely because Drupal is made up of 'modules' which are bits of code written by thousands of other people in the Drupal community. These modules allow you enable just about any features you could want on your site just by downloading a module and configuring it for your site.

What is the Drupal community?

Drupal has a very strong and compassionate community, which means we take care of people willing to learn. There are tons of avenues for getting help in Drupal, not least of which are the forums and issue queues on Drupal.org. If you prefer chat, you can also get help via IRC. Once you're part of the Drupal community, you'll probably feel inclined to help out beginners - even if just because so many people helped you. I found this to be true and have heard it from many other people as well. The second Monday of every month, we have a SF DUG (Drupal User Group) get-together where people share what they've been using Drupal for lately, walkthroughs and tutorials covering various topics or what's been happening in the community. There's also a job board through the DUG and an ever growing "Users Helping Users" sub-group.

Ways to learn Drupal

We at Chapter Three are all about giving back to the community. Many of us have contributed modules and themes back to the community. We're all about presenting at Drupal camps, cons and meet ups, and many of those listed on our website have slides or videos embedded. We even have trainers that we send all over the world to train and consult in both private and public venues. We have a list of recommended resources for beginners and pros alike. For those of you who are just starting out, I especially recommend the book Using Drupal. In fact, from that link you can find a great video and free sampler to download. You'll have to check our training schedule, but it looks like we're leading a Drupal in a Day training workshop on May 9th. It's specifically for beginners and covers everything you need to know to get started. You leave with a booklet that covers everything we talk about and a website sandbox that you can play with (build, break, rebuild, whatever) with for at least 90 days after the class. The class lasts the whole day and quite honestly, it's the best way to get your feet wet in Drupal. You'll leave with a solid foundation in Drupal basics and be prepared so build your first solo site! We had a series of classes last week that were sold out, so if you're interested, act fast! Hope this helps Jonny! If anyone has any questions, please reply to this post in the comments below.

Apr 09 2011
Apr 09

I get a lot of emails and comments about my "WordPress is better than Drupal" talks, presentations, videos, slide-shares, and rants. But believe it or not, I'm on Drupal's side! This post started out as a reply to one of those emails, but I feel it would be better to say this once to the world, rather than over and over again privately, in email.

The biggest difference between WordPress and Drupal, is that Drupal is a Content Management System, and WordPress is a blog engine. This means Drupal assumes that there will be many different kinds of users with various levels of control who are administering a website, and WordPress assumes there will be only one. This should be the deciding factor when choosing between WordPress and Drupal (or moving from one platform to the other).

Yes, WordPress is trying to move into the CMS space, because most people who started off as simply bloggers have realized that they need more than just a blog, but they love WordPress already - so why try something new? But the truth is, the more you try to do with a WordPress site, the more brittle it gets. The permission system is not very sophisticated, it doesn't scale very well, the theme system is a huge security hole, all content entered is treated in exactly the same way, database abstraction is weak, etc, etc, etc.

Similarly, Drupal would be complete overkill if all you wanted was a blog. The user 1 account will see way too many options on every page making the user interface overwhelming. Additional modules would need to be installed and configured to get exactly the same functionality as a WordPress blog, and considerable time would need to go into set up and configuration. And don't even get me started on looks - there are a limited number of beautiful themes for Drupal, most of which are already being used on thousands of other sites.

A lot of my original concerns about the Drupal content creation interface have already been addressed by the community - please keep in mind that my "WordPress vs Drupal" talks show a demonstration of Drupal 6. Drupal 7 is different! Drupal 7 does a lot more out of the box, and also provides a "Standard" profile option during installation which will cut hours off configuration at the begining of a project.

There is, however, still no one place to go to find out "what Drupal does" or why anyone should choose it over WordPress - or any other software solution for that matter! This is a problem that still needs to be rectified, and we do have a team of hard-working people redesigning the Drupal.org website, trying to solve problems like this one. The reason there is no clear answer to this question, though, is because the answer will be different for every project. With WordPress, there is only one or two ways to solve a given problem. With Drupal, there could be an infinite number of possibilities, and thus, an infinite number of ways to answer the "why choose Drupal" question.

The reason for this is buried in the roots of each project.

There is a single direction of development on blogging software, with the community deciding what should go into the "best blogging platform" and that is now exemplified by what you get with WordPress. What makes a "blog" valuable is going to be the same - or at least very similar - for every blog, so it's much easier to create the perfect software solution for a single use-case.

Drupal, on the other hand, does everything: blogs, forums, e-commerce, CRM, intranets, social networks, news aggregators, wikis, photo galleries, restaurant review sites, etc, etc, etc. If you can tell me what kind of website you want to build and what features you'd like to see on it, then I can tell you why you should choose Drupal over WordPress. What makes a "website" valuable is not what it does that's exactly the same as every other website, but what makes it different. Drupal is really good at all the little things that would make one project stand out from the rest - but because these differences are important, time needs to be spent making each Drupal site different from all the rest.

This is also why there is a shortage of beautiful Drupal themes. The kinds of companies and organizations that invest in the development of a great Drupal theme realize that there is value in having a unique Brand. Blogs, on the other hand, don't rely so heavily on branding for their success. It's about the blog content or the person writing the blog, not their logo or color choice that sticks in the minds of the visitors.

In short, WordPress and Drupal are still two very different beasts. We do have some things in common, and I still believe that our two communities have a lot to learn from each other. Fortunately this is the world of open source. The code is out there. All we have to do is look!

Mar 05 2011
Mar 05

Drupalcon is one of our favorite events of the year and it is our pleasure, between Chapter Three and our new startup Pantheon, to both double sponsor and send 19 people to attend Drupalcon Chicago! As Matt said in his closing blog post for Drupalcon San Francisco, "it is the Drupal community more than anything else that makes Drupal great and I think Drupalcon plays a big role in promoting and building that culture". We are looking forward to reconnecting with old friends, introducing some new faces to the Drupal community, and talking about all the cool things we have been up to this year.

A few of the things we are up to in Chicago....

Training

Jennifer Lampton, Jon Skulski, and David Needham are kicking off the conference on Monday by offering a Drupal training session on Site Building with Drupal 7 which will take participants, step by step, through the process of setting up a Drupal site. At the same time, Josh Koenig (and the rest of the Drupal high performance Dream Team) will be presenting a training on Drupal Performance and Scalability which will help teach best practices for tuning and scaling Drupal websites.

Sponsorship

As a gold sponsor for the event, Chapter Three will have a booth in the sponsor area throughout the conference and will be meeting with partners and friends across the industry. If you want to talk to us about a project or see how much fun it would be to move to San Francisco to do Drupal full time, stop by and say hi. In addition, Zack Rosen, Matt Cheney, and Pritish Jacob, our new Director of Professional Services, will be on-hand for the CXO Exchange to talk the business of Drupal with other Drupal firms and entrepreneurs.

Sessions and BOFs

On the main conference program, Jennifer and David are presenting a session on the basics of Theming for Drupal 7 which should be as informative as it is entertaining and and Josh is presenting on Drupal in the Cloud. There is also an evening session on Wednesday night at 6pm in the Java Bar by Matt, Josh, Zack, and David Strauss to talk about Pantheon more specifically. Come learn about the future of Drupal development and deployment! In additional, Chapter Three is also leading several BOFs including Drupal for Musicians by Farsheed Hamidi-Toosi and Site Building with Chapter Three by Jon Skulski and Tyler Burke.

Jan 27 2011
Jan 27

I love theming Drupal sites. Yes, I realize that means I’m a super nerd. Drupal’s theme layer with its system of overrides is powerful. It works so well that I rarely need a starter theme, like Zen, Basic, Framework or NineSixty nowadays, other than as a reference and source of code snippets.

What Starter Themes Do

Drupal 6 saw a jump in the number of contributed starter themes on drupal.org. Now it’s much easier to find a list of all starter themes and there are a few great reviews and a comparison chart. Starter themes are a class of themes that attempt to generalize their features to speed up implementing a design for most any site, while encouraging best practices. They are popular among development teams since they help standardize theming when multiple people must touch the theme. They are also excellent demos of the power and potential of Drupal’s theme system, which makes them a great learning tool and source of documentation. Many starter themes are intended to be used as a base theme, where you create a sub-theme that draws off their files. This makes it easier to produce themes with fewer files and overrides, leaving the base/starter theme to do most of the heavy lifting.

A closer review of contributed starter themes reveals some recurring features, including:

  • sliding door tabs
  • contextual body classes
  • contextual block and menu edit links
  • useful Internet Explorer hacks
  • multi column layouts
  • print style sheets
  • thorough code comments
  • various theme settings
  • content first source order

While print style sheets and thorough code comments are always a good idea, many features present in starter themes are not always necessary on every website. 

Not All Websites Are Alike

It is great when starter theme fits the needs of a project, but they don't always do. For example, block edit links are not necessary if the site relies on panels, or if a project avoids using blocks all together. Very often the overall site layout is unique for every site. As well, the majority of websites do not need the sliding door technique for tabs. Internet Explorer hacks are usually particular to the site layout and CSS techniques used for each website. For layout positioning, I try to use 960 grid systems' CSS techniques and safer IE CSS2 selectors/properties, which makes it possible to avoid most IE hacks and debugging. If we use Panels for multi column layouts, it usually relieves the theme of this responsibility. In the case of content first source order, there is more than one way to achieve this. The 960 grid system makes this particularly easy with its push and pull classes. 

To achieve multi column layouts, themes normally have a delicate interconnected web of template variables and conditional CSS rules based on different body classes. If a theme must house a multi column layout, I would say that feature alone is a great reason to use a starter theme. But within the Panels paradigm, starter themes tend to introduce some superfluous files and code. 

What I Do

I find the most repetitive part of theming is generating CSS for default Drupal elements. These include tabs, tables, menus, form elements, messages, help text and typography. Our Creative Director Nica Lorber and Lead Designer Floor Van Herreweghe shared their Fireworks template approach to theming Drupal, which ensures design attention to core Drupal UI elements. In fact we started to standardize design of these elements to the point that I can reuse a lot of CSS from one project to another in a single reusable drupal-elements.css file. This file, along with a CSS reset and 960.gs is my starting point for most websites.

Just about everything else involved in implementing a custom design is unique to each website. I might create a little custom markup. However, I end up copying and pasting most everything else from past projects and contributed starter themes.

Lastly, it’s just as easy to have a lean and well commented theme within a multi person development team, as it is to use a starter theme. I prefer this over requiring all developers and themers to learn the approach of a particular starter theme in addition to understanding Drupal core’s theme layer. To adhere to web standards and Drupal best practices, I prefer a check list approach and cheat sheets.

Drupal's Markup is Getting Better 

Drupal 6 pulled in many changes from the 5.x version of the Zen theme. Since then I have less so needed to use starter themes. With Drupal 7, there are more improvements look forward to in Drupals default markup. Contributors to Drupal 7 put a lot of effort into making its markup as beautiful as possible. If you look at Stark in Drupal 7, the only theme files in it are a layout.css and stark.info. They did this to demostrate the minimum requirements to create a theme, and to provide a theme that shows off Drupal 7’s sexier HTML. To modify markup in Stark, one would simply copy over some template files, like page.tpl.php or node.tpl.php, edit them and clear the cache. 

It might be that if Drupal's markup was perfect, we wouldn't need starter themes. But the fact that there are so many seems to mean that we have different needs for a starting point for building new themes. It also reflects the fact that Drupal theming has needed better documentation. Fortunately that documentation is getting a lot better and hopefully we can look for ward to more people jumping in and learning theming. 

Dec 20 2010
Dec 20

Today, we're handing out some great holiday presents from Chapter Three. The following people must have been nice this year, because they will be getting free Drupal training in January!

Lisa H. - You get a free seat in our Drupal in a Day class on Jan 4th.

Steve M. - You'll be getting a seat in our 2-day Drupal for site builders class, Jan 5th & 6th.

Justin G. - Please join our Panels for Site builders class on Jan 7th.

Derek W. - Come join us for a 2-day Drupal Theme Development class on Jan 10th & 11th.

Tom B. - Learn how to become a Drupal Ninja at our Drupal module development class on Jan 12th, 13th & 14th.

Drupal training makes a great gift - just ask any of our happy recipients above. If you are interested in giving Drupal knowledge for the holidays (or signing up yourself) you better hurry up and make a reservation, there are only a few seats left.

Happy Holidays Drupalistas!

Nov 09 2010
Nov 09

Something funny happened while at Drupalcon Copenhagen. I was approached a guy in a bar after I gave my talk on Design For Drupal: A Template Approach, who said, "Your talk was good, but you should talk about what you REALLY do." I was stunned and confused by this at first, but then slowly realized that he was right. There was a much larger piece of my work that I wasn't talking about. The "client wrestling part." The part where you sit in a conference room for 5 days straight systematically deciding what you're going to do for the next 3-8 months depending on the size of the project. 

So how do we do this? How do we get people to agree on things when there are sometimes as many as 10 voices in the room?

Here are some pieces of the puzzle for you to chew on.

Listening

Clients have already done a lot of thinking before you start working with them, and it's your job to let them talk first. The foundation of a successful project is excellent communication and understanding. I recommend reading this useful article on Active Listening. It is a skill that will help you with pretty much everything.

Who Decides What

When you start a project, define who the players are, their responsibilities, and who has sign off. Do this on both sides to create transparency, trust, and clarity of how things will work. Find out who has the final say on the client's side. You may find yourself working with a person who has the authority to make decisions, but be sure to ask if they have superiors to will trump those decisions. Make time for the final decision makers to weigh in on things before the project is done.

One Is The Magic Number

Make sure you have one single person on the client side who is the point of contact. This is generally the Project Manager. Do not agree to a structure where you address their team as a group. It is inefficient and will take more time than is necessary.

Timeline

Figure out when the project needs to launch. Ask your client if there are external factors, such as an event, that makes that date a hard launch date. I've seen large technology projects take 3 times longer than expected, so take that into consideration when planning. Every project has unexpected things that come up. The key is to work with your client and tell them early and often if the schedule is being pushed. If you communicate openly with them, they will collaborate with you on expectations and solutions. 

Soliciting Feedback

Guide your client on how to give you feedback. Give them deadlines on when you need to receive that feedback so that they can help you do your job. Train your clients on the kinds of things they should be looking for and giving you feedback on.

How we do it: We implore a weekly deliverable cycle where we give the client the work about 1 day before meeting in person or over the phone. They are responsible for soliciting feedback from their team and consolidated that feedback. During the meeting we ask questions and collaborate on solutions. We try to force quick turn-a-round like this to keep the project inertia going and to stay on schedule. We continue to meet weekly after we transition into development, keeping the weekly conversation active throughout the project cycle.

We Love Deadlines

If you want something done, give it a deadline. Do it for yourself, your team, the client, and their team. If you don't know the deadline, make it up, and say it with confidence. Creative thinkers (developers and designers) thrive within time constraints, producing their best work as the clock tics down. I wish I could always work as efficiently as I do under the gun. 

The Roadmap: Define Your Goals

The goals are the foundation of the site. The rock on which you will stand six months later when you receive feedback that seems outlandish. Being able to refer back to the goals keeps people on track of what really matters. It's your ace in the hole. It will prevent scope creep and keep things on budget. Keep these goals in the forefront of your weekly conversations and talk about them in every meeting. They are your shining light of guidance and should be considered in all choices.

Know Your Audience

Know your primary, secondary, and tertiary users. Make your design most effective for your primary users. When defining your audience, add as much detail as you can about both their likes, dislikes, age, technical background, cultural background, how much time they spend online and so forth. Get a target audience members lined up early in the process to test your work once it's ready.

Deliverables

  1. Project Schedule (example)

    This document outlines key deliverables on a timeline that is agreed upon by all parties.

  2. Strategy Document (example)

    This document outlines the goals of the project, audience, and other important findings which serve as a building blocks for the project.

  3. Content Inventory (example)

    This is for existing sites. This document outline all the pages on the site and where they live. This is an excellent research step to do before the kick off meeting because it will give you a comprehensive understanding of where you're starting from. To learn more about this, read Content Strategy For The Web.

  4. Site Map (lo-fi example | graphic example)

    The site map is the document that shows the navigational architecture of the site. Sitemaps can be simple or complex. The Lo-fi example provided is from the Drupalcon SF project which I took the simple approach on  due to time. The graphic example is from the redesign of the Chapter Three website.

  5. Page Tables (example)

    These pages are meant to document the key template pages, the goals for each page, the content buckets for each page, and also address if new content needs to be created or edited. This is a step that should be done before you begin wireframing. It serves to inform both the purpose, functionality, and content for each page. It will also help you organize content that needs to be created or edited. 

  6. Personas (Persona Template) | Example

    Personas are fictitious people who represent your key customers and illustrate their unique desires and motivations on your site. These Personas will eventually define your sites functionality as well as prioritize it. To learn more, read my blog post explaining how to leverage this powerful tool.

  7. Use Cases (example)

    Document outlining key user paths and functionality requirements

  8. 2 Rounds of Wireframes (lo-fi example | greybox example)

    We send Greybox PDFs to the client to work through the general layout and functionality of the site

  9. 2 Rounds of Graphical Comps (example )

    We deliver Fireworks files with pixel perfect renderings of the key template pages

  10. Style Guide (example) (General Drupal Elements Example)

    This outlines all of the typographic and graphic styles on the site as well as a list of other HTML elements that may have not been addressed in the design of the key template pages (see: Design for Drupal, a Template Approach)

other things that matter...

Project Managers

A good project manager is worth their weight in gold. They are the keepers of the torch from beginning to end and are the primary contact for the client. If you don't have one, try to get one, or if you find a person on your team who has a knack for it, see if the want to transition into that role full time. Project managers are grown organically and it's worth it to foster their growth.

Try A Little Understanding

You will get far with people if they know that they're being heard.  This holds especially true on projects with large number of stake holders. It's impossible to meet the needs of every single stake holder sometimes, but often you can make collaborators feel at ease if you really take the time to simply hear them out with an open mind. If all else fails, tell them that you can address their concerns in "phase 2". 

Hire A Copywriter

If your client does not have a copywriter on staff suggest hiring one. Content is key. A site with good design and solid technology is nothing without content. Do not save it til last. Loop it in from the start.

Take This With A Grain Of Salt

 This is an evolving practice. Anything I share here is from my own experience. In the world of web, we're figuring it out as we go, and learning from one another. If you have a better way of doing something, share it. In the end, we all benefit.

Tools of the trade

  1. Adobe Fireworks

    This is what we use to design and wireframe our sites.

  2. Snap Z Pro X

    Top notch screen grab tool. I use this about 50 times a day.

  3. Skitch

    Fantastic for a mocking up notes visually of anything on your screen and then sharing via email or web. NOTE: if you all use skitch, you can actually open Skitch files, edit them and repost as a "comment". Pretty great.

  4. Google Docs

    Great for organizing with multiple people. My favorite latest use of this is with the redesign of the Chapter Three Website it. We're using it as a live doc for the new copy on the site.

  5. Open Atrium

    Drupal product that allows groups to organize and collaborate around projects.

  6. Adobe Illustrator

    Great for doing fancy stuff with vectors and print stuff(I know, that's not web, but it comes up).

  7. Notable

    Great for giving feedback on comps in a web environment. I started to design an app like this for Drupal for sharing web comps, but Notable basically does almost everything I was hoping to do, so hats off. 

  8. Papparazzi

    Great for taking screen shots of entire websites, no matter how tall. Can be used in tandem with Notable if you're having issues with font displays.

  9. Firefox

    Great for analyzing site code using Firebug (and much much more).

  10. WebEx

    Great for teleconferencing.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web