Browser Infograph

Concept

Create an infographic using illustration, web technologies, motion graphics, or other techniques that will illustrate the change in browser market share over time.

Details

I decided to use modern browser technologies to show the path leading to said technologies. To illustrate the changes, I chose to use the browser logos, map the market share to the browser’s viewport, and scale the logos appropriately over time. Using their existing logos meant the data points were easily recognizable, and readily-available SVG icons meant they would scale infinitely without any loss of quality.

As a personal goal, I wanted to accomplish the project using only CSS; no JavaScript animations or controls. I relied heavily on SASS to make that possible, building a few mixins that let me automate much of the changes between years. I did decide to add a tiny bit of JavaScript (using ScrollMagic for convenience) to trigger the first step in the infograph upon scrolling, but saw that as an enhancement that wouldn’t impact the project if JavaScript was missing.

For additional context I added a short intro, as well as a few significant milestones (in my opinion) in the browser wars. I felt this would make the project more informative and useful. For clarity, I also thought it was important to make the tabular data driving the graph available through the legend.

Lastly, I explored some newer typographic CSS features to apply some of the techniques I had learned in college. For example, old style figures, proper dashes and drop caps.

Be sure to check out the live link – https://jessedyck.me/browserstats/.

Outcome

I feel my choice to use the entire viewport as my canvas, and scaling each logo respectively of it’s market share, works as an effective visualization of the massive changes in the web.

This project let me push my abilities with SASS functions and mixins, and further explore what’s possible using only CSS animations.

Not using JavaScript did create a few challenges; changes in z-index aren’t entirely graceful, and I had very little control over the timing of some elements.