Launch site: www.lisc.org/annualreport/2014
Local Initiatives Support Corporation (LISC) builds sustainable communities by connecting local organizations with resources to help revitalize neighborhoods and improve the quality of life. When LISC first inquired about an online annual report in 2009, neither of us knew exactly what the result might be, but together we made a brand-new approach to telling the stories of how they transform neighborhoods into good places to live and work.
2014 was the first year we made their report fully responsive. Beyond simply adapting the layout to mobile devices, I paid careful attention to the small details that would make an optimal reading experience on any device. One such detail was a responsive scale for typography, which allowed the whole type system to scale proportionately with the user’s screen size.
Lengthy donor lists are a staple in any nonprofit’s annual report. I chose to format these using CSS columns, which allowed us to easily change the number of columns at different breakpoints. The lists appear in four columns on the widest of screens, and in a single column on the narrowest. Keeping each group of names in a single unordered list also allowed for cleaner semantic markup and easier editing, as opposed to manually splitting the names across different divs.
A number of the local office case studies featured embedded HTML5 video clips that would began to play as soon as they appeared on screen, giving the impression of a photo springing to life. This presented a challenge for mobile, where video autoplay isn’t an option. We also didn’t want users on cellular bandwidth to be downloading video files that weren’t critical to the story. I decided to use the Responsive Comments script, which allowed me to display a static image for smaller screens and only load the video files at larger sizes.
Photography also presented a performance concern. We wanted to use large files that would appear crisp and vibrant on large high-quality monitors, but we also didn’t want mobile users to be downloading oversized photos. To address this, I saved each image at four different sizes, then implemented Filament Group’s Picturefill to swap in the small, medium, large, or extra large version depending on the screen size.
The report launched to enthusiastic responses from LISC’s board, affiliates, and followers on social media.