Alert the Discovery Channel. I officially spotted a potential yeti at SXSW recently. Not the hairy kind with big feet, but a missing link nonetheless.
CJ Gammon, a creative technologist at Adobe, hosted a packed house — with a line out the door — at a session that focused on ways the web can be used to create rich media experiences. His talk, Rich Web Experiences and the Future of the Web, proved two things: The five tool user interface engineering tool does indeed exist and the browser is anything but dead.
Getting Even with Apple
Gammon explained how the web has evolved from a document presentation system to a rich content delivery system. With a nod to his Adobe forbearers, there was a quick mention of what Flash brought to the web. In a somewhat mournful fashion, Gammon described how the rich experiences brought to life by Flash have been all but destroyed by the arrival of mobile — or maybe, more specifically, by Apple's decision to kill Flash.
In response to the onslaught of apps and app stores, anyone who doesn't own an app store has been pushing HTML5 hard in the last few years. These attempts to bring the browser experience back to parity with what is possible within the native app space have been promising to show practical application for the last two years.
In just under an hour, Gammon went through almost 30 different techniques that are now available within HTML5 to make visually significant browser-based experiences. (You can get an idea of the experiencs in the video below. But navigate directly to the HTML5 presentation to see the full effects in your browser. Many of the effects are engaged by mousing over areas or clicking in the main body of the presentation.)
Beautiful Browser Experiences
Gammon showed multiple techniques with interactions that close some of the gaps with native experiences, and others that leave current app capabilities in the dust. Some of the most powerful and interesting ones below:
- Clip Paths with custom defined transparent sections of images
- Static and Dynamic Masks for merging interactive content with static and dynamic patterns
- Basic and advanced color blending with blend modes
- Basic and advanced photo filters
- JS Creation of Scalable Vector Graphics (SVG) to avoid pixelation
- Scripted generation of scalable art
- WebGL with animation close enough to mimic angry birds without an app
- DVD like video with custom blending against green screens
- Parallax Capable Video Games
- Advanced telecom video through the browser with WebRTC
For the developers and the DevOps teams that build and support online experiences the online reference frameworks and documentation is plentiful:
- CanIUse to check the latest compatibility specs that get noticeably better every few months
- Visual Design Frameworks - Raphael.js,D3.js, snap.svg,
- Animation Frameworks - Easel, Processing, Three, Babylon and Pixi
Tracking the Yeti
When Gammon's talk was done, it was clear that he might be one of the ever so rare yeti. In the course of an hour, Gammon displayed:
- Visual design skills capable of understanding branding and communication concepts
- Advanced scripting capabilities with an engineering mindset
- Advanced CSS Skills for creating dynamic and scalable presentation frameworks
- Capable of understanding the business context and communicating it effectively
- Advanced markup skills with an eye towards extreme cross browser capability
Yeti sightings can be rare, and they don’t always leave a trail to follow. In this instance however, Gammon left a footprint in the form of reference source code for anyone who would like to reproduce the visual and scripted effects that he demonstrated.
I don’t know whether universities have caught up to the market enough to produce more engineering minded artists like Gammon. What I do know is that where I live in the southeast US, great frond-end developers are among the rarest of commodities.
I’ve attempted to set up a natural preserve within my enterprise where they can run free and create awesome, high-performant experiences that are both maintainable and scalable. They don’t really require much care. Give them great hardware, interesting projects and a seat at the table for both experience design and technology choices and they are likely to stick around.
It is critical to not get too overconfident though. The yeti can be a little temperamental when they are asked to make too many compromises on either experience design or technology tradeoffs.
The yeti have very high standards and don’t like to be told to make things they aren’t proud to put their name on. That’s the best key to hiring and keeping your own yeti happy — allow them the freedom to make your customer experiences great ones that break the mold of what others believe is possible.
Title image by Prometheus72 (Shutterstock).