How I Made My Films Site

Building my films site was a really exciting and educational experience for me. I gave this presentation about it at a creative team meeting last week.

Title.

I want people to see my stuff.

The Problem: My portfolio site does a decent job of featuring my design work, but my films get lost in it. Alternatively, Vimeo is a good place to find all of my videos, but it’s not exclusive to my work and cannot be customized visually.

The Solution: Make a new site.

I treated the project as a playground. I was the designer and client, so I felt free to try things that I may not typically be able to do (to the extent I’d like at least).

Influences and choices.

The concept for the site came from combining the fullscreen, sectional portfolios with cinematic, animated GIFs. I wanted something that immerses you in one thing at a time and is continually moving, like film.

I went with Futura as my primary font for the site. I love geometric sans-serifs and Futura especially for the slight off-ness of it (especially when italicized). For contrast, I used Georgia in the body copy.

The current navigation style came late in the game. It initially was a horizontal nav that was fixed as you scrolled near the top right of the window, but it would often cover up content and limited the number of links I could include. While exploring other options, I remembered Chance Graham’s site which then reminded me of New Order’s album Power, Corruption, and Lies.

This site took about three weeks from start to finish. Coding and asset preparation were two of those.

There were several code libraries and snippets I took advantage of to speed up development and enhance the site:

• HTML5 Boilerplate
• FitVids
• Bootstrap, from Twitter
• LocalScroll
• Vimeo API
• CSS Tricks

FitVids is a great tool for making video embeds responsive, but it has a shortcoming in that it scales only according to width. I needed my videos to scale with height also, so I did some math and worked up a fix in Javascript that resized a video container’s width if the window becomes wider than the video area.

// edit FitVids code - http://j.mp/yIVjuJ

// adjust panels and video to window size
function setPanelSize(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var videoWidth;
    //calculate whether the video is too tall for the space
    if ( ((windowWidth-120)*.5625) > (windowHeight-160) ) {
        videoWidth = (windowHeight-160)*1.777;
    }
    //resize video and panel
    $(‘.videocontent’).css({‘max-width’:videoWidth+’px’});
    $(‘.panel’).css({‘height’:windowHeight+’px’});
    //reset scrollspy
    $(‘body’).scrollSpy(‘refresh’);
}

Unexpectedly, the navigation was the biggest hurdle in the coding. It’s kind of complicated to explain why but the problem lies with my wanting to keep the width of the hover states determined by the text length. If you make each the same fixed width, it’s simple, but it doesn’t look as nice. I came up with two solutions and the one I went with, simply changing text size from 0 to 18 on hover, had an unintentionally cool effect.

#main-nav li {
    height: 40px;
}

#main-nav a {
    background-color: #ccc;
    line-height: 40px;
    display: inline-block;
    height: 40px;
    position: relative;
    border: none;
    color: #fff;
    font-size: 0;
    padding-left: 40px;
    overflow: hidden;
    -webkit-transition: all 0.2s ease;
    -moz-transition:    all 0.2s ease;
    -o-transition:      all 0.2s ease;
    transition:         all 0.2s ease;
}

#main-nav a:hover {
    font-size: 18px;
    padding-right: 20px;
}

There are a ton of ways to create animated GIFs. This was my general workflow for creating the looped animations from video footage.

When it came time to launch my site, I obviously turned to Facebook and Twitter, but I also submitted it to a handful of web design galleries.

As a result, I received a couple of awards.

I’m only sharing this because I found it interesting to look at how the hits rise and fall with the web gallery mentions.

I was getting the most hits I’d ever had, but when I dug deeper in the stats, I was a little let down.

Overall, I feel like the site has been a success. Lots of people are seeing my stuff, I’m gaining more followers, and I’m making some meaningful contacts.

But I believe I’m still missing my audience.

Back to work.