https://www.audiquattro.hk/

This was a car show on a cross harbour ferry and this site features the car show, registration for the show, the new S3 Sportback, RS6 Avant and a campaign for visitors share their favourite routes in Hong Kong.

Vibrant, energetic design and animations on both desktop and mobile platform best represent the branding, even in interactive maps, to maintain a highly enjoyable experience, both on web and ferry.

Basic building blocks: PHP codeigniter, jQuery mobile,

Mobile site

We build mobile site (https://www.audiquattro.hk/?device=mobile to view mobile site on desktop)
and do redirections by detecting device type
We use a PHP library Mobile detect to identify if it is a mobile device
and browser redirect to proper URL if needed

Google map customization

We use customized style on google map
Google map provides powerful styling ability for maps (https://developers.google.com/maps/documentation/javascript/styling?csw=1)
Changing road color, sea color, parks color, labels color etc
which is very powerful and can match with the site's color tone and

Google map route tracing

In this site, there is a way for users to design a route that they think are interesting challenging.
We utilized markers and Google directions API (https://developers.google.com/maps/documentation/directions/)
to let user drop two pins, and design a route:

And this works on mobile as well.
We use browser's geolocation API to pin the points while user is driving across the city
and draw the route by Google directions API

This part is a totally new challenge as we are new to this complete customization on google maps and their supplements API
But the final outcome is very satisfactory, Google map API is very powerful
We can build smooth animation transitions, pins, markers, overlays etc, just like a standalone custom map

Video playing

There are 4 separate videos for each celebrity, placed as a Gallery
We use html5 video plugin to play video from same server: http://www.videojs.com/
But as we had 12 videos on one page,
Sometime we will reach the html5 video buffering on browser, and the video cannot play,
video onload events do not trigger (we only show the play button after all 4 video are buffered)
That will only happens if we put more than 10 videos in one page.
but there is not much browser's internal video buffering documents online,
So in the end, we need to insert/remove video tags on gallery events to overcome this problem.