A simple illustration I created that will be used as a maintenance page for a web app I’m working on.

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.

Sometimes it’s just easier to hard code something into a WordPress theme. Many is a time I’ve spent a half hour looking for a plugin to “just do it for me” only to get back a truly ugly button that not even a mother could love.

You can use this anywhere in the wordpress loop to make a simple ‘tweet this’ link:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="custom-tweet-button">
 
  <?php
    $twitter_permalink = urlencode(get_permalink($post->ID));
    $twitter_via=urlencode('twitterusername');
    $twitter_post_title = strip_tags(get_the_title( $post->ID ));
    $twitter_blog_title = urlencode(get_bloginfo('name'));
  ?>
 
  <a href="http://twitter.com/share?url=<?php print $twitter_permalink ?>&amp;text=<?php print $twitter_post_title ?>&amp;via=<?php $twitter_via ?>" target="_blank" title="Tweet this">Tweet</a>
 
</div>

And remember to always theme with care.

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

Sign-up page for Social360, a new application by Cornerstone Technologies, created to manage identities across social network for brands and businesses.

I just deleted my Facebook account. Yes, Facebook was annoying but I’d learned to live with the endless stream of  announcements, invitations and notifications that I didn’t care about. Facebook was poorly designed, but I’d also stopped caring about that as well. But lately… Facebook has turned into a liability that far outweighs it’s value as a marketing tool, social network or even as a piece of software. And with an irrational dictator at it’s helm the company is en route to a spectacular ending, I’m sure. (more…)

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…)