Responsive Animated Infographic

In terms of responsive design, instead of having the entire presentation be fluid throughout, we had the infographic stay in place until a breakpoint, and then moved elements to different positions, allowing the main SVG to respond fluidly at that juncture.

Even though we designed desktop first, our media queries are a mobile-first implementation. I used an SVG which is very easy to make fluid, adjusting the viewport slightly on mobile with javascript.

Boosting energy efficiency: The energy used to power, heat, and cool our homes, businesses, and industries is the single largest contributor to global warming. Energy efficiency technologies allow us to use less energy to get the same—or higher—level of production, service, and comfort. This approach has vast potential to save both energy and money, and can be deployed quickly.