When I’m developing I don’t like having to download stock modules or run extra drush commands that I use in nearly every project. Acquia is a commercially supported Drupal distribution that comes pre-stocked with Drupal’s greatest hits and it’s free. If you’re new to Drupal and don’t have much development experience this is a great way to go since Acquia takes it a step further and offers Drupal ‘Dev Desktops’ that you can download for both Windows and Mac that let you get going fast without even having to install a web server.

Mamp allows you to create a local web server where you can install Drupal and mess around with it. It has PHP installed, MySQL and a database management tool, phpMyAdmin . There’s a PRO version available but generally the free version is good enough.

Coda is a minimalist text editor/ftp/ssh client for mac. It’s also beautiful and made by the super smart people at Panic. They also make Transmit, a great ftp client, that integrates somewhat with Coda. I’m still hoping for some kind of cloud syncing ability from Coda, but I don’t think Panic has made any promises. Transmit is great and allows you to sync data via MobileMe, but it’s not feature complete. I don’t personally find Coda’s subversion features to be adequate but I really love GUI’s and don’t like terminal that much, so I use Versions instead. For Git projects I use Gity (free Mac app).

It’s unfortunate that the name isn’t a bit more indicative of the power behind this module. It is essential for building anything with Drupal. Devel tells you all about what Drupal is doing and, in opening that up, gives you a chance to shape it’s output and ‘hook’ into it’s operations. In combination with Firebug it is the route to understanding and manipulating Drupal.

I’ve already mentioned it, but Firebug deserves another mention and a chance to list some of it’s many submodules. With Firebug “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”, which is kind of handy. Drupal has it’s own set of tools for Firebug, Drupal For Firebug which integrate with Devel to show you all sorts of useful information, all you need to do is wrap something with firep(); and arrays are displayed nicely formatted in Firebug without messing up your page layout. Firecookie, Firepicker, and Pixel Perfect are a few of my favorite firebug addons and there are many more.

I keep copies of my “rough” work (scripts, demos, modules and themes) in dropbox and symlink those directories to Drupal installs in my /User/Sites directory. That way I can work on the same module on different machines without having to manually sync those folders. If I have something quick I want to try I revert the database and install my module from scratch, ready to go.

Although I’ve known about features for some time, it wasn’t until recently that I’ve seen first hand how seamlessly Features integrates with subversion. You can export your feature, overwrite it in subversion and then ‘revert’ to the new version — a bit of a mind twister for me at first. Using Features is an amazing way to manage small and large feature sets in simple and complex projects with a few or many developers working on the same code base.

Random notes:

I didn’t want to build a giant link list to other sites but of course no toolbox is complete without drupal.org, lullabot.com, stackexchange.com, and the recently launched drupal.stackexchange.com.

My life changed immeasurably for the good when I started debugging JavaScript with console.log();. If for some reason you’re not debugging your pages with console.log() stop what you’re doing and go learn how to use it and the other amazing information firebug can provide.

With a bit of help from @yummygum for a few of the icons.

Summary

This is a basic intro to Drupal UX, meant for front-end developers who are new to Drupal or have concerns about usability on their existing Drupal websites.

Intro

I have a white whale. It is to make Drupal usable. Because — as of the current version, Drupal 6 — Drupal just doesn’t cut it without some extra attention to detail, and of course some extra modules.

Even though this is a pretty basic intro to Drupal UX, I’m assuming the following:

• Your site is installed and configured properly
• You have admin access to your drupal site and FTP access to your server
• You know basic php, HTML and some CSS

1. First things first – If you can’t afford a good, experienced designer pick a really simple theme as your default and modify it ever so slightly.

Don’t use Garland. No disrespect, but it’s horrible.

Eye candy and the desire to increase “perceived” value shouldn’t interfere with usability. By “perceived” value I mean things that a client will pay for but don’t actually increase the actual utility of a site. Those are sales tactics and if you’re already building a site for someone I think we can assume they’ve bought into your process.

If the front-end requirements are such that you can’t accommodate a smooth transition between viewing and editing content, you should consider using a stock back-end. People need room to write content Creating a high quality experience for users is not about wow factor, it is about eliminating frustration as best you can.

2. Use form filter and/or vertical tabs to clean up your forms.

Drupal forms are massive, intimidating and overall kinda poorly worded. They confuse and fustrate causal users to no end — and so we must bend them to our will.

That’s where form filter comes in handy. By default when you grant node admin privileges the node form just explodes, but most users don’t need or want to change publication dates or select what kinds of input the want to put into text areas.

2a. Then hack your forms (optional).

You can also hack your own messages/instructions directly into forms. Try Addison Berry’s tutorial for some nice tricks.

http://www.lullabot.com/articles/modifying-forms-drupal-5-and-6

3. Whenever possible use tags/taxonomies/categories to organize content

Taxonomy, vocabularies… Tags… Drupal calls them a million different things in a whole bunch of places. They’re just a way to organize things but they’re oh so important.

Tags also help users think about how the site is organized.

4. Do search well or suck it up and use google custom search

There are some very robust search utilities available for Drupal, but no one is ever satisfied with them. They all suck in different ways.

Drupal built in search is limited, although there are some good modules that can improve it’s usability. Apache Solr and Open Calais are a ton of work and quite complicated to implement but if your site has deep content this might be the way to go.

Goggle indexes your site for you any way. And if Googlebot likes you everyone else does as well. (There is no shame in googling yourself a little.)

5. Use the Administration menu module

The admin menu is not just for magic people that have the privilege to install modules. It provides deep access to drupal and that’s important when your links are three levels deep.

Open Space has a new Drupal website that make it easy for staff members and volunteers to access information and archives online.

I also redesigned Open Space logo and branding as a part of this process.

Sp0xx6 is the latest version of my Drupal UI. It’s a minimalist concept, great for populating sites with content quickly and for first-time users.
(more…)

Stratford Hall is a Drupal-based site I built while at Trapeze Communications.

Design by Neil Tran.

In the last few months I’ve finished some pretty large drupal projects and thought I would share my top five tips for getting things rolling on your next drupal site. If you want a general overview of building drupal sites smashingmagazine.com just published the definitive post that I’ve read to date.

1. Adhere to drupal best practices from the start. Look forward to your site being around for a long while and set it up correctly. Even the basics, like taking advantage of using the sites/all folder to hold your non-core modules and themes can save you a lot of time down the road.

2. Make the website accessible to a wide range of people. It is easier to plan things like text-size controls, email-to-a-friend and print buttons when you’re in the design stages. Adding them in afterwards can look amateurish.

3. Give yourself time to input content and give it some TLC with proper formatting. Nothing is more boring than the same basic text layout on every page. With CMS’s half the point is having the same frame around your content so that navigation is consistent, etc. – but that doesn’t mean your text and image content has to be the same with every node. Float an image left, float it right, pull out an important quote and give it the bold+italic treatment. Don’t rush through this “final part” of the job – it’s very important.

4. Use some kind of design/development framework. Whatever works for you, but the point is to keep it consistent so that when it comes time to fix something or add a feature you can do it quickly. For most people just starting out with the same basic theme, like Zen, is enough. Later on though you might need to start keeping a folder of your regular modules, pre-configured modules, sample configurations of certain key theme components, and anything else you might need within arms reach. A note of caution though – make sure you check drupal.org for updates of the modules once in awhile.

5. FCKeditor – is the best editor there is, period. A lot of folks swear by tinyMCE but I think they’re just plain wrong. FCK has a built in file manager (that is a pain in the ass to configure but very worth it), a default CSS XML-based stylesheet associated with user-styles that is easy to override,  but most importantly it has a feature tied into the text editor that shows block elements boundaries in your html structure which is of huge benefit to 99% of all users.

http://www.fckeditor.net/

I spent a bit of time this morning working with SWFObject this morning and tried to splice it into a regular page template to produce a sIFR like effect. And it worked. Seamlessly. All in all it took me about 20 minutes.

If you’re looking for other kinds of flash objects (like mp3, movies, etc) try out swftools or for a full-on API for SWFObject, SWFObject API.

Drupal is used by corporations, non-profits and government to create web experiences that go beyond standard websites. With hundreds of modules available on drupal.org, the time, energy and money used to develop new features is significantly less than building a custom application from scratch. So what’s so great about Drupal?

Drupal is a Dynamic Publishing Platform

Complex navigation structures, multiple page layouts, video, images – Drupal handles it all with grace and style. The boundaries of design and presentation are defined by your imagination – not by limitations of the technology.

Drupal is Easy To Use

Usability should always be your foremost concern. Building a great website is one thing – but the key to long term success is a site that regular people can be great at using. A simplified user interface will allow you to publish data quickly and easily, giving you optimal control over your website.

Drupal is Sustainable

One of Drupal’s best features is it’s scalability. It works great for small sites, but it can scale up to handle websites with thousands of pages and visitors per day. This makes Drupal an affordable and sustainable solution over time and technological change.

Top Benefits of Drupal

• SEO – Drupal can be configured to work very well with Search Engines, making it easier to climb to the top of search results
• Revisions – nearly all Drupal content can be versioned, meaning you can roll back a page to an previous state to compare data and then role it forward again
• Organization – Drupal has a sophisticated organizational structure for data based on categories that can be organized into hierarchies
• User Management – site users can have unique customized roles – for example a “contributor” would be able to add data but not publish it, an “editor” can edit content but not create new content, and a “publisher” could act as a gatekeeper, deciding when and where to publish data