Header navigation appeared too large and with the wrong font-weight when templates were delivered by Salsa.

After implementing a new look and feel for NPA’s main website, PowerThru came to me to resolve some CSS conflicts between the stylesheet for the new design and NPA’s templates within their Salsa account.

Header navigation in the templates within the Salsa platform were appearing too large causing a jarring effect for site visitors and an appearance of disorganization.

Active link color didn't match the main site's look and feel.

Additionally, text generated by Salsa’s activism module was overriding NPA’s stylesheet and displaying text in the incorrect font family and links in the incorrect colors.

Working with both the main site’s CSS and with the templates in the Salsa system I was able to conform the header navigation to the correct size and font weight.

Header navigation conformed to the right size and weight, problems with link colors and font resolved.

I was also able to resolve the font family and link color issue conforming both to match NPA’s main website.

Desired template provided as a Photoshop file.

I received from the project manager at PowerThru Consulting a Photoshop file of the look and feel RootsAction wanted for their HTML email template.

Working from the .psd I sliced out the necessary graphic elements and optimized them for email delivery. I determined best font faces to match the designer’s vision worked with the specified color pallette when coding the HTML template.

Screenshot of template delivered to PowerThru Consulting complete with Salsa macro for inserting a supporter's first name.

I tested it for compatibility across multiple desktop and web-based email clients making adjustments for compatibility as necessary while still maintaining the desired look and feel.

Final delivered email from HTML email template created for NPA

I received from the project manager at PowerThru Consulting a flat .jpg comp of the look and feel NPA wanted for their HTML email template.

Working from the comp image I determined the size and colors used in the design as well as the best font faces to match the designer’s vision.

I coded the HTML and tested it for compatibility across multiple desktop and web-based email clients making adjustments for compatibility as necessary while still maintaining the desired look and feel.

This custom sign-up form, which is backed by over 50 custom database fields, leverages both the power of the Salsa membership database and the ability to use custom code within the Salsa platform.

My work on this project consisted of both technical:

• analyzing the information IRT wished to collect,
• determining the best presentation for those options and what type of database field that would require inside Salsa,
• creating an intuitive naming convention for the custom fields and creating the fields in the database,
• coding the custom sign-up form

and strategic communications advising on best practices for maximizing supporter engagement.

IRT’s initial project specification included only the request for the database field creation and the form coding. After advising them on outreach best practices, IRT agreed to adopt most of my recommendations and asked me to create a Tell-A-Friend form as their post-submit redirect page. They also asked me to create post-submit auto-reply email messages three unique thank you messages for supporters.

Each of these thank you messages included conditional logic keyed to information the supporter provided on the sign-up form to determine which message a supporter received. As an administrative best practice I worked with IRT to create an administrative notification email which is sent to an IRT staff member each time the sign-up form is submitted.

DC Massage Therapies original site homepage: Flat HTML

When his previous webmaster changed careers Steven Brown of DC Massage Therapies needed a website solution that would allow him to easily maintain his own site.

After working with Steve to determine the audience for his site, the general feeling he wanted the site to convey, and his deepening expertise with Thai massage I customized a theme based on the Genesis framework for use with a new WordPress installation.

Continuing discussions with Steve allowed me to help him clarify his plans for social media outreach and other functionality needs beyond the base WordPress installation. Because Steve didn’t want to be dependent on one individual for content and style changes to the site I first trained him on how to make changes to key elements of the site, such as the header banner image, then I provided step-by-step documentation on these key style and content related tasks. I also provided training on the customized theme’s typographic and semantic hierarchy to help the site maintain and consistent look and feel from section to section.

Current site homepage based on WordPress with a customized Genesis framework based theme.

Currently I provide continuing technical maintenance handling plugin updates, database backups, WordPress core updates, and recommending and, if approved, installing new plugins to extend the site’s functionality.

Future projects for DC Massage Therapies include a site with a registration form and shopping cart system for a school teaching Thai massage.

Clean Water Action homepage circa October 2006

When I came to Clean Water Action in October 2006 it was clear from the organization’s hodge-podge site design and lack of any coherent information architecture that the site had grown entirely organically. My first step was to create an information architecture and standards compliant site design.

It was also clear that a significant amount of work would need to be done with staff to create buy-in for the idea that if Clean Water wished to use its web site as a tool to educate and recruit supporters its primary focus should be on the needs of an external audience rather than on the needs of staff.

This design created a consistent information architecture, a universal navigation, and secondary navigation which was lacking from the organic version of the site that existed when I was hired.

Clean Water Action homepage circa April 2007.

While still flat HTML, this design was also W3C standards complaint for both HTML and CSS as well as being WCAG-AA compliant for accessibility.

Social Media, Visitor Tools, and Activism

By adding social sharing tools and search from third parties I enhanced the site's functionality at no cost to the organization.

Over the life of this design I also added a variety of tools, such as site search and social media sharing, via third party applications. This design was in place from January 2007 through September 2008.

In March 2007 I also established Clean Water Action’s relationship with Democracy In Action as the organization’s vendor partner for blast e-mail, take action and online donation functionality.

Clean Water Action homepage circa November 2009.

As I worked to develop the organization’s online communications strategy and promote the tools we now had available to Clean Water’s organizers, our use of these tools and our sophistication with them rapidly out paced what could be offered by a tapestry of third party applications and a flat HTML site. In March 2008 I embarked on a total site and logo redesign and a migration to a content management system.

After an assessment of then current and planned future needs, and after establishing the organization’s commitment to open source technology, Drupal was chosen as the platform for Clean Water’s new site.

Because of internal business requirements it was necessary that this project proceed on the development and design tracks simultaneously.

Custom modifications to our Drupal install enable the system to serve different templates to different URLs while still using a single database.

For the development track, I worked with Trellon specify and test certain custom code and views inside Drupal that allow the site to present information for fourteen separate state offices without using multiple templates and while providing site visitors with consistent section pages across the site.

Another custom modification allows this installation of Drupal to power two sites with different templates while using the same database and provide easy, one-click publishing in the admin interface thereby reducing the need to cross-post materials.

Free Range Studios was our design partner for this project creating both Clean Water Action’s new logo and two site complimentary homepage designs, one for Clean Water Action and one for Clean Water Fund, the 501(c)3 organization.

Clean Water Action petition on Democracy In Action Salsa platform

A conversion to a new site design in 2008 required new web and email templates to support the organization’s use of Democracy In Action’s Salsa platform as well as some adjustment of styles specific to content generated by the Salsa system.

Activism Module Templates

This example shows one such style in which the content of a petition has been floated to the right of the fields requesting the supporter’s information.

Using just the Salsa platform’s default styling, the fields for the supporter’s information would appear under the petition content which would spread across the entire screen. By applying custom CSS I was able to make the petition pages generated by Salsa’s Actions 2.0 package more user friendly thus lowering the barrier to action for Clean Water’s supporters.

Email Templates

E-mail template designed for maximum client compatibility and to match the web site's look and feel.

The new design also required two sets of new e-mail templates, a regular newsletter template and a take action template, for each state where Clean Water had an office at the time of launch.

Special issues with cross compatibility of e-mail clients and lack of support for CSS properties necessitated that these templates be constructed with tables but look similar enough to the web site that the coding change would not be obvious to supporters.

This template was also designed for the preview pane to maximize deliverability by shrinking the height of the header image and confining the entire with to 600 pixels.

Project: Social Media and Democracy In Action

A customized template allows social media sharing with effective article titles.

While ramping up Clean Water’s social media strategy I noticed that Democracy in Action did not have any functionality to make social media sharing easier.

Because of the nature of the templates, Facebook, Google Buzz, and Tweetmeme, which Clean Water choose to track the retweet statistics, information in the template’s title tag was being passed yielding ineffective postings on social media sites all with the title “Clean Water Action.”

At my request, one of Democracy In Action’s developers implemented a solution to this problem applying it across their entire “Actions 2.0″ tool by working with a template with no html <title> tag. The programming change then picks up the action’s title from the Salsa title field yielding relevant Facebook postings, Google Buzz sharing, and retweets via Tweetmeme.

The blog of Clean Water's President is powered by WordPress but mimics the organization's site design.

Because the blog written by Clean Water’s President was meant to represent his views and not necessarily the views of the organization, I made the decision not to incorporate his blog into the Drupal system powering the organization’s main site but to instead maintain a previously installed WordPress blog as a separate entity.

Once the design for the site was finalized, I took the HTML and custom built a  widgetized WordPress theme that matches the main site’s look and feel.  I also researched, installed, and incorporated plugins to feature related posts and make posts that were shared from the site trackable.  I also enabled Feedburner and trained Clean Water’s President on its use so that he had direct control over when new posts were sent via email.

I was also responsible for the continuing maintenance of the blog’s primary software and plugins until my departure from Clean Water Action in March 2010.

The site's design gave the impression that no work was being done and suppressed return visits by supporters.

One of the problems the Center’s projects faced stemmed directly from the web site’s design: each project was locked into a basically static homepage that required site visitors to dig for the most current news.

An additional problem stemmed from the prominent use of photos of people in the developing world to illustrate the Center’s work on developing world policy.

As a result of this, the organization received numerous requests to provide funding which was a clear indicator that the site’s look and feel was sending the wrong message to site visitors.

In the spring of 2005 after receiving word that our vendor would no longer support the content management system we were using, I embarked on a site redesign and migration project.

A new, more news oriented design promoted fresh content and helped to make the site worth of revisiting frequently.

The result was a more news oriented site with a look and feel that reflected the Center’s work as a policy think tank. This design also reimagined the Center’s globe logo.

During this project our vendor partner was subsumed by a larger, more government focused development firm. After my departure from the Center it became clear that this larger firm would no longer support the Center’s software.

They relaunched a new site using Drupal in late 2008.