AG Event - “Pushing the boundaries of Browser Capabilities"

A Portfolio website of an event company based in Istanbul, Turkey.

Role: Creating Animated HTML5 Website for desktop and a separate lightweight mobile website.

CLIENT BRIEF

The client wanted to create a creative web experience without relying on age-old, cliched idea of 'scroll based parallax animations'. The Website Interactions had to be unique and highly interactive.

LOCALISATION

This website was developed in 2 languages, Turkey and English. The user’s country is detected and respective mobile/desktop page is shown. Country detection is done using an API from Wipmania. However, if the user already has an EN Version link (or a Turkish Site Link), the website does not go through any redirection process.

WORKFLOW & COMMUNICATION

I teamed up with iGoa for the development of this website. We made most of our communications via Skype and WhatsApp. We used Basecamp for Project Management and SVN to maintain code versions.

Prototyping Animations

Since the design team was very well versed with Adobe Flash, it was one of the best tools we could use for prototyping animations and page transitions. Most of these animations were then hand-coded to HTML5 using Velocity.JS. Some of these animations were also exported to HTML5 Canvas using Flash Pro's CreateJS Plugin.

FEATURES

Shareable URLs

The state of the website can be shared via dynamic Links. For instance, one can directly open up Awards page and "play-things" Gallery using this link.

Front-end UX

Sound On/Off preferences are stored in Local Storage. This enables a better user experience for repeat users who have previously disabled sound on the website. A user on a handheld device gets a custom keyboard for email that facilitates ease of typing an email-id.

No-JS Warning

Since the website heavily relies on JavaScript, A warning has been added for users that have JavaScript disabled. This was done using a simple technique of adding <noscript> tags.

OPTIMIZING PERFORMANCE

Image Performance

All images were compressed using tinyPNG and ImageOptim to achieve the best possible results without compromising on image quality.

Reducing HTTP Requests in Desktop Website

We disabled Parallax in favor of performance for mobile devices. We realized that having parallax meant lower scrolling performance and higher page sizes caused by loading multiple images as parallax layers. The code makes sure that desktop images are not loaded on the mobile and vice versa.

Setting up Expires Header & g-zipping Content

I made sure that the server team is setting up the “expires headers” and enabling g-zip for faster performance.

Although, this is a one page website, the code is optimized to use the least amount of DOM elements possible for achieving all the features.
Visit Website

  • My Portfolio Website

    A high-performance, Responsive website that uses the power of creative SVG and scroll based animations for enriching user experience. Read More

  • eScapegoat

    A fun vector based illustration website for a festival that has a tradition of members submitting confessions anonymously. Read Case Study

  • Croma - My Dream Home

    An Interactive HTML5 Based Catalogue for a Reputed Electronics Store in India. Read More

Back to Home Page

© 2020, All rights reserved.