Design

Using Motion to Enrich Your Case Studies

By
Jason Spidle
/
August 3, 2018

During our move to  Squarespace, we had a thought: What if we also introduced some motion to the graphics in our case studies? It isn't like moving to a new CMS is that time consuming. There's always time to do more (said every designer ever)! Flawed logic and runaway timeline aside, it was certainly worth the effort.

Micro-interactions and animation don't just delight, they tell a story. In their previous iteration, our case studies were a long scroll of screenshots and text. Pretty boring if you ask us, and worst of all, it only captured half of our design. Take a look at these two as an example from our Parade of Homes case study:

Before: still screenshot gives a basic idea of the UI
Before: still screenshot gives a basic idea of the UI
After: motion demonstrates the full breadth of functionality
After: motion demonstrates the full breadth of functionality

To our surprise, creating quality motion graphics is trickier than one might expect, particularly if you care about website performance. To find that combination of efficient file size and high fidelity, we experimented with a lot of different tools before arriving at the process described below.

Record Your Design

Given our focus on micro-interactions and quality, we chose to create our recordings from design files. This means using a tool like Framer or Flinto for creating interactive, animated prototypes. Conveniently, these tools often come with built-in screen recording functionality, so there’s no need to fuss with perfectly framing a recording box around the area you want to record.

When deciding on an interaction flow, aim to keep your recordings under 10 seconds. That said, you can trim recordings in Framer or Flinto so don't worry too much about mouse movements at the beginning and end of the recording. If the motion tool you are using doesn’t have trim tools, you can also use QuickTime to clip extraneous footage.

trim_in_quicktime

Once everything is in place, hit "Record." Then select "Discard and record again." Do that over and over and over again. Even with a scripted path, there will be a lot of takes before a recording looks right. It's easy to go too fast or too slow or to forget what parts of the prototype are  interactive or to instinctively press ⌘ cmd + ➡ tab when your boss walks by. Eventually, you will arrive at a clean recording without any misadventures. From there, export to the highest quality  video format (usually MP4).

Upload Your Video

The next step is to get your video hosted. There are a lot of options here depending on a range of variables including what your current hosting situation is, the CMS you use, and your access to subscription products like Vimeo. For the sake of simplicity, we’re going to assume you are hosting the video yourself. For our money, an S3 bucket on AWS provides the best value and easiest configuration. Once you have a bucket, upload your video and set it to public.

s3_upload

After the upload is complete, select it from the file list to find the appropriate link. You will need this to embed the video file in your case study page.

s3_link

Why not GIF?

GIFs are gigantic and take forever to load, especially on a phone. A looping video is higher quality at a fraction of the file size. The trick is configuring the <video> tag correctly so that it autoplays on the vast majority of devices.</video>

Embedding Your Video

Now that you have a well-scripted, perfectly-executed, internet-hosted video on your hands, it’s time to get that video into our case study so you can showcase it to the world. As mentioned, embedded video content will not automatically play in the browser unless you are careful about how that video is configured. Here’s the secret sauce:

<video autoplay muted loop playsinline=""></video>
 <source src="case-study-video.webm" type="video/webm">
 <source src="case-study-video.webm" type="video/mp4">

A video that is set to autoplay muted loop playsinline will automatically play on a loop in the vast majority of browsers. Safari is the real concern because of restrictions placed on autoplay videos in recent updates. It is really important the video is set to muted even if there is no audio, otherwise Safari will not play the video without user input.

Another thing you may have noticed is that there is both MP4 and webM video formats. Quality tends to be even better at an even smaller file size when delivered as a webM. Firefox and Chrome even prefer webM. Unfortunately, Safari and Internet Explorer don’t know what to do with that format so you need both. Having tried a variety of options for converting MP4 files, including command line-based tools I finally discovered the dead simple Miro Video Converter built by the fine folks at the Participatory Culture Foundation. Just select your file and set your output to webM HD under the “Other” dropdown. It works wonderfully.

miro_video_converter

Framing Your Video

As always, the last step is to add a touch of style. Again, this will depend on a million different things and is ultimately a matter of personal preference. But, maybe you want to place one of your mobile videos into a nice device frame as we’ve done on the GreyDuck case study, among others. You could make the frame part of your design or add it during video processing, but that seems silly and the quality of the frame will suffer. Instead, you should use an SVG device frame and place the video with some CSS magic ✨. Let’s have a look at the raw code for our framed mobile videos.

.sqs-block-code {
   .video-block {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
   }
   
   .mobile-video-block {
     position: relative;

     @media @for-phone-only {
       width: 290px;
       height: 580px;
     }
     @media @for-tablet-portrait-up {
       width: 375px;
       height: 750px;
     }
     @media @for-desktop-up {
       width: 390px;
       height: 780px;
     }
     
     video {
       width: 92.5925926%;
       padding-top: 17.7777778%;
     }
   }

   .mobile-video-frame {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: url('/assets/images/phone-frame.svg');
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: cover;
     z-index: @z-overlay; // over everything, basically
   }
 }
}

That’s a fair amount of CSS but there are a few key parts. The video itself is set to relative and placed inside of a container called .mobile-video-frame that is positioned absolute. All of this is set inside of a .video-block container that is set to float in the center. Easy-peasy.

The real trick is these values on the video element itself: width: 92.5925926% and padding-top: 17.7777778%. These values ensure that the video will stick right in the middle of the mobile device frame no matter how the browser window is sized. Calculating these values is actually pretty easy. Let's take the device frame we use.

frame.png

The dimensions of the frame are 405 x 810. The dimensions of the display area are 375 x 666. To find the relative width of the video, you just take 375 / 405 = 0.925925926. To find the relative padding-top you take (72 * 2) / 810 = 0.177777778.

Now you'll never need to worry about your frame looking blurry or your video wandering away. Happy showcasing.

Benke

This is benke (pronounced ben•kuh). He's a one year old rescue. He's afraid of big bags and loves cuddling on the couch.

- Travis Meyer

Kuri (Maori for dog)

Kuri acts more like a dog than a cat. She once found her way into a drywall resulting in us having to cut through our wall to get her out. She has lived in several countries, and 9 different houses/apartments with me.

- Per Kvanbeck

Flynn or Flynnigan

At the first glance he may appear a tad dopey but once you get to know him you see that his charm is that he is a love-able lug that just wants to be a part of the pack and please his humans. Getting up there in years, you will find him asleep in whatever room the rest of his humans are in.

- Leana Stone

Lou and Winnie

This pair of energetic pups love to bark at seemingly nothing. With kids around and a constant need to eat anything that hits the floor, you will often find Lou with food somewhere in his fur or Winnie with the occasional popcorn bag on her head.

- Joe De Jarnett

Nori, Dee, and Janet

Here’s my cool, calm, and collected bunch. This is Nori (a Norfolk Island Pine – left), Dee (a Bird of Paradise – back), and Janet (a Dracaena Janet Craig – right). Despite their tropical roots, they seem to have adjusted nicely to their Minnesota home.

- Kelsey Schwalbach

Cabela

Cabela enjoys long walks in the park, hunting for pheasants, grouse and crumbs off the floor. She can nap just about anywhere but she is a champion dock jumper. Flying through the air at the ol’ age of 10 just makes makes her feel like a young pup!

- Sarah Bruss

Groucho

This is Groucho, my adopted stray cat (we checked for previous families), he started following me while I was walking our dog. We fed him for a winter, a summer, and another winter, and only then he finally decided to let us bring him inside. This is a particularly glorious BLEP he gifted me that lasted several minutes.

- David Middlecamp

Jerry

This is Jerry. I mean what else can I say? We love him and are glad he is fairing well, even while at our Foundry office.

- Foundry Office

Hunter

Hunter was found alone in the middle of a freeway when she was 8 weeks old. She’s a year and half old german shepherd/chow mix. She enjoys attention more than anything, from dogs, cats, people, you name it, she wants to be your friend. Her favorite toys are extra small...preferably cat toys.

- Mika Albornoz

Franny

Meet my dog. She makes no effort to help around the house, and gets depressed on car rides. Her Olympic level shedding is world renowned. When she’s not trying to get me to play instead of work, she sleeps. And sleeps. Her hobbies include barking at people we pass on walks, removing her toys from the bin and evenly distributing around my office, and tricking me into feeding her dinner twice.

- Robert Nelson

Hamlet

As much as I hate to admit it, he runs the house. He even has his own bedroom and sleeps all day on his queen-sized bed. When he’s awake, he wrestles with his brother, but it’s hard to tell whether or not he’s having fun. He also yells at his humans constantly for food when his bowl is clearly full. He won’t eat if he even sees a speck at the bottom of the bowl. You know, cats.

- Ashley Kim

Europa

Together with Io and Callisto (Europa's cat siblings) they almost complete the set of Jupiter's four Galilean moons. We Just need Ganymede...

- Nils Hansen

Rachel and Oliver

When they’re not chasing each other in circles around the apartment, Oliver enjoys sitting on laps and Rachel enjoys biting feet. Rachel uses her extra thumb to get an exceptionally good grip to scratch furniture, while Oliver prefers to serenade us in the middle of the night with a variety of his greatest hits, including “Mrreeeeww” and “Brrrrwwoowww”.

- Claudio Rivera

Podrick

This is Podrick. He’s a happy, smart, and stubborn corgi with a passion for blueberries (and anything that his grandma sneaks him, really). He prefers humans over dogs, but he’s pretty good when it comes to the ladies. In his free time, he enjoys destroying toys, harassing his brother, napping on the couch and borking at nonexistent sounds.

- Ashley Kim

Emerson and Noodle

No introduction required.

- Evan Kearney

Baymax

This is Baymax. We have tried multiple times to grow our favorite herbs and have failed miserably... To our rescue is our new buddy, that helps us grow our herbs and vegetables. With Baymax’s help, we hope to have cilantro to add to our dinners!

- Andy Stone

Pudd’nhead

This is Pudd’nhead. She is a #cat.
- Jason Spidle

No items found.

Jason Spidle

Director of Product Design

A self-styled product therapist, Jason leads our talented team of product designers in uncovering digital solutions both obvious and unexpected. When he’s not sharing his latest discovery in the world of digital tools, you can find Jason working on the next theme song for Foundry with his band.

Got a big idea? Let's make it happen.

White Right Arrow
Let's Chat