Steve Todd Design and Development

Welcome!

Hi, my name is Steve Todd [more about me] and you've reached my website. Here, I plan to provide details regarding some of my development interests. It will include a lot of "this is how I actually did it" items, as I've found these very useful. The web is full of folks with loud opinions about how things "should" be done, but I'll go with actual experience every time.

Below, I list some of the sites I've created recently. All of them have a few things in common:

Drupal-6-based (with CCK, Views, TinyTinyMCE, IMCE, Backup/Migrate, Taxonomy....)
Selected themes should have Suckerfish or CSS-based dropdown menus
Configured for simple maintenance and addition of content pages and menus by non-technical content editors.
Automated daily backup of Drupal content and files using Backup/Migrate and Backup/Migrate Files, pointed to a separate server.
Carefully configured TinyTinyMCE and IMCE, plus my custom Image_Caption_Lightbox module, to greatly simplify the insertion of images complete with auto-captions and Lightbox feature. (such as the thumbnails on this site). The user uploads an image using the wizard, checking the box for desired thumbnail size, then selects the correct class and the rest is automatic.
"Structural" items (themes, modules, custom code) are maintained by myself, lowering the entry point for the admins and content editors.
I pay careful attention to making these sites search engine friendly (SEO) by using PathAuto, XMLSiteMap, and by using Google's webmaster tools to verify Google "likes" the site, and to find searches that do NOT result in visits.
I use Google Analytics extensively to analyze the actual hits and traffic patterns (using the Google Analytics module).
I tweak the selected themes using a site and theme-specific custom module, which loads a custom stylesheet to override CSS as needed. For more about this, see my how-to page with actual code to use as an example.
I create a few key graphics (logo, buttons, etc.) using The Gimp. I am not an artist, but I am able to recreate things seen on other sites effectively.
All colors on a site should work "together". Here is a very useful site with color tools and theory.
When possible, I like to get a "real" artist to create a banner for a site. I then pick colors from that banner to use throughout.

To setup a new Drupal site, I have a standard "template" site that I backup, then restore to the new site. I then adjust the site name and setup a new theme and I'm in business. I copy the custom sitehelper module and its associated override CSS and enable for the new site.

The template features a "Content Editor" role that allows those users to create and maintain all content pages, menus and blocks, without getting them involved in the "structure" of the site. I create a required "Site Section" taxonomy and create a view for each section, that forms the primary menu. The users just assign the appropriate category and the pages show up in the view. Really simple but effective.

If you'd like more details, just contact me using the link at the bottom of this page.

If you're new to Drupal, here are some thoughts on getting started.

Note: this site features the Plutado Green theme, and is currently hosted on a "free tier" Amazon EC2 instance, created from a Bitnami EBS-backed image.

DogTagArt.com

From the DogTagArt.com About page:

Dog Tag Art is a website for pet lovers, artists, and fans to show off their creativity with cool ID tags and pet photos. We print user-submitted art on classy, durable ID tags. We're making pets look cool with functional art. It's fun. Will you join us?

My participation in this site is limited to a couple of specific areas (see below). I did not design the site nor do I maintain the graphics or content. The site is a highly-customized Drupal 6 site with UberCart, plus a number of custom modules. The coolest thing about this site is it uses "crowd-sourced" artwork as the basis for all of their products.

Custom Tag Creator

My first task for DogTagArt was to simplify and improve the upload process, by creating a new Custom Tag Creator function. This tool allows a customer to upload their own artwork or photos to the site, then zoom, position and crop the image to fit the tag shape. It includes a real-time viewer so the user can immediately see what the end result will look like.

Prior to writing the Custom Tag Creator, potential artwork contributors had to create and submit 2 carefully-sized and shaped images based on a specific .PSD template. This had limited the target audience significantly, so this new tool greatly expanded the business.

High Performance Drupal site

My second task was to address performance issues as the site grew by moving the site from a normal Drupal install on Dreamhost VPS to a Pantheon Mercury 1.0 image running on Amazon's EC2 "cloud". This image features the Pressflow Drupal 6 distribution with a Varnish 3.0 front end serving as a reverse proxy. This combination provides for spectacular speed (for anonymous users), plus the awesome flexibility and configurability of Drupal's database-driven content.

However, to get the full benefit of Varnish, the site MUST be built carefully, especially regarding sessions and cookies in general. The original DogTagArt.com did not adhere to these practices, so I had to work to remove these after-the-fact. I go into details of this process here.

I also installed Munin and configured key charts so we could analyze the actual performance history of the DogTagArt.com site. This is an invaluable tool to insure you are working on the proper performance issues, and to evaluate the effectiveness of each change.

Riegel Linen

This site is another of Mount Vernon's divisions. It is currently a "brochure" site presenting full-color images of their varied product line, together with detailed descriptions and useful pages for their customers' use. The site is designed to help one of our product designers quickly and easily upload the images and text that define a product, in the same workflow she uses to produce high quality print catalogs using Adobe InDesign.

I've created a custom CCK content type for the product details, with fields like primary image, secondary image, subtitle, etc. I used FileField for each of the image elements.

Since the product details pages are the key to the site, I wanted full control of its display, including overlapping the images and great css shadows. I used Content Template to manipulate the output, setting css classes for most everything written. I highly recommend Content Template, together with a custom css page, for quick and easy adjustment of output.

I then created one View with a Taxonomy argument. This allowed me to easily link to views for each product category but only create/maintain a single view. These views were attached to the primary menu, with 3-level dropdowns for the product pages. I also used Views Slideshow to create a page-flipper at the top of each of the teaser lists.

This site uses a great theme called Magazeen. Magazeen has a ton of areas for adding blocks, plus the 3-level dropdown (superfish) menu.

Northgate Baptist Church

Site for my church. I've successfully handed off most of the content maintenance to the staff members responsbile for that area, either by directly editing the content, or by placing documents in folders which are then automatically added to the site (see below).

Key features:

Two columns of teasers on front page to maximize the number that can be seen at once.
Picture Gallery page with custom PHP interface to PicasaWeb folders to provide auto-thumbnail links to the folders while leaving all pictures in PicasaWeb, where church members can easily upload and share.
Custom PHP to retrieve and reformat our church calendar sidebar from our Google calendar. This was needed to condense the list to fit in a much smaller space. This occurs on-demand when someone hits the Northgate page. [TODO: publish this code]
Newsletter page with custom PHP so church secretary just drops properly-named .pdfs onto a desktop shortcut (FTP link) and they are automatically discovered and listed on the page.
Hosted on DreamHost, since they provide lots of disk space and free hosting for non-profits. Of course, we can't find our IRS 501(c)3 letter yet, so we're still paying for it. :)
Media page (custom PHP and javascript) that features an embedded mediaplayer for one-click selection of audio or video to play. There are also direct links to each week's scripture passage (using BibleGateway.com). All links and buttons are built by the PHP. I just enter the new title and scripture passage each week and the rest is automatic. [TODO: publish this code]
Pixture Reloaded theme but I added clickable "buttons" to accent the node headers (using css only).

Engine Driver - JMRI Throttle for your Android phone

Engine Driver Android App

This site supports my Android application, Engine Driver [View on Android Market]. This is a native Android app which runs as a network "client" to a JMRI server, utilizing multiple threads to keep UI responsive while handling communications in background. It communicates via TCP/IP sockets, and uses the Bonjour protocol to "discover" JMRI servers. Runs on all versions, from 1.6 up to the latest "pad" versions. Full source is available on sourceforge.net [view source].

This app provides full control of a model railroad, multiple locos, powered routes and turnouts etc. It serves as a fully-featured replacement for expensive proprietary hardware throttles (both wired and wireless).

Peden Textile Equipment

The business web site I created for Peden Textile Equipment, Co. is focused on providing Peden's customers with details and multiple photos of the equipment that Peden offers for sale. The site is designed to let Peden's employees easily upload photographs and enter the specifics of new machines quickly, without requiring advanced computer skills.

I've created a custom CCK content type for the machine details, with fields like manufacturer, model, width, etc. I used a single FileField for Photos, set to allow unlimited photos. I set up ImageField Import to bring in all photos for a machine and attach to a single node. This leaves all the information for a machine as a single node.

Since the machine details page was the key to the site, I wanted full control of its display. I used Content Template to handle the output, setting css classes for most everything written. I highly recommend Content Template, together with a custom css page, for quick and easy adjustment of output.

I then created one View with a Taxonomy argument. This allowed me to easily link to views for each machine group but only create/maintain a single view.

This site uses a great new theme called A Cold Day.

Piedmont 'N Southern Model Railroad Club

Piedmont 'N Southern

Home page of the N Scale oriented Piedmont 'N Southern Model Railroad Club. This site features photo galleries, layout diagrams and information about upcoming shows. Plans are to include how-to articles, and pages for members to showcase their home layout or modules.

Since much of the site is devoted to photos, I spent some time researching various methods of solving two somewhat related problems, how to best display "collections" of pictures, and how to best get those pictures to the site (by non-geek members).

I created a CCK content type called "Photo", which contains a single FileField for an image. I create a new taxonomy item for each "gallery", or group of pictures. I then use ImageField Import to import a batch of photos, setting the taxonomy and any individual descriptions, etc. at that time. Each photo is a separate node. Anywhere I want to show a photo, I use ImageCache to size the output dynamically.

Finally, I created two views over the Photo content type, each with an argument-based filter on taxonomy. One of the views was setup as a Views Slideshow, the other in columns for a photo gallery. I used Insert View as a quick and easy way to drop copies of the slideshow into various pages, passing the appropriate argument. The slideshow view was configured to link to the slideshow when clicked (for the same taxonomy). The gallery was setup so clicking on a picture opened that picture in Lightbox2. This arrangement provided a LOT of functionality with just 2 views. To add a new gallery and slideshow, I just create a taxonomy entry and import the photos.

This site uses a great new theme called A Cold Day, with a new background and tweaks using my custom css module.

Mount Vernon Mills

This is the home page for Mount Vernon Mills, where I am VP/CIO (and part-time web designer/developer). This site features extensive use of my custom Drupal module for simplifying Lightbox links and captioning for images. [TODO: post module code]

It also features numerous graphics I created for the site using the Gimp, an excellent open-source image editing program. The buttons were generated using this script. The theme is the excellent Zero Point.

SC Occupational Therapy Association

Membership-oriented site that features:

Online WebForms and payment for placing job listings, continuing education activities, conferences, and membership renewals.
Use of PayPal site for credit card payments, and UberCart module for handling the orders.
Custom-written Continuing Education tracker where members can store hours and details of their CEU progress. Includes summary and notifications when CEU hours need to be updated.
Slightly customized Mass Contact email-sending module allows admin to send emails to various groups (officers, all members, members needing renewal)
Pixture Reloaded theme (key users liked the rounded corners).
Secured (members-only) content as well as public content. (using NodeAccess) Most of site is visible only to members.
Numerous members-only forums (using Advanced Forums)

UberCart has a ton of great functionality, but I found out it was really overkill for this site. For the latest offerings, I'm now using PayPal's Pay Now button wizard for each product, passing along enough info to identify the purchase from PayPal's notification email they send back to the merchant. Much simpler.

Mount Vernon Human Resources

The Mount Vernon Human Resources site is an intranet site with the content fully controlled by members of that department. I used my template, then added NodeAccess to allow tighter security of individual pages. The HR users utilize the attachments functionality of Drupal extensively for listing forms, manuals, etc.

The theme is Summertime.