Portfolio: What Would You Do? (Web)

Background

In 2013, the National Museum of the American Indian, part of the Smithsonian Institution, was interested in putting on an exhibit showcasing the history of the interactions of the government of the United States with the tribes of Native Americans, both as documented in the treaties between the two nations and, later, how the United States refused to abide by the terms it itself dictated.

Interface Media Group is well-known in DC for its expertise on storytelling, both in the political arena and in the realm of museums. Having offered several multimedia exhibits for NMAI previously, including a long-lived video wall in the museum's entrance when it opened a decade previous, NMAI counted on Interface Media to deliver an immersive, high-quality experience. Interface Media, in turn, contracted to me.

What Would You Do? became one of the centerpieces of the exhibit, summarizing the whole experience. NMAI became interested in making it available on the web, allowing everyone to experience it without having to come to Washington DC in person.

My Role

The creative lead at Interface saw how I helped the team greatly improve the experience of the kiosk installation, and wanted me to handle the website version. One of the requirements was that it function on iPad -- the only touch device with significant consumer penetration at that time -- it would have to be built using only browser elements and JavaScript, without access to Flash or Silverlight, and HTML5 was extremely new at the time. Since I was keeping myself abreast of these developments, I leapt at the opportunity to put what I was reading about into practice.

WPF's vector graphics were based on SVG, so it was easy to convert the visual elements to show on the Web. The work we'd done in making declarative animations based on a scroll position instead of complicated mathematical formulae at runtime also simplified moving over the dynamic effects that made the original interactive "pop"; rather than WPF animations with a custom clock, these were now CSS animations with a custom clock. Converting the HLSL shader that turned flat areas of color into a rich tapestry was significantly more challenging, owing to my lack of familiarity with GLSL, but I managed to reimplement substantially the same functionality. The resulting Web pages offered a near-identical experience to the in-museum kiosk to anyone running a cutting-edge browser on a high-end device with touch hardware.

Since generally-used iOS devices at the time didn't support WebGL, clocked CSS animations, or the complexity of the SVG our designers produced, I created a separate version of the Web pages using static PNG images with the texture baked in, using an off-the-shelf animation engine for JavaScript and manually resetting its clock every animation frame. It occupied significantly more bandwidth and didn't retain the same visual fidelity, but all the same content, effects, and presentation were there.

Fate

Ultimately, neither of the resulting sites was published by the Smithsonian. The creative direction to remove all scroll bars and other "visual clutter" left no affordances for those without touch devices to know to scroll (or click and drag) the page. While the SVG/CSS/GLSL version of the site functioned as an excellent tech demo in versions of Chrome and Firefox that released that month, prior versions of Chrome struggled with rendering the vector graphics while prior versions of Firefox, all versions of Safari (at the time), and IE 7-9 wouldn't render the tapestry effect, with IE 6 refusing to render the site at all. On the other side, the PNG version of the site was unable to meet the twin demands of having near-perfect visual fidelity on an Apple Cinema HD display and loading over 2G in a reasonable amount of time on an iPhone 4S. The large sizes of the images were too much for mobile devices to handle and ate a significant chunk of a visitor's mobile data tariff, while smaller images became unacceptably blurry on large-format screens for desktop or theater use, and srcset was not yet available to distinguish them.

However, as devices grew in capability, browser compatibility improved, and support lifecycles progressed, both sites became viable around late 2015, with either functioning as designed in the browsers and on the devices people were then using. With additional direction ("swipe to view more"), the SVG/CSS/GLSL became a showpiece for how IMG could produce content for Web-only kiosks such as Tightrope as well as for the Internet at large.