Optimum: Get Started

Roles:

  • Web Development
  • Flightpath

Theming the SASS way

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.

Because themes are adjusted dynamically on the homepage, and are utilized throughout the site, each theme was given a class, which would be applied to the body tag of each page. This would allow for all child elements to have their properties adjusted in unison dynamically with a simple class replacement via JavaScript. This also enabled features like changing the svg fill color of the period in optimum, something that would have required an image swap in a traditional raster image, reducing overall page weight.

Avoiding collisions using CSS Scaling

On the home page, links, styled to look like speech bubbles, are bound to divs which are styled to look like objects such as TVs or phones. The issue that was presented in the design of the site was that these objects themselves were rather large, and thus tend to collide into one another. Divs, like all HTML objects, are inherently rectangular objects, which presents an issue where an object appears to be clickable, but is in fact covered by a transparent div. Because of this, I determined that the best way to keep the aesthetics and functionality of the original design on smaller devices such as tablets would be to utilize CSS Transform’s transform feature. As a result, when the viewport reaches smaller sizes, the scale is reduced on all objects to be 70% their original size, and on certain elements anchor links have their placements changed to account for collided divs.

Dynamic arrow placement with Canvas

The design for the front page called for arrow placements that would run from the tutorial window to a highlighted object. If this were a non-responsive site, such an icon could have been created with an image element line a .png file, however because the site was dynamic, and the elements in question were positioned relative to the viewport, a simple static image would not suffice.

Instead, I opted to draw arrows using JavaScript’s relatively new Canvas API. Determining the points is rather simple; each arrow has two endpoints calculated to be center to the target element and roughly 30px above or below the target. Each arrow is rendered in its own canvas element, and the visibility and opacity of the arrows are handled via CSS's transitions, and toggling classes on the canvas elements.

Visit Website