Matthew Lee Design & Development

About & Contact

Local Initiatives Support Corporation

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.

Local Initiatives Support Corporation Local Initiatives Support Corporation Local Initiatives Support Corporation Local Initiatives Support Corporation

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.

Local Initiatives Support Corporation
Typography at four different breakpoints, from widest to narrowest.

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.

Local Initiatives Support Corporation

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.

Local Initiatives Support Corporation

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.

Local Initiatives Support Corporation Local Initiatives Support Corporation

The report launched to enthusiastic responses from LISC’s board, affiliates, and followers on social media.

Local Initiatives Support Corporation

American Association for the Advancement of Science

HTML Styleguide

Center for Curatorial Leadership

Website

Local Initiatives Support Corporation

Online Annual Report

National Fish and Wildlife Foundation

Online Annual Report

NYC Office of Emergency Management

Intranet and HTML Styleguide

Roanoke College

Website

Spectra

Website

Strada

Website