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.
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.