The BayRail Alliance

The BayRail Alliance aims to improve the environment and quality of life of the San Francisco Bay Area by advocating for better public transit. They raise awareness of these efforts through e-newsletters, monthly meetings and demonstrations.

The organization's website was, like many non-profits', the product of years of fitful development by a series of volunteers. It had an old-fashioned design, lots of broken hyperlinks, and no clear organizational scheme.

Working with NYC-based graphic designers The Coup, I installed and customized the Drupal CMS on BayRail's website. The site now has a radically improved look and feel, and functions that are making BayRail's organizing work easier: an "email campaign" module that allows the site's end users to quickly send form letters to government officials; integration with the Democracy in Action online-donation and list-management tools; and hundreds of custom content-organizing blocks that allow site administrators to pull out lists of articles and place them anywhere on the site.

Drupal 4.6, PHP, MySQL, HTML, CSS, Javascript

See the website

Tuesday's Children

Tuesday’s Children provides mentoring, educational/career guidance, recreation and other services to children who lost parents on September 11th, as well as the surviving parents. They organize a wide range of events (such as a meeting with the New York Mets or a family day at the zoo), workshops (on single parenting or stress reduction) and fundraisers (dinners or golf tournaments).

Tuesday’s Children had built a website soon after its creation, but the group’s needs had changed; they needed to be able to update the site regularly to accommodate their many events. However, the complex structure of their existing site made that impossible for a non-technical person using a WYSIWYG editor to do. They also wanted to create a separate spinoff site with a more sophisticated design, dedicated to parents only.

Working as a consultant to Alder Consulting, I simplified the existing site’s HTML and PHP so that the client could easily edit it with Macromedia Contribute, an excellent WYSIWYG editor. I fixed problems with the site’s DHTML navigation and inconsistent typefaces. And I created the parent-specific site exactly to Alder’s designer’s spcifications, taking care to make it Contribute-editable as well.

HTML, CSS, PHP

See the website

The Jonathan Edwards Center at Yale University

The Jonathan Edwards Center is a resource for researchers and readers interested in the work of the famous writer and theologian. They make available his complete written works (for a sense of what this entails, consider that a recently published 26-book set covers less than half of Edwards' output!) as well as many works of critical commentary.

The web design firm hired by the Edwards Center had nearly completed the site, but there were various problems, including inconsistent CSS behavior across browsers, a conflict between the Flash movies and HTML forms in Macintosh Firefox, and a need for simple JavaScript functions (such as new-window openers and imagerollovers) in various places across the site.

I combed through the site's CSS file, tweaking it so that its styles displayed properly in all modern browsers. I researched the Flash problem and found that no solution had yet been discovered by other coders, so I replaced the HTML form with a Flash form that achieved the same function without causing the bug. Finally, I wrote the necessary JavaScripts and placed them in a library so that other coders could take advantage of them.

CSS, DHTML, JavaScript, Flash

See the website

New York Council for the Humanities

The New York Council for the Humanities is a non-profit affiliate of the National Endowment for the Humanities that works with more than 4,000 cultural institutions such as libraries, historical sites, museums, art galleries, colleges and universities, and community centers to bring innovative, thought-provoking programs to over a quarter of a million New Yorkers annually.

The Council’s existing website contained a lot of information, but it wasn’t dynamic: they had to hand-code all information on the site, and with an ever-changing list of over 200 lectures, that was far too much for their resources. The site was also in need of a design overhaul.

I worked with designs provided by Alder Consulting to create the HTML the site needed; I also worked closely with Alder’s programmer to be sure that my HTML code would cleanly display the results of his PHP application.

HTML, CSS

See the website

The Charles Stewart Mott Foundation

The mission of the Charles Stewart Mott Foundation is "to support efforts that promote a just, equitable and sustainable society" through generous grantmaking. They work on a broad range of issues all over the planet.

This international organization hired Beaconfire Consulting to redesign its website; Beaconfire produced a beautiful and complex visual design and adapted the RedDot content management system to the Mott Foundation's needs. I was hired by Beaconfire to create the HTML and CSS that would turn the design from a set of flat image files into a flexible, viable RedDot template.

Over a period of weeks, I worked with Beaconfire's technicians on the RedDot system and got the many different page variations all to look as they should, regardless of the user's browser or platform. We needed to create a "slider" effect on the homepage, which I used the moo.fx JavaScript library to achieve. I also created a snappy set of templates for the Foundation's email newsletters, to be sent via Bronto.

RedDot, Bronto, moo.fx, (D)HTML, CSS

See the website

The Infoquest Foundation

The Infoquest Foundation is a non-profit foundation that, among other goals, aims to publish paleontologists’ work in a format that young and old, scientist and layman alike can understand and enjoy. The journals and photographs created by the scientists on their travels through Mongolia, China, Argentina and elsewhere make for fascinating and educational reading.

The Infoquest Foundation’s website as it stood in August 2004 was in dire need of reorganization, having been updated in a different format each time the paleontologists returned from an expedition. Files had been lost in the tangled directory structure, design differed wildly from page to page and links often went nowhere.

Working with Laura Quinn of Alder Consulting, I helped to establish an organization scheme that would make sense to users of the website. I then moved files into directories that would make sense to future editors of the site, and combed through the pages, making them conform to the visual design that we had agreed on with the client. I inserted PHP elements into each page that would allow us to dynamically alter certain qualities of the pages, such as the width of the navigation bar or the color of each section, by changing just one central file. We presented the various options to the client by altering this file, and when they chose one, I “flattened” the pages into HTML with a search-and-replace tool.

HTML, CSS

See the website

The "Keyring" Cross-Browser Bookmark Tool

While living in Japan, I browsed the web in many different places: at internet cafes, at home, at my workplace. I often found myself trying to remember a site that I had liked and bookmarked on another machine, but couldn't get access to on the computer I was using presently. I needed a way to always have access to the same set of bookmarks, and I thought others might want the same thing.

I made Keyring, a site where a user logs in and is immediately taken to a page that spawns a smaller window, which contains all of his or her bookmarks, organized into their appropriate categories. Users can add bookmarks in two ways: either by pasting a url and title into the special fields in the bookmark window, or by uploading their bookmark files, which Keyring can parse and extract information from.

PHP, MySQL, DHTML, JavaScript

See the website

Unity08

Unity08 is a national organization that "believes that neither of today’s major parties reflects the aspirations, fears or will of the majority of Americans." They aim to nominate a "Unity Ticket," composed of one Democrat and one Republican, for the offices of President and Vice President in 2008.

Unity08 was unhappy with the design, and some of the functionality, of their website, and they had a major publicity drive coming up. They needed their entire site visually redesigned and their content management system, Drupal, re-wired ASAP.

I applied the new visual designs provided by Beaconfire Consulting of Arlington, VA to the template that Drupal uses to display the site. I then changed the behavior of the site as well:

• Revamped the front page to display a more fully-customizable set of data, which non-technical Unity08 staff can control
• Upgraded, in collaboration with Beaconfire technicians, the registration process
• Tested and installed software to allow Unity08 staff to efficiently add large numbers of users to their Drupal site at one time

The site launched on time and without a hitch.

Drupal, PHP, MySQL, HTML, CSS

See the website