Train-ee.Com

Since you are probably here to learn more about ExpressionEngine, you might be curious about the implementation of Train-ee.com itself.

Train-ee.com runs entirely, as you’d expect, on ExpressionEngine.  Purchases are handled using EE’s Simple Commerce Module.  The only somewhat custom code is building download links to your past purchases that appear on your profile page.

The first version of the site was no visual treat - I launched the site with a design quickly mashed up from some opensource work and elements from the default EE install.  Train-ee clicked along for several months, and then it was time for some real attention to the visuals.  What you are looking at now is the result of a total rethinking of the Train-ee architecture and brand.

The Design
I started the redesign project by redesigning the site architecture based on what I was currently doing on the site, and where I thought it might go.  Once I had a sitemap laid out, I put together some wireframes of the home page and main site sections.  I handed off the sitemap and wireframes to Derik Lolli of Shift Design here in West Michigan, and Derik did his usual bang-up job of visual design. 

While most of the site was very straightforward, the home page was a bit of a challenge in that the business model of Train-ee is still in flux.  I needed a promotional area that could be changed if I decided to change the product offering, without a need for a complete reimplementation.  Derik’s solution of the jQuery-based slider area accomplished this goal nicely while adding a bit of playfulness to the home page.

The Code
To get Derik’s Photoshop docs containing the new design translated into HTML/CSS I went to Andy Ford of Aloe Studios.  Andy handled the jQuery implementation as well.  Andy was happy to hear that the site does nothing special to support IE6.  I could easily make that decision since IE6 traffic runs less than 3% here on Train-ee.com.

The Implementation
I took Andy’s code and did the EE integration.  The site uses the following 3rd Party ExpressionEngine add-ons:

  • The member-related pages (registration, profile, login etc) are brought into the site design through use of the User modules from Solspace.
  • The Tag module from Solspace powers the tag cloud in the site footer.
  • The Sitemap module from PutYourLightsOn creates a bit of extra Google juice.
  • The screencasts are delivered on the site using the FLV Plugin from John at 5Pieces.
  • Article author thumbnails are pulled from the author profile pic and resized using the Image Sizer plugin by David Rencher.
  • Gravatars appear on comments courtesy of the EEGravatar plugin by Les Jenkins.

Many thanks to the creators of these tools! 

 

Bringing you that ExpressionEngine lightbulb moment.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...