Studio: Flightpath | Client: Optimum/Cablevision
A relaunch for the Optimum: Get Started website, a tutorial and informational website for new customers. My role in this project was lead web developer.
When a user first visits the site, they are greated with a tutorial on how to navigate. The tutorial itself is rather simple, but it did post some challenges in its implementation, which required some creative solutions
three tutorial slides features arrows pointing at a particular object to demonstrate a point of interaction. The issue with this is that this site is responsive, and that the targeted elements such as the bottom array of buttons or the menu toggle button, are affixed to points relative to the viewport, while the tutorial window itself is always affixed to the center of the viewport.
Traditional raster images, as a result, would not be an applicable solution, as they require a fixed start and fixed end point. A more flexible solution, and thus ultimately the one chosen, was to create the arrows with HTML5's canvas element.
Making the homepage responsive was a bit of a challege as each object (phone, tablet, computer, etc) was its own div with links placed absolutely within it. This allowed for easier link placement than placing each link independent of its reference object, but posed challenges of preserving the function of each link. Divs are boxes, and although its innate transparency can elude users into thinking that visible objects are clickable, it isn't always the case. The challege, therefore, with Optimum, was to develop the interface in such a way that the bounds of the div would not overlap a top a div. His means adjusting placement of each object in the DOM so that higher stacked objects (in this case, the phone) would be indexed higher than a visually farther back object such as the television.
Eventually, however, no matter how much adjustments you do to the objects, you run out of space and things start to overlap, in which case the issue becomes size. In order to mitigate that, the homepage objects were given media query states which used CSS Transform to scale the objects down 70%, with a transform scale upwards 120% for each anchor child element in order to compensate for their size. This allowed for tablets to keep a similar sense of scale to their desktop counterparts, and preserve usablility.
The optimum brand comprises of a series of color swatches. In this case, five primary color options, and four secondary colors for each. Because the themes needed to change dynamically on the front end based on user selection, each theme would be represented by a class embedded in the body tag.
The interior pages are divided into a series of sections, which each point quickly accessable with a menu affixed to the left side of the viewport on desktop and tablet devices. On Desktop, divider images are given a parallax effect as the user scrolls. The image appears to scroll at a slightly slower pace than the page itself.