logo icon

eamonthomas

Portfolio of Eamon Thomas Sisk

Project Imaginat10n

One of the first responsive production sites built by B-Reel. Twitter Bootstrap was employed as the foundation for the site layout. As part of ongoing content development, I was responsible for building out the Tips and Techniques section of the site. One of the notable aspects of this project was handling inline video. Since this was the first instance where the client wanted to use video inline, we needed to address its scalability. FitVids would have been a nice solution for this, but it doesn’t play nicely with VideoJS. VideoJS is used to handle all the HTML5 videos on the site and the custom player is reliant on this. We ended up using media queries to resize the player at certain breakpoints. Due to the brevity of the assignment, we felt this was the best compromise between keeping it fixed and spending the time developing a fluid-like solution. When it came to the flash fallback for older browsers that don’t support HTML5 video (IE 8), we decided to keep the layout fixed since it was an isolated desktop experience.

Each tip included an example image or video that also had to be incorporated into a custom build fullscreen viewer which needed to be tailor specifically to this section. Many of the tips include specs with hover states for additional information to help educate the users on the terminology used in the field of photography.

Technologies used:
  • Coffeescript
  • VideoJS
  • Twitter Bootstrap
  • Susy
  • PHP

Lessons Learned

  • FitVids.js is not designed to work with VideoJS
  • Facebook's like button comment box wasn't designed with smaller viewports in mind