Carolyn E. Cooper Communications

Web Development Examples

Enlarge Image | View Actual Site

A Mingled Yarn (2006 to present)

An ExpressionEngine Based Knitting Zine & E-commerce Site

This is an ongoing development. The ulltimate goal is an online publication and community for knitters and fiber artists. Along with information and community activities, the site will generate income from affiliate programs, advertising and product sales. The site runs on the ExpressionEngine content management system (CMS) program built on PHP and MySQL. Additional functionality is being added with the development of custom PHP and javascript code as well as pushing some of the standard EE modules beyond the original envelope.

The design specs called for a light, clean, fresh, nurturing feel and the awareness that much of the target audience may not have broadband access initially. As traffic increases, however, there will be a need to add images to their comments and posts. Fortunately, template and CSS-based design allows almost infinite flexibility as it grows.

Enlarge Image | View Actual Site

Gastric byPass Coach (2002-2003)

Designed as an early blog to follow Glenn Goldberg through his gastric bypass operation experience

Mr. Goldberg wanted to create a journal to follow his pre- through post-operative experience with what was then called gastric bypass surgery. From the beginning, the client wanted to build traffic in anticipation of developing a workshop or consulting service for other patients. Within 3 months, the site was appearing within the top the sites in all of the then major search engines.

Enlarge Image | View Actual Site

Example of the Client's Background Page

The client wanted the create a joyful, positive, casual site. I knew we needed to offset the large amount of content and make the site fast-loading and compatible across the maximum number of systems and browsers, so I kept the design simple, flexible and web standards complient.

Enlarge Image | View Actual Site

Weight Loss Surgery Coach (2003-2005)

The transformation of Gastric Bypass Coach site into a consulting business site

After reaching his goals both in weight and in audience development with theGastric Bypass Coach, the client was ready to re-launch the site to primarily promote his personal coaching services. The goal was to recycle the previous material and continue his journal entries while adding additional information about his coaching services and allowing people to pay for them online. In addition, the term "gastric bypass surgery" had been surpassed by the preferred "weight loss surgery" so site underwent a name change but had to maintain links between both domains. And lastly, it was apparent that the client was going to want furher changes with time. Unfortunately, there wasn't a truly viable content management system program available within the client's budget at the time, so I used Server Side Includes and CSS to allow for the client's inevitable tweaks. The site was shut down after the client's death in 2005.

Enlarge Image | View Actual Site

Example of Through Thick and Thin Entry Page

While the client wanted, and needed, some graphics with each entry, the limitations of budget, subject and download speed suggested a collection of more subjective art. It is more difficult to see pixel reduction in an art graphic than a photograph. It was also decied that key points would be highlighted so that the casual reader could skim the articles and still understand the message while others could read the entire text for depth. In all, there were 34 entries of some length with usually a coding turn-around of 24-48 hours. Hence my ongoing hunt for a high-quality, affordably priced content management system.

Enlarge Image | View Actual Site

Dance of Independence (2003-2005)

Promotional site for a commercial CD

The client had developed a parenting meditation CD and needed a site to promote it. Along with onlne ordering, it was necessary to process several sample clips which could be downloaded to a target audience that might only have 28.8k dial-up access. The overall tone was to be "peaceful, soothing, light" but matching the logo designed by another graphic artist. The client also wanted the site fleixble enoough to expand later, particularly if a subsequent video or workshop tour was produced. I chose to build the site with PHP and CSS taking advantage of modular elements which could be swapped out as needed. The business was closed in 2005.

Enlarge Image | View Actual Site

Example of Testimonials Page

The specs also wanted lots of people images of various ages and ethnicities but had a limited budget. I ended up using a wide variety of sources ranging from personal black and white photographs to stock photo discs in my collection to the purchase of few low-resolution downloads from stock houses. To compensate for the variety of resolutions, formats and color modes I took everything to greyscale and then converted them to a rosy sepia quadtone. In addition, the specs required that the rainbow-colored balls from the logo had to be integrated with the navigation and visualized javascripted rollover animation. This proved too unstable given the still conflicting browser support issues, so I simply used them a navigation bullets which turned out to work beautifully with subsequent print promotion.

Enlarge Image | View Actual Site

Elements of Web Style (2001)

A promotional web zine targeting small business owners & non-profit organizations

Developed in 2001, Elements of Web Style (Elements, for short) provided a showcase for the emerging cleaner, more accessible, modular site. At the time the predominant style was filled with blink tags, dark backgrounds with screamingly bright text, slow-loading complex graphics or alternately unstable Flash front-ends. CSS was in its infancy and there were a myriad of incompatible browsers and browser versions.

Enlarge Image | View Actual Site

Example of a Feature Article

For each feature, I designed a composite graphic in Photoshop. The three column design allowed me to include affiliate promotions as well as pull-quotes and image captions. Various studies of both print and web graphics show that image captions and pull-quotes are the first things read. In addition, bold lines were used to ensure the key information was read.

Enlarge Image | View Actual Site

The Original Cooking Up a Web Site (2000)

A lighthearted project web development worksheet for potential clients

Created in the earlier days of commercial Internet development, this was worksheet was designed to help non-web savvy clients have a better understanding of the web site develoment process and costs. The material was slightly modified from a humorous presentation I did for an Internet developers conference, but it proved successful in relaxing nervous clients wanting to build their initial web presence and uncertain what all that entailed. It was also done with the fledgeling CSS standards. And while I'd do a bit of updating and trimming, a lot of it still is true.

Enlarge Image | View Actual Site

The Original Chris Potter Biography Site (1996)

Pre-Flash Graphics-Based Navigation Site

Done for Canadian actor Chris Potter, this was designed to be distributed both online and integrated into a larger multimedia CD presentation. It was done in the days when 14.4k dial-up and 2x CD were still the norm throughout much of the country. Most people weren't connected at all and there was no Amazon.com, so the graphics files had to be kept tiny. But we still wanted imagemapped graphics. Now, of course, I'd simply grab Flash but considering that I wasn't going to be doing a Flash presentation until the following year at the Macromedia Users' Conference, I'm still pretty proud of what I achieved. But my doesn't the code look primitive today!

Enlarge Image | View Actual Site

Example of Interior Navigation Through a Section

The compass graphic was divided into four quadrants with links to the "Main" (aka Home) and "Help" pages throughout and the ability to move backwards and forwards through each section. And yes, I did all of the graphics as well as the design and coding.