From the initial phone conference with the company’s founders, Stu McLaren and Tracy Childers, I knew that this would be a fun collaboration, and a great fit. To be honest, I’ve never had a client bring so much useful information to the table during the preliminary meeting. These guys had a clear idea of how they wanted the site to function and what features needed to be included — along with dozens of examples from other sites. This information was welcome, and made the design process flow smoothly, without wasting effort on multiple design iterations.

Custom Features and Functions…

In addition to the site being built on the popular WordPress content management system, Stu and Tracy made a few other requests, which were easily accommodated…

1. Build the site using WooThemes’ Canvas as a framework.

Rather than designing the entire site from scratch — which can take several weeks — we agreed to build the site utilizing a WordPress theme from WooThemes as a framework, inheriting the powerful functions and features of the WooFramework, while also leveraging WishList staff members’ experience with other WooThemes.

Since I frequently use WooThemes as starting points for WordPress-powered theme designs, and have even produced a series of tutorial videos for WooThemes, this was an easy request that enabled me to leverage my own intimate knowledge of this flexible theme and framework to create a unique web presence for WishList Products.

2. Utilize a “Child Theme” strategy to facilitate easy upgrades.

Instead of modifying the core theme files in the Canvas framework, I created a custom child theme, which inherits all the functionality of the parent theme, but allows me to modify and add to the functionality of that parent theme. When WooThemes releases a new version of the Canvas theme or the WooFramework, the WishList folks can easily overwrite and upgrade the original theme without losing the customizations.

3. Create color variations for easy use in related sites.

Because there are three individual websites under the WishList Products moniker, the final WordPress theme will eventually be installed across all these related sites. Stu and Tracy asked me to create an easy method to change the accent color for each site, thus ensuring that each site has its own unique brand, while also maintaining a consistent design across all the web properties.

This was accomplished through the addition of a new drop-down menu in the Theme Options panel, which allows them to easily toggle between color and style variations. Each style applies a unique CSS stylesheet, overriding the default colors used in key areas throughout the page layout.

4. Site Showcase

With more than 26,000 sites currently being powered by the WishList Member plugin, it was a “no-brainer” to showcase some of those sites via a dedicated page template. I designed a system that utilizes the Gravity Forms plugin to accept entries for inclusion in the site showcase via a public-facing form. This functionality makes use of a Custom Post Type in WordPress, which allow for the creation of other content types.

Once sites are submitted and approved, they appear on the site showcase page, as well being displayed on the homepage — or any other page in the site — through the use of a custom shortcode. Tracy and Stu can simply add: [insertShowcase] to any page or post, and the site showcase will be dynamically inserted at that point in the page.

5. Testimonials

Like the site showcase, testimonials may be submitted via a public-facing form, and are randomly displayed on the homepage — or any other page in the site — through the inclusion of another custom shortcode: [insertRandomTestimonial]

The custom page template for the testimonials not only displays the text, but also includes a photograph of the individual, hovering over a background map of their city. This idea was shamelessly borrowed from 37Signals, but I designed a fully-automated process for generating the map and other elements dynamically, using the Google Maps API.

6. Featured Items and Announcements

From time to time, Stu and Tracy need to communicate important announcements on the website, so they asked me to design a system that would do so in an attention-getting way. First, I created a Custom Post Type for the announcements. When an announcement is present, a brightly-colored panel appears on the page, sliding down to reveal the contents of the announcement.

Additionally, there is a sidebar widget that resembles a Post-It note, which may be used in conjunction with the animated slider or independently.

7. Custom Widgets

As if this custom functionality wasn’t enough, there are also 11 custom-coded widgets for use in the sidebar and footer of the site(s). These widgets add a number of custom features, including displaying social proof, links to the other WishList sites, and even a counter that displays the current number of sites being powered by the WishList Member plugin.

The Design Process…

After our initial phone conference, during which the design objectives were clearly identified, I went to work, creating a simple wireframe illustration of the homepage and an inside page.

The wireframes were quickly approved, and I moved on to the next phase, creating a set of five sample pages in Photoshop, which established the common design elements, typography, colors, and layout. I created three different versions of these pages, to demonstrate the color variations which would be used across the various WishList Products websites…

The design comps were warmly received, and approval was given to move on to the coding phase. Over the next couple of weeks, I converted the Photoshop files to a fully-functional WordPress child theme, complete with custom widgets and the other features mentioned above.

The WishList Member Sales Letter

With the WordPress theme complete, Stu and Tracy then asked me to help them develop a compelling long-form sales letter for use on the WishList Member site. This single landing page bears the responsibility of introducing folks to the WishList Member plugin, its features and benefits, pricing details, and more.

The sales letter page relies heavily on the built-in shortcodes that are included in the WooFramework, to create the buttons, dividers, and toggle boxes that slide down to reveal more content, making the most of screen real estate.

I also created a custom pricing table, and a simple screenshot tour of the product, which displays enlarged versions of the product images when they are clicked.

Read what they had to say about the final results…

“I can remember the day when Stu told me that he had found the guy to revamp our website. He said, ‘Best of all, he’s using WishList Member on one of his sites, so I think he’ll be familiar with what we’re doing.’ It took me one look at Shawn’s work to agree with Stu that we had found our guy.

“What happened next took me by surprise. I knew that Shawn would be able to pull off the look and design we were hoping for, but I had no idea what a positive experience it would be throughout the entire process. From the first discussion, everything we mentioned was completely understood. There were additional things added that we didn’t consider. There were clear objectives of the project with a project proposal along with delivery dates clearly specified. When I saw the wireframes, I was floored. They looked exactly like what we had envisioned, and delivered on the date they were promised.

“Without a doubt, this was the most positive experience I’ve ever had in working on a project like this. Shawn seems to be good at everything he touches. We’re definitely reaping the long term rewards of having a top notch site design.”

Tracy Childers
Co-Founder of WishList Products

Click here to visit WishList Member now →

http://tinyurl.com/5u75pe

So when Gary offers his take on “how to monetize your blog”, he knows what he’s talking about. Check out this video, complete with a live, unscripted call to a would-be sponsor for his site. Take notes.

1. Quit Mail
2. Open the Terminal and type in the following:

   
   defaults write com.apple.mail MinimumHTMLFontSize 12

3. Restart Mail.app and your HTML messages should now be more readable.

Of course, you can set the point size to whatever you like.