What's your wish for 2014? One of my wishes this year was to work on an integrated project that uses single page web design, as well as animation in emails. As luck would have it, I got my wish.

Jacobs & Clevenger wanted a little something different for their end of year card. The creative team decided to develop a single page site to showcase some of the wishes from J&C employees, and encourage others to share their wishes. By tackling a single page design for this project, we were able to incorporate elements not previously used in our other work. This includes:

  • Utilizing large video for our opening and closing frames
  • Incorporating CSS animation to bring life to each wish
  • Adding multiple forms of navigation that include single scroll, a left hand navigation menu and call-to-click buttons
  • Using glyphicons for clean, scalable symbols
  • Providing social interaction through the Twitter API to engage our audience

These features allowed us to step out of our comfort zone, and offer a new experience for our audience. The site is also responsive, which ensures our viewers can engage regardless of their device. If you're interested in playing with single page design, but don't know where to begin, check out this template from wrapbootstrap.com to get started.

Now that we have our site, how do we drive people to it? This is where our email campaign comes in. Since we were doing something new with our web approach, it only seemed natural to change-up our email. We decide to create an email that has animation as well as a borderless layout. The streamlined message and direct call-to-action, would help accentuate these design choices.

I know some people are thinking, "What, animated GIFs in an email? Have you lost your mind?" Using animated GIFs in an email definitely requires some strategy. After all, not all email clients will support the animation, and only display the first frame. For this email, the animation was used to highlight the messaging and play off of the single page site design we developed. No messaging is used in the animation. This way, if your email client doesn't support animated GIFs, you are still able to see the email with no disruption to the layout or message.

J&C Wishes
We also decided to go with a borderless layout to compliment the design of the site, as well as to play up the strength of responsive design. The layout of this email has no borders to its left and right edge, allowing the colors of each section to expand full width. Since iOS 7 came out, emails that are responsive now have padding around the body of the email. In order to get this borderless feature to work for mobile, we simply added the below code to our CSS:

html, body { margin:0; padding:0; }

You can view the email example here or by clicking on the image.

So far one of my wishes for 2014 has come true. What are some of your wishes? Check out JNCwishes.com and share your wishes for the year. Feedback on this campaign? Leave a comment here or Tweet me.