Welcyon Fitness Center

A fitness center that specializes in fitness after 50.  They went to 5 by 5 Design for a full brand identity, I got to program the website portion of that rebrand.

A clean design, but a lot of complexity

A clean design, but a lot of complexity

This theme looks simple on the surface, but each element that you look at can be styled several different ways.  Different types of content are styled to match each other.  The home page is a perfect example, made up of popup video blocks.  Each one of these blocks has a custom template to style the border of the image properly.  The idea is to keep the design from looking stale by using the same look for everything, and I think it works quite well.

The birth of Popup Video

The birth of Popup Video

The spec documents showed video being played from a thumbnail image in a pop-up video player.  When we started the site, they only had vimeo versions of the videos, but we knew that we were eventually going to want to move to flowplayer video for the final 'go-live' version of the site.  I built the block to rely on other built in and marketplace blocks to display it's video from any one of Vimeo, YouTube or FlowPlayer videos. 

This made for the most complicated block control interface I'd ever programmed.  There's a lot of interactivity programmed on the buttons and widgets to make sure that saving validates properly and that the interface works as expected.  It was a great learning experience.

There were several changes in the eventual marketplace release of this block, but Welcyon is where it was first created.  It's been a pretty good seller with pretty decent reviews, people really seem to like it. 

Secondary Login Page

Secondary Login Page

They wanted a secondary page for people with franchise access to log in, I modified the existing login page to be a little simpler and live in a different spot in the site, then redirect people to a different page on login if they're in the correct group.

Two External Forms

Two External Forms

Seems like every site ends up needing one or two of these - we made a custom contact form and a custom franchise inquiry form for this site.

Custom Slider for

Custom Slider for "Tour" Pages

I adapted some javascript code from another site and some gallery code from a free marketplace add on and extended them a bit to make a custom slider for the tour pages.  You can set two titles and a paragraph of text, either for all photos at once or individually for each photo. 

When I began work on attributes slider I came back to this block thinking it would be a good starting point for putting in the code for editing the attributes but it ended up not working.  I needed to put the attribute form in a popup modal dialog in order to save the form fields properly.

Still, at the time this was another pretty complicated block for me to program and it came together quickly and nicely, I was quite pleased with how this slider turned out.

Callout Block

Callout Block

The Designer Content add on was the start for this block, then I brought in the link text code from popup video block to include a link. There are several different views for this block - most of the sidebar content blocks scattered throughout the site are callout blocks.

When the html and css were supplied for this one, there was one page with something like 30 different views for callout items that would be in the sidebars.  It took quite a bit of thinking to determine exactly what was different between each of these views and distill them down into one set of master templates.

I've used the callout block idea on several different sites - this is a pretty extreme example of how versatile they can be but they are often very nice for little blurbs of content around sites.

Project Details

Client

5 by 5 Design

Source Files

Client supplied static html and css, pdf with several key pages from the site

Block Custom Templates - 31

Custom Blocks - 4

Marketplace Addons

  • Designer Content
  • Hutman News
  • Vimeo
  • Flowplayer Free
  • Popup Video
  • Zoom Image
blog comments powered by Disqus