The challenge of the touchscreen project was balancing the quality of the experience with the performance of the browser. We had hoped that HTML5 video would be the vehicle for that balance. We could get the benefit of realistic assets pre-rendered by a server farm as well as off-the-shelf video editing tools for tweaking resolution, frame rate and compression.
Unfortunately, laying interactive elements on top of video proved problematic. Our next best option was to use still renderings and “flip” between them like a flipbook. I created a prototype to prove the technology could work and to demonstrate to Yakima what the experience of interacting with touchpoints in a rotating diorama would be like. In spite of its visual roughness, they were sold on the concept. To make things interesting, we also convinced them to use a 57" touchscreen computer built by InFocus—another client of ours.
Cardboard Castle did a fantastic job producing the still frame assets. They also produced nearly identical sets of stills for each touchpoint state. By producing those touchpoints within the 3D rendering rather than as flat DOM elements, we were able to deliver a much more integrated experience. After I wired a scrubber up to the still frames, I designed a JSON data structure to map the X/Y coordinates of the touchpoints to each frame.
It didn’t take long for us to realize that entering this data by hand was going to eat a lot of project time. When Cardboard Castle revised the stills our coordinate data was invalidated. We needed a GUI to manage the data or we would blow the deadline. So I built it. The tool was accessible from the console. It walked through each still, collecting clicks and converting them into JSON output. This bought back the time we needed to fix the remaining bugs and polish the experience.
The last hurdle came the morning of the trade show. There was a problem with the scrubber. Nothing had changed in our code. I narrowed it down to a delegated event binding but couldn’t figure out why it worked one day and not the next. I tried changing the binding from the
window to the
document element and the bug mysteriously disappeared.
It was only then that it occurred to me that there could be an underlying bug in the browser. As it turned out, there was. Chrome had updated itself the morning of the trade show and a regression relating to event bindings reared its head at exactly the wrong time. We were offline for a couple of hours but managed to fix it just before the press event. We found a flag to set to prevent future updates and the rest of the show went off without a hitch.
Since the completion of this project I’ve worked on projects where base64 encoded raster images are drawn to a
canvas element. It’s much faster than DOM-based rendering. A canvas approach would have also used a smaller memory footprint and may have made more fine-grained memory management possible.
In spite of the ways I might do this project differently, we made Yakima pretty happy. We proved to them, our other clients, and to ourselves that we could use the web as a medium for building interactive experiences beyond the conventional notions of a website.
Yakima also had plans to introduce the Whispbar brand to consumers at REI sales across the country. They wanted to send their own representatives to these sales to show their customers Whispbar’s advantages and to help them through the fit process. In the past, reps would use paper catalogs and charts. For the customers, it was an uninspiring and tedious experience. This time, Yakima wanted each REI store to have an iPad-based interactive experience.
The quickest way to build an iOS app outside the “walled garden” of the App Store is by building a single page web application, utilizing its appcache to ensure it runs without an internet connection. Mobile Safari looks for
meta tags that can be used to omit the browser header and footer toolbars, making the experience nearly indistinguishable from a native one and many times faster to develop.
After the app was done and the sale was underway, I headed to my local REI to check it out. I already owned a Whispbar rack. (They’re made so well they outlast the cars I put it on, so I wasn’t about to buy another one). Nevertheless, agencies don’t often get a chance at direct observation, so I pretended to be a new customer. Walking through the app with our client’s staff added meaning and empathy to the feedback they sent us, which we used to make improvements for future sales events.