Newbie to Success; a Case Study with my Drupal Websites

Introduction

I started with Drupal in September of 2007. The complete extent of my web design experience was some simple HTML- and CSS-based pages I’d built at http://www.icecreamyou.com, but I wanted to build something bigger and better: a “social network for social activism” as I came to call it. I wrote up a long site plan detailing the features I wanted, and I spent some time going through the various CMS’s to decide which one to use. It is a testament to how little I knew starting out that I didn’t even know what a CMS was until I looked at the various software my host would auto-install for me.

The next step—one which took several weeks for the majority of the work, and then continued throughout the life cycle of the site—was to search for modules. This was perhaps the most tedious part since I had to familiarize myself with the several thousand modules available. I knew the functionality I wanted, but not the specific modules, and as I built the site I was continually realizing that I needed something else. Eventually I just went through the entire list of modules one by one, bookmarking modules into three categories: In Development, Interesting, and Needed.

Though this process was annoying at times and often dull, it paid off tremendously. It was because of my intimate familiarity with Drupal modules that I was able to build my next two sites extremely quickly. Though websites are continually evolving and therefore never “done,” I built the vast majority of my second Drupal website in 6 hours, and the third in 60; the first took 6 months.

Building BabelUp

BabelUp took a very long time to build. As my first Drupal website, I was prone to doing things over and over, and I had to figure out what everything meant. Plus, since the site was just a hobby, I started without any dedicated user base.

My biggest problems with BabelUp were in two categories: design, and planning.

Design

I wanted to cram in all the functionality I could, and give as many options to the user as possible. In the first iteration of the site, I ended up with some 8 Primary Links, 15 Secondary Links, and 12 top-level Navigation menu items. It was, as my mother put it, “a mess.” My goal was then for her to be able to use the site.

So I simplified. I cut down the menus and put things in sub-menus. I rearranged what was important to the site, added content like Help pages, and got some suggestions from friends. I used Nice Menus to make navigating the behemoth of a site easier. And it got easier; but while my mother could find her blog, she could never figure out how to post in it. There was simply too much on the site, and not enough places to tuck it all away while keeping it available.

Then there were the blocks. I had zillions of blocks and they all had lots of information. It was impossible to look at the page and have any coherent sense of what you were supposed to understand. Hence, despite the giant “Start here” link on the front page, many people were left asking, “what is it for?”

Planning

My largest concern was that I was always trying to expand while I was working on refining other aspects of the site. That meant that I kept having to go back and reconfigure everything each time I updated. Sometimes my updates were unstable, and that caused more problems. I also discovered what would become one of my Ten Commandments of Drupal: Thou Shalt Not Consider Content Types as Prolific as Candy.

I was fortunate in that everything I wanted to do with BabelUp was possible using contributed modules. And oh, there were lots of them. But I discovered that sometimes less really is more; if you can present your users with exactly what they want, they won’t be clamoring for more.

Before I started working on BabelUp itself, I had created all the art for it, ordered t-shirts and mousepads, and written a long design document. After a month I threw out the design document because it didn’t align to a Drupal workflow. Instead, I kept a changelog and to-do list in a text file which I constantly updated as I worked on the site. The changelog saved me when my site crashed twice; the to-do list ensured that all my tasks were completed. If you’re working on a site with other people, both of these are also invaluable tools.

BabelUp is not a complete product. I became overwhelmed at work towards the end of the first Beta and was unable to spend any more time on it. After the few consistent users dropped off, I decided to leave the site as-is until I have more time to work on it this summer.

You can visit BabelUp at http://www.babelup.com; its theme is based off of BlueMarine, a mistake in itself. For a list of the more useful modules in it, check out this post at groups.drupal.org.

Take Two: CBP3

The next time I needed Drupal, I found myself as the “Co-lead and Technical Manager” of a group of 3D graphics designers. This highly international group uses the Unreal Engine to build 3D virtual worlds that are available as downloads for the game Unreal Tournament 3. The group, called the Community Bonus Pack or CBP, is probably the best-known non-professional “level design” group in the large Unreal Tournament community.

I was on vacation when I built the site and I wanted it done in one day. I had drawn a sketch of what I wanted the site to look like and listed the few modules I’d need beforehand. All I needed was a front-page blog, a way to apply to join the team, a contact form, a few pages, and a way to chat. I wanted only team members to be members of the site. The only theming I did was some CSS modifications. Because I knew exactly what I wanted I was able to accomplish my goal by following these steps:

1. Downloaded, then uploaded and installed, Drupal 5.7
2. Downloaded, then uploaded and enabled the following modules:
          • CCK, Email, and Link
          • Chatblock
          • Guestbook
          • Update Status
          • WordFilter
          • Subscriptions
          • Views
          • XML Sitemap
          • Some core modules
3. Added the content type "Application" but did not configure it
4. Configured site settings, then other modules using admin/by-module
5. Configured all the content types (Application, Poll, Story, Page)
6. Configured the menu, then the blocks
7. Added views to facilitate administration and put them in a special Administration menu
8. Used the core Color module to change the site’s look, then uploaded the logo, favicon, and druplicon
9. Configured User Access, and added my teammates as members of the site with a special role

Notice that testing isn’t on this list. That was one of my only mistakes with this site, as I quickly found out that there were some access issues, the logo wasn’t showing up in some browsers, and the site was caching too aggressively. All this with 500 visitors a day, some of which were spambots. So I added CAPTCHA, fixed some problems as best I could, and it all worked.

I want the reader to notice the order in which I performed these actions. Each successive step creates an impact on the next one, so that if the steps were executed in a different order, some of them would have to be repeated. This was something I learned when building BabelUp: the more of one task you can do at one time, the better; and the less you have to change it after that, the better.

You can check out CBP3 (and the amazing screenshots of our virtual worlds) at http://cbp.beyondunreal.com

Third Time’s the Charm: BMusic

I had enjoyed web design so much the first and second go-rounds that I wanted to do it again, but I didn’t have any ideas. Then one day I was a little irritated because all of my friends kept asking me to send them the music I listen to, since I’m the only one that keeps up with what’s hot. It gave me the idea to put my playlists online. I didn’t do any research, and the extent of my planning was to jot down all the modules I’d need (again, a benefit of the research I’d done for BabelUp).

BMusic is where the real challenge arrived. It was going to have to be a social network of sorts, but the functionality to build and share playlists didn’t exist. It exists now for D6, but I needed many modules that were either unstable in D6 or not yet ported.

The goal of BMusic was to construct a system in which users could add song nodes to playlist nodes. I had two ideas: using CCK NodeReference, and using Community Taxonomy. CCK NodeReference didn’t work because there is a pre-set number of fields available per submit. Community Taxonomy was too difficult to use and was easily abused.

Then I discovered Editview. This awesome module allowed me to overcome both of my tasks, because it allows you to edit or create the nodes that appear in a view. This way, I could add an unlimited amount of songs at one time, as well as continually refresh the Playlist nodes via AJAX so that more nodereferences could be added as needed. Editview required a little bit of patching to work with nodereferences, and I ended up having to use CCK fields instead of free-tagging taxonomies to accommodate the Artist and Album fields. That meant that I had to go against my rule and do a little bit of reconfiguring in several places and add some views to replace some taxonomy-filtering modules I’d been using.

The Content Recommendation Engine is also key to BMusic. As a site started to recommend my music to my friends, it was critical that automatic recommendations be available. I also added Fivestar to facilitate these recommendations.

One thing that made administrative workflow so easy on BMusic was the way I used the Adminstration interface. I added the Administration Menu module which dramatically cut the time it took to perform common tasks; I also added a normal menu called Administration to hold the tasks that certain modules (namely Abuse) made available. The sub-module of JSTools, ActiveMenu, allowed this to be a relatively small and easy way to access everything I needed on the site.

At the end of the day, BMusic is not perfect. Album Cover images are one of the only sources of non-background color. The abundance of AJAX is nice, but it means people without Javascript enabled will have trouble using the site. I’m planning to use the Amazon Associate program to link users to Amazon Music so they can preview and buy the music they like; but I’m having problems with Drupal reading the HTML incorrectly. BMusic doesn’t have any way to sync with offline playlists. And at the time this article was written, there weren’t very many songs, playlists, or Forum Topics in the database.

Modules

I used the following modules in BMusic:

• Abuse
• Activity
• Advanced User Management
• Birthdays
• Bookmark Us
• CAPTCHA
• CCK, Date, and Link
• Comment Page
• Comment Subjects
• Comment Upload
• Community Tags
• Content Access
• Content Recommendation Engine
• DCL Importer
• Email Verify
• Embedded Media Field
• Fivestar and VotingAPI
• Forum Access and ACL
• Forward
• Google Analytics
• Hall of Fame
• Invite
• JSTools
• Kudos
• LoginToboggan
• Message Effects and JQuery Update
• Meta Tags
• Nudge
• Panels
• PathAuto
• PNG Fix
• PrivateMsg
• Quote
• Recent Changes and Diff
• Search Config
• Search Type
• Search404
• Service Links
• Signatures for Forums
• Smileys
• Subscriptions
• Tagadelic
• Token
• Update Status
• User Interests
• User Relationships
• User Stats
• User Titles
• Username AJAX Check
• Usernode
• Userpoints
• Views
• Word Filter (note: the Abuse package comes with a Watchlist module, which does almost the same thing but is less flexible)
• XML Sitemap

BMusic has just been launched, and is accessible at http://music.babelup.com

In my relatively short experience with Drupal, I didn’t do any fancy theming and I didn’t write any of my own modules (that, by the way, is the beauty of Drupal). What I did do was create a highly functional website (BMusic) by myself in an extraordinarily short amount of time. While it’s true that the site is not entirely complete, that’s because during the work-week I don’t have time to make the little tweaks necessary to polish the site. The point is, anyone can do it.

Thanks!

Note to admin: There are some image tags embedded in this page, but I don't have permission to make them show up.