Silicon Valley Community Foundation - Annual Report
Achieving good performance with lots of interactivity and large assets
The client came to me having created a prototype for the website, aware that they were going to face performance issues that needed careful consideration. I worked closely with Project6 Design to produce their vision in a way that achieved good performance despite the many interactions and large assets.
Responsibilities
- Semantic HTML
- Responsive CSS
- jQuery
- GreenSock Animation
The brief for the SVCF annual report was to present data from Silicon Valley Community Fund's annual report via an interactive experience. Project6 Design provided the designs and required me to produce a fast and responsive front-end suitable for mobile, tablet, and desktop devices.
The interactive report is a slide-based presentation with animated elements and interactions. For the basic slider functionality I used Flickity which is not only very fast but great for UX as it uses physics based animations. Using Flickity's API, I was also able to control functionality such as the pausing/playing of animations as well as the parallax animations seen when navigating between certain slides.
Many of the graphical assets required animation which I achieved by exporting to SVG and animating via GreenSock GSAP. As with Flickity, this is a very fast library with a simple API; allowing me to produce the front-end in the most cost efficient way possible.
Having done some early development work to produce a concept, Project6 Design came to me aware that there were some major bottlenecks in performance. I was able to work with and advise Project6 Design on solutions to this problem. In particular, the animated maps were troublesome as they were initially far more detailed and consisted of hundreds of thousands of SVG nodes. I recommended that they be simplified and we were able to reduce down to tens of thousands without sacrificing visual appeal. This reduced overall file size and increased animation performance due to there being fewer nodes to calculate positions for. Stopping and starting animated elements when a slide was navigated to and away from also greatly increased performance.
Conclusion
Project6 Design had a particular vision for the SVCF Annual Report, one that they initially found may lead to bad performance. With my help and experience, we were able to achieve what was set out during the design phase; producing an interactive and smooth experience for users regardless of their preferred viewing device.
Ian Lunn is a Front-end Developer with 12 years commercial experience, author of CSS3 Foundations, and graduate of Internet Technology. He creates successful websites that are fast, easy to use, and built with best practices.