For our Holiday Card this year we wanted to create a rich interactive user experience which allowed the users to easily pass along messages of holiday cheer to their friends — “low hanging fruit” if you would. We wanted it to be quick and easy to use, fun and a little viral. It is called the EZ Corporate Cliche Optimizer Pro!
After some discussions we settled on an HTML5/CSS3/jQuery platform because we felt it would have the most reach in the mobile market and could still provide that interactive feel we wanted. It just meant that we would need to say no to Internet Explorer 6 visitors, everyone was very sad.
After logging in with their Facebook account, the application would allow the user to post “corporate cliché” holiday themed messages to a friend’s wall – prompting them to do the same.
Our Creative and Development teams worked closely to ensure feasibility of the user interface, often creating rapid prototypes and working hand-in-hand to resolve and streamline user interface issues.
When we wanted to add some more motion and more holiday cheer to the design we investigated on how to animate the snowflakes without adding performance overhead.
We settled on a layered Alpha Transparent PNG approach where one of the background layers was repositioned with CSS via jQuery’s Background Animate plug in. This is a self repeating animation which loops infinitely has a nice effect and low performance overhead, a win-win for sure.
Similarly when we wanted to provide an additional “effect” to the dynamic message animation we used an asynchronous recursion in Javascript to create a typing effect.
optimizeMessage: function(){
EZCCOP.randomMessageTyping = true;
var msg = EZCCOP.selectRandomMessage();
var len = msg.length;
var i = 0;
(function typeDataToScreen(){
$("#message").html(msg.substring(0, i));
i++;
if(i <= len){
setTimeout(typeDataToScreen, 75);
} else {
EZCCOP.randomMessageTyping = false;
};
})();
return false;
}
This function takes a string and iterates through its length adding each character to the specified message window, you can easily control the speed of the typing with the callback timer before it calls itself. It was simple, performed well and created a nice effect.
Some other challenges we faced was with the Facebook Application in general, depending on the users privacy settings sometimes messages would not post to the target, instead an oAuthException response error [“(#210) User not visible""] would be issued. this is because the targeted users privacy prohibited the posting of the message. There was no way to get that message to post so to circumvent this, we just had the response handler listen for the exemption, and to continue onto the next message.
Mobile optimizations are achieved through the use of Progressive Enhancement and CSS3 Media Queries -- this allows us to control how the application looks dependent on the resolution of the browser. This means we can target not only mobile devices, but also if they are in landscape and portrait mode.
There are more "optimizations" to come, but we truly hope everyone enjoys using the EZ Corporate Cliche Optimizer Pro, Happy Holidays.
