Emil G. Purugganan ›

BMW World 2014

BMW World is an event that showcases the latest in BMW vehicles and technology in Marina Bay Sands, Singapore. The website had three phases: first phase was to introduce the event and sell tickets, second phase (shown below) included more information about the event and stories theme, third phase is afterwards and shows photos taken during the event.

The site is built on Bootstrap, which saved a lot of time as most of the layout containers and elements are already responsive. Animations are done in CSS to keep it smooth on mobile devices. The image carousel has 3 sets of each image so smaller screens will load the smaller versions, using padding-top to change the ratio for each set. The HTML videos were a bit trickier, having to build a content slider that plays each video on loop, but pausing when the Learn More overlay is shown. The code is run through gulp.js build system to optimize images, css and js files before deploying.

Check out a demo site of the second phase.