GoTo11 launches site in conjunction with Btwelve design.

December 16, 2015 | By:
| In: Design, Development | Comments

A few weeks ago, GoTo11 launched a site in conjunction with Btwelve for Voightmann Law Firm:

Aside from it having a great modern responsive design and layout provided by Btwelve, there are a few technical points that are worth pointing out:

Homepage Background Video

The video background has been popular recently, so I was excited to finally have a real project that used the attention-grabbing technique. We weren’t sure if we could load the video file locally or would need to use a streaming service such as Vimeo. After doing some research, it would only be possible to use Vimeo in paying for their “pro” plan, since client doesn’t have other videos to stream this didn’t seem like a viable option. I wasn’t able to find a free streaming video service that would allow us to pull the video without a video player or watermark. Loading the video locally was our main option.

For my first attempt, I used a jquery plugin to handle the code in building the video, which had some benefits such as fallbacks and other properties, it was easy to get up and running. The first video I received from Btwelve was a 5MB mp4 file. This attempt seemed to work pretty well in Chrome on OSX, however in Internet Explorer the video playback was very jerky. Btwelve was able to adjust the video’s frame-rate and compression to get the video down to 2.5MB, with no visual difference at all. Replacing this smaller video file worked a little better in Internet Explorer but the video still did not play smoothly. Since this was happening in even latest versions of Internet Explorer it was a deal breaker for even having background video. I then took out the jquery video background plugin and created the video background using my own HTML5/CSS which is actually fairly simple. After this update, Internet Explorer played the video smoothly – the lesson learned to never build a video background in jquery, just put HTML5 video tag right in the html document.

ABC News Videos

The project required to display some video’s from an ABC affiliate’s site, where they did provide HTML embed code. However, the videos ran within a Flash video player. Since many mobile devices do not run Flash at all, and many people shut off Flash altogether, this caused an issue with people clicking to play the videos only for it not to work. Our solution was to detect for Flash on each user’s device using Modernizr and only show the video thumbnails if the user had Flash enabled. If not, the user would get a link to the ABC website news article instead. This was harder to achieve than it sounds because it takes about 2 seconds for Modernizr to complete the flash detection. I had to create a callback for after this detection was complete and then update the DOM with the video thumbnails if Flash was enabled.

Leave a Reply

Your email address will not be published. Required fields are marked *

Creating with every day using popular web technologies

Stay in the loop