Case Study: inTacto's 2012 Responsive Greeting Card

A Responsive Case Study

  • Share on Google
  • Share on Stumbleupon

We’re starting a new series of blog posts featuring “Case Studies” of unique projects that experiment with the boundaries of the Web and create trends. Most of them have been Site of the Day on Awwwards.

In this first Case Study the guys from Argentinian studio inTacto lay bare the development that went into making: inTacto's 2012 Greeting Card, a wonderful responsive game that left nobody indifferent.

We want to thank director Alejandro Lazos and the whole inTacto team for their efforts. Here at Awwwards, we hope you will join in with this interesting and illustrative project which aims to share and spread knowledge about the Web, give us the opportunity to learn and grow together, discover the techniques and technologies used, the intricacies of design, and the problems they faced and how they solved them.

Motivation

inTacto Responsive 2012 was a project intended to mark the end of that year. As such, it was important to get a balance and evaluate which lessons were worth learning and applying. In addition, we felt there were several events in 2012 that deserved to be revisited. Reality often surpasses fiction, and in digital media the most trivial news can quickly become front-page. That’s something we love, and thus, wanted to celebrate in a more experimental way.

So, for this greeting card we decided to apply one of the hottest design trends of 2012, Responsive Design. As we know, Responsive Design is a CSS technique that allows a single development to adapt to different screen sizes. Each compatible screen size represents one breakpoint in the responsive layout. This resource meant a great advantage for brands in matters of cross-device compatibility as opposed to other different approaches, which required independent developments for each device. What’s more, we wanted to go further and make it work for a new purpose.

  • How we did it

    Responsive Design was born from a functional necessity, but it hadn’t yet been applied to a different purpose such as storytelling. Similar to the way Parallax Scrolling came about, our challenge was to rethink the resource at a technical and creative level so as to take it to a higher degree of complexity and take advantage of it as a new animation technique.

    This idea wasn’t brought to life from nothing. There’s a funny story about Ale Lazos watching Star Wars Episode 4. He is a big fan of the series, and one day, while watching this scene, when the group gets trapped in a trash compactor and everything in between starts to be compacted, he connected the scene to what this Responsive project might be. The idea was later developed by the whole team to get to the final result.

  • We decided to build this layout to have 15 breakpoints, so they can be used as key frames of our animation. This method allowed us to create 7 short animation samples and put them together, one before the other, to create a segmented animation that plays as the user resizes the browser or clicks a button that triggers the animation.

    Here’s a quick look at the whole new animation technique.

  • Preparation

    Such a long animation would be a challenge not only caused by the innovative animation technique, but also by the image optimization required. Before the animation window is launched we had to anticipate and prepare several items and settings, including:

    When the introduction screen loads, a hidden DIV preloads all the images involved.

    And this is the base structure that will contain all the frames.

    //EXAMPLE:
    img
    ..........
    ..........
    ..........
    ..........
    ..........
    ..........
    Next
    Compress Expand

    Then we detect the user’s browser and initial browser width.

    $(document).ready(function()
    var width_browser = $(window).width();
    var height_browser = $(window).height();
    

    And then we launch the new window where the animation will happen through the function ‘window.open’. This is mandatory because next we’ll need to be able to control the width of the window.

    $(document).on("click",".tutorial_btn_active" ,function() { 
      new_window = window.open('card.html','intacto2012','width='+ width_browser +',height='+height_browser+',location=0,menubar=0,toolbar=0,status=1,resizable=1,scrollbars=1');
    

    We created 3 different sets of images, varying their sizes and weights, and when the browser details are detected image loading begins and the website shows the introduction screen.

    Here we define the 3 sets of images.

    var image_sets
    if (width_browser <= 1920 && width_browser > 1690 ){ image_sets = 1; }
    if (width_browser <= 1690 && width_browser > 1440 ){ image_sets = 2; }
    if (width_browser <= 1440){ image_sets = 3; }
    

    And we load the right set that the animation will require. That way the transition from image to image will happen instantly.

    if (image_sets == 1 ){
      $(".imags_preloads").append(
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img',
        'img', ........
    

    Preventing issues

    When experimenting with usability, it is essential to prevent issues that can affect the experience and the understanding of what the user is expected to do.

    For optimization purposes, we had initially detected the browser width, but there was also the chance that the user enlarges it while playing the animation. That would make the animation look small or exceed the visible area. That’s why we included a dynamic browser width check so as the development adjusts the animation window size on the go.

    Dynamic browser width check

    $(window).resize(function() {
      width_browser = $(window).width();
      height_browser = $(window).height();
    

    This script updates the browser width values constantly so as to limit its enlargement.

    Loading Animation Stages

    The code below controls the 7 stages of the movie. It defines the 15 breakpoints to be used as key frames, and calls up the next frame of the animation depending on the current scene and current browser width.

    if (image_sets == 1 ){
      if (width_browser <= 1920 && width_browser > 1824){
        $('.main_container').css('width','1920px');
        //STAGE 1
        $('.stage1 .imgs img').attr('src', 'images/stage1/1920x960.jpg');
        //STAGE 2
        $('.stage2 .imgs img').attr('src', 'images/stage2/1920x960.jpg');
        //STAGE 3
        $('.stage3 .imgs img').attr('src', 'images/stage3/1920x960.jpg');
        //STAGE 4
        $('.stage4 .imgs img').attr('src', 'images/stage4/1920x960.jpg');
        //STAGE 5
        $('.stage5 .imgs img').attr('src', 'images/stage5/1920x960.jpg');
        //STAGE 6
        $('.stage6 .imgs img').attr('src', 'images/stage6/1920x960.jpg');
        //STAGE 7
        $('.stage7 .imgs img').attr('src', 'images/stage7/1920x960.jpg');
        //NEXT STAGE
        if (stages == 2 || stages == 4 || stages == 6 ) {
          $('.next_stage').fadeIn(500);
        }
        if (stages == 1 ||  stages == 3 ||  stages == 5) {
          $('.automatic_mode_btn_reduce').fadeIn(500);
        }
        if (stages == 1){
          $('.help_arrows_a').fadeIn(500);
        }        
      }
      if (width_browser <= 1824 && width_browser > 1728){
        $('.main_container').css('width','1824px');
        //STAGE 1
        $('.stage1 .imgs img').attr('src', 'images/stage1/1824x960.jpg');
        //STAGE 2
        $('.stage2 .imgs img').attr('src', 'images/stage2/1824x960.jpg');
        //STAGE 3
        $('.stage3 .imgs img').attr('src', 'images/stage3/1824x960.jpg');
        //STAGE 4
        $('.stage4 .imgs img').attr('src', 'images/stage4/1824x960.jpg');
        //STAGE 5
        $('.stage5 .imgs img').attr('src', 'images/stage5/1824x960.jpg');
        //STAGE 6
        $('.stage6 .imgs img').attr('src', 'images/stage6/1824x960.jpg');
        //STAGE 7
        $('.stage7 .imgs img').attr('src', 'images/stage7/1824x960.jpg');
        if ($.browser.msie){
          //NEXT STAGE
          if (stages == 2 || stages == 4 || stages == 6 ) {
            $('.next_stage').fadeIn(500);
          }
          if (stages == 1 ||  stages == 3 ||  stages == 5) {
            $('.automatic_mode_btn_reduce').fadeIn(500);
          }
          if (stages == 1){
            $('.help_arrows_a').fadeIn(500);
          }
        }
      }
    

    Automatic reproduction

    Apart from the manual way of playing this greeting card, we had to provide an automized alternative, and that meant needing to resize the browser window. Our coding team created this usability feature from scratch, having to intrusively take control of the browser, and the same as they had to do to fix and limit the browser’s manual resizing function to work properly.

    Controlling Browser Window

    The following code enlarges and reduces the browser width so the animation occurs responsively.

    
    $(document).on("click",".automatic_mode_btn_reduce" ,function() {
    		automator_activated = true; 
    		if($.browser.chrome){
    			automator_counter = $(window).width();
    			automator_height = $(window).height();
    			clearInterval(automator_counter_time)
    			automator_counter_time =setInterval("automatic_mode_btn_reduce();",60);
    		} else if ($.browser.safari) {
    			automator_counter = $(window).width();
    			automator_height = $(window).height();
    			clearInterval(automator_counter_time)
    			automator_counter_time =setInterval("automatic_mode_btn_reduce();",40);
    		} else {
    			automator_counter = $(window).width();
    			automator_height = $(window).height();
    			clearInterval(automator_counter_time)
    			automator_counter_time =setInterval("automatic_mode_btn_reduce();",40);
    		}	
    });
    
    

    Finally we use ‘window.resizeTo()’ to run the automatic browser resizing.

    The result was the first animation whose movement between key frames is driven by a realignment of the CSS objects. A ‘responsive animation’, as we creatively named it.

  • The Results

    Probably the best feeling we had doing this job was finding the time to devote to something that amused us while at the same time presenting a professional challenge. It took 3 weeks of development plus a few days for tweaks and QA testings before launch.

    The impact of the greeting card was also really gratifying. We got more than 2,600 people sharing it on Facebook and 800 on Twitter. It became Awwwards’ Site of the Day with more than 300 votes from their users, and finally, we found ourselves very happy to receive positive comments from our friends and colleagues around the world.

    Overall, the piece had more than 70k views. If you didn’t have the chance to watch it, here’s a link to our Responsive 2012 Greetings Card.

    We hope you enjoy it ;)

    CREDITS

    • Creative Direction: Alejandro Lazos
    • Creative Team: Sergio Chaile, Leonel Garófalo
    • Design & Vectorial Arts: Damián ‘Demonio’ Lettiero
    • Frontend Direction: Guillermo Vázquez
    • Frontend Development: Lucas Pallares
    • Copywriting: Carla Falistoco, Gustavo Inglese

Awwwards

By inTacto Digital Partner

We are an interactive multi-award-winning agency specialized in creation of digital pieces. With offices in Buenos Aires, Miami, México DF and Spain.

intacto.com

2 3 4 5 6
CLOSE