MEDIA CONSUMPTION ENGINE
The Media Consumption Engine was a class project designed to take our daily and weekly media consumption and display it as a web resource. This was the the framework for a larger project utilizing APIs and CURL requests.
CONCEPTION
MCE collected my consumption of Television, Film, Video, and Music across a selection of different formats and services. This was compiled into a easy to view and navigate single, responsive web page. MCE implements a flexible 1140 pixel CSS grid system. It was built on HTML5 syntax and standards. It also uses CSS media queries to identify browser specification in order to display properly across a wide range of screen sizes and resolutions.
DESIGN
The 1140 Grid System allows for easy creation of columns to display information and quick styling with general CSS rules. Using a grid system also made it natively responsive so displaying it properly across varying screen sizes was also a “built-in” feature.
The layout is pretty straightforward. Using the 1140 Grid System a three column display was set. Each column contains a main heading for media service. A second heading for recent or top media. The main content contains multiple entries consisting of an image and a text description of the media. This was initially laid out in a quick wire-frame mock-up. The wire-frame mock-up was used as a guide for coding the HTML and CSS styling.
IMPLEMENTATION
JavaScript media queries are used in conjunction with the grid system to allow the CSS to adapt to different devices and screens automatically by retrieving browser and device information and using it to filter CSS rules. By setting breakpoints to groups of CSS rules the site can automatically detect the device, browser, and screen size and use the CSS rules that correspond to those specifications and dimensions.
The fonts are hosted on-site so that they can be loaded and displayed across all devices properly.
The services and information were taken directly from my media channels. The site itself serves as a cross-section of my media consumption habits around the time the site was originally created. I have since updated some of the images and media. The YouTube videos have been updated to more recently watched videos. The Google Play Music songs section has been updated as well.
Since this was hand-coded HTML as per the project constraints and resource management couldn't be automated without a CMS, all the images were scrubbed and crushed manually. I was allowed to implement a pre-boxed Minify package so bandwidth could be saved by serving minified CSS and JS. GZip was also used to serve a compressed site to the client from the server. This was implemented though the .htaccess file using Apaches native compression.
The final version to this Media Consumption Engine can be found here.