The focal point of the site is a Flash-based line chart that visualizes survey results nationally and in five select markets. Unfortunately, there was no way to compare one market to another on just one chart. Additionally, limits with the current graphic made month-to-month results appear incremental.

Manning was enlisted to solve these problems. We streamlined the design of the site to make it easier to read the data. The line chart was redeveloped to be more interactive and to make the X and Y axis scalable. Users can now see and share direct market-to-market comparisons. We also made it easier to embed the chart on blogs and other sites.

Accompanying the interactive charts are releases providing greater detail about the survey results. Manning adjusted the CSS on these release pages to accommodate the ability to embed video within them.

The new CFSI microsite is an example of how a few small changes to an existing site can provide a huge impact in terms of improving the user experience and increasing the likelihood that people will continue to subscribe to it.

As you probably already know, HTML is a computer language used for website creation. Its latest version, HTML5, is being developed to provide new ways of experiencing online content. By the end of 2010, HTML5 will be on most modern browsers.  So if you’re thinking about creating a new website, iPad app, or online video or game in the next year, you should probably know a little about HTML5.

1. Who owns HTML5?
HTML5 is an open standard which means it is not owned by any one company. Its being developed by a group called the Web Hypertext Application Technology Working Group (WHATWG) to be the new standard for watching videos, animations, ads and games on the web that had been previously dependent on third-party browser plug-ins such as market leader Adobe Flash.

If you watch video on the Internet today you are watching it through a proprietary plug-in like Flash or Silverlight. Under HTML5, video and audio will be handled by the browser so plug-ins are no longer needed. In theory, this should provide wider compatibility and a more stable environment so videos are less likely to crash your browser.

The big thing to keep in mind is that WHATWG is still developing this standard. People are using it to develop sites and applications, but HTML5 is still a work in progress. Earlier this month an official from the World Wide Web Consortium (W3C) said, “There is already a lot of excitement for HTML5, but it’s a little too early to deploy it because we’re running into interoperability issues.” If you need one fully supported standard today for video, animation or gaming that is compatible on a maximum number of browsers, you probably shouldn’t use HTML5 exclusively yet.

2. Why are companies fighting about HTML5?
Earlier this year, HTML5 was at the center of a cat fight between tech giants. In the spring, Apple tried to force developers to use HTML5 over Adobe Flash for applications for the iPad operating system iOS. The company claimed that Flash was a power hog and that it crashes browsers. Adobe fired back taking out a full-page ad in the Wall Street Journal where they said, “What we don’t love is anybody taking away your freedom to choose what you create, how you create it, and what you experience on the web.”

Many developers agreed and so did the FTC who began investigating Apple’s ban on third party app development tools for their iOS operating system. Meanwhile, Google’s Android operating system was taking off and, unlike Apple, it allowed the use of Flash apps and players. In September, Apple finally relaxed the rules about what programming technology developers can use to create apps as long as the resulting apps do not download any code.

3. Will HTML5 make Flash content obsolete?
Flash is not going away anytime soon. The reality is that Adobe Flash Player currently reaches 99% of Internet viewers. It’s widely used to embed video on websites like YouTube and Hulu, since many web browsers already have Flash Player pre-installed. Plus, Flash offers some advantages that HTML5 does not. HTML5 does not currently provide the Digital Rights Management (DRM) of video that many companies use to control and monetize their online content. (See Gizmodo article on why Hulu is not on the HTML5 band wagon yet.)

4. Will HTML5 be backwards compatible?
Most major browsers say they will support HTML5 by the end of 2010, but HTML5 won’t be supported on some older versions. So for example, Microsoft’s Internet Explorer 9 supports HTML5, but IE6 and IE7 does not natively. This happens all the time as newer versions of browsers and plug-ins replace older ones. But no company wants to alienate a large segment of their audience, so until HTML5 is compatible on the vast majority of browsers currently in use this will limit it’s use.

5. Will HTML5 protect your privacy?
The New York Times recently wrote an article about privacy concerns with HTML5. The new standard collects personal data that is stored on computer hard drives. This information includes web browsing history, a user’s location, time zone, blog text, photos, shopping cart contents, and email messages. Advertisers could potentially see weeks or even months of personal information and it’s not easy to delete this local storage. Again, this standard is still being worked on so this concern will definitely be considered by the W3C and WHATWG consortium.

There are many other interesting discussions and features of HTML5 which is why so much space is devoted to the topic in the blogosphere. The reality is that despite Apple’s best efforts, Flash is going to be around for a while. In the meantime, HTML5 will gradually evolve and be adopted and hopefully improve the way we experience engaging and interactive content online.

As part of that strategy, Manning recently launched the site for the company’s First Vehicle Services division. The site was designed to target key decision makers by showcasing the company’s fleet maintenance services. In addition to the First Vehicle Services site, Manning has developed sites for First Student, the nation’s largest student transportation provider, and First Transit, which operates a number of mass transit systems throughout North America.

We invite you to take a ride on the new First Group sites.

Clearly you’ll need an HTML5-ready browser if you want to play (with) it.  It’s interesting enough, especially if you’re from the generation that grew up with Doom (and Marathon, for those of you who were Mac users before it was cool).  As my friend noted, it even includes “5D space.”

What really precipitated from this sharing between gamers-cum-developers was a discussion about Adobe and their future. The gist of our tête-à-tête was the increasing capabilities of simple HTML, and the subsequent lessening of importance for Flash, as the standard grows.

The highlight:

Jonathan: “Adobe is f@%#ed. Finally the web will be free of Flash[.] it’s very clear that the iPhone/iPad not having flash is a volley in this… flash sucks, the sooner it’s gone, the better… if Adobe suddenly decides that they’re going to overlay every flash object with an ad… they could do it… and what recourse does anyone have?”

I’ll save my judgment about the iPhone and iPad—though it is telling that the <canvas> element was originally developed by Apple, though maybe not as a Flash-killer, per se—but I had been relatively unmoved by the argument that Flash should go away (one that my friend has upheld for quite some time) until he made the point about Adobe being the sole gatekeeper to so much content on the web.  I have my complaints about Flash, the vast majority of which revolve around its complicated interweaving of demi-object-oriented code and GUI-based animating, but I don’t particularly want it to die a terrible death.  In fact, AS3 has all but done away with most of my development-related complaints. That said, I also don’t want ads being placed on content that I’ve developed for clients.  It may be my own relative ignorance, or it might actually be a true gray area, but it seems to me there’s no particular standard for that type of thing.  As Mitch pointed out recently, it seems like every time YouTube releases a new privacy statement, it’s less privacy and more statement.  But at least there is a statement—you have to go past it to even put your content on their site.  And it is on their site, so… it kind of makes sense.  Where does something like Adobe player fall in the scheme of things. It is their player.  Yeah, I know for sure that I don’t know.

So my initial thought was one of complete rebellion: “yeah, $#@% Adobe, HTML5 for life!”  After discussing it at lunch with Mitch and Patrick, though, we hit upon the idea that it’s a two-way street. Sure, HTML5 gaining momentum would mean less of a, let’s say, market share for Adobe.  Conversely, though, it also means that Adobe will have to be competitive and, presumably, not throw ad overlays on their player. To be fair, that probably wouldn’t really have worked well for them anyway, though it is a compelling example.  There are, however, plenty of more insidious things they could be (and probably are) doing.

Anyway, this was all brought up at lunch at the tail end of a discussion I started by telling a short story about my experience with Netflix.  TL;DR I went to cancel my subscription, discovered (at Netflix’s insistence) that I could put it “on hold” instead, and did so.  This choice resulted from the fact that I’d been watching things and playing games mostly through my PC and wasn’t using Netflix so much.  This, in turn, caused me to realize that, as distribution channels multiply and companies pop up to make use of them, where we’d really come down to just a few streams not so long ago—TV and VHS->LD->VCD->DVD on one side and a few video game systems on the other (most of the titles for which crossed platforms anyway)—now we had myriad streams for acquiring our “content.” A blurring of the lines between the many platforms that exist for tapping into these streams is a definite reality too. I can download video games on Steam while watching live sports on ESPN360 and buffering an on-demand movie from any number of sources.

It sure seems to me that media cyclically experiences a “bang and crunch” model with regards to delivery. Inventing, embracing, and gainsaying any new stream is as viable a passtime as trading futures these days.  And, if you think about it, doesn’t every new device seem to sell itself by trying to harness as many content streams as possible, perhaps even by combining them to help make sense in an oversaturated world?  So I guess that’s the genesis of the cycle.  I tend to like things simple, but sometimes the lure of a new stream is so strong I forget that I don’t even like most content, regardless of medium or stream or platform.  It’s a powerful thing.  Since we love analogies (and stories) around here, I guess it’s a little like me wandering around the Merchandise Mart‘s Luxe Home after giving blood recently. Everything was packaged in such a slick way that, in my lightheaded stupor, I was ready to hire a contractor on the spot without the money, space, or really desire to own any of it.

We’ve posted a few times recently about one of our favorite projects, www.snowflakeworkshop.com. I stumbled across another similar site today: http://www.flurrious.com/. I’m not sure who is behind this site, but they took a very different visual and functional approach to making snowflakes. It’s pretty cool to see how someone else tackled a similar challenge. Additionally, they are claiming to donate to UNICEF for each shared flake– which if true is a really cool feature as well.

And social media has become a critical component of the international aid effort. The American Red Cross has set up a cell phone donation campaign, where individuals can text Haiti to 90999 to donate $10, which will then be included in their next cell phone bill

As a side note, the LA Times is featuring an interactive Flash earthquake feature that provides interesting background on the location of fault lines globally, the types of faults and the different types of earthquake waves

As of this morning we’ve reached all four corners of the globe.  Visitors have created snowflakes from over 75 countries around the world, located on 6 different continents, Antarctica being the only one missing.  There are now over 5000 unique snowflakes in our database, and they are continuing to pour in at a rate of about 15 per minute, that’s a new snowflake created every 4 seconds!

The holiday season has managed to sneak up on me again this year, aided by the fact that we haven’t had the pleasure of seeing much real snow so far this winter.  However after clicking through and reading all of the wonderful holiday greetings on the Snowflake Workshop, it feels good to be able to spread a little bit of that holiday cheer with our own little snowstorm.

You may have also seen our post about the making of the workshop from the design perspective–look for another post soon on the development work that went into the site!

SnowflakeWorkshop.com

Whenever I come across creative work that I like, my first thought is often, “How did they do that?” As someone who works in the industry and knows all the moving parts that go into a great project, I find others’ processes fascinating. But the resources for discovering this information are frustratingly few and far between. So to do my part in providing more of this kind of background info, I am going to try to spotlight a few of our projects here on the blog. Hopefully someone will find it helpful (or at least interesting) to see us pull back the curtain a bit and reveal our creative process.

The Challenge

Our client, Brinks Hofer Gilson & Lione, is one of the most respected intellectual property law firms in the nation. BHGL takes a progressive approach to client communications, and we have done a few e-vites for them in the past. This year, they wanted to send out an online replacement for a holiday card, and contacted us to do it.

Finding the Solution

Because BHGL has contacts from around the world and a variety of backgrounds, the use of specific holiday or religious symbols was off the table. So we shifted our attention toward creating something inspired by the season itself rather than by any one holiday. We decided that the winter season was an acceptable theme that might give us something to work with.

We found our idea in the overlap between winter and intellectual property. As we discussed the creative possibilities surrounding snowflake iconography, someone mentioned the old adage about no two snowflakes being alike. Light bulbs went off as we all realized this was a perfect metaphor for the intellectual property that BHGL works to protect. Our concept was to build a web-based tool that would allow BHGL employees to build their own unique snowflakes and send them to their contacts.

From Concept to Creation

Now that we had a concept, we had to figure out how to make it work. What would the interface be like? How would we build the snowflakes? How could BHGL get the maximum benefit from this tool?

Step 1: Refining the Concept

In trying to answer these questions, we became aware that most of us had done the childhood art project in which cuts made to folded paper had yielded a snowflake-like design. Because of the likelihood of many of our recipients also being familiar with this exercise, we decided it would serve as a good metaphor for our interface. Additionally, we realized that the moment of anticipation before opening the cut, folded paper made the process particularly rewarding. So we decided to build a tool that would give users a digital simulation of this process.

Step 2: Outlining the User Experience

Rather than just basing our interface on the idea of the original, we thought it would be interesting to completely simulate the folding and cutting in a way that made users feel as if they were actually having the experience of creating paper snowflakes. This meant an interface that was photo-realistic, and that allowed users to interact with real objects to create, save, send and view their snowflakes. The site would be divided into two sections: a workshop in which individual flakes were to be created, and a gallery in which to view all the finished snowflakes.

Notes from a meeting to outline the user experience

Step 3: Designing the Interface

We knew that we wanted the site to be photo-realistic, but we wanted it to be fun and slightly quirky. I felt like playing up the constructed nature of the interface would make for a more immersive experience by drawing on a user’s childhood experiences. A child’s world tends to have a very arts and crafts feel to it—crayons, construction paper, glue and glitter – drawings hanging on the refrigerator. This was the vibe we were going for.

I started to think about other work I’d seen that brought a tactile, or hand-made aesthetic to a digital, artificial application.

UPS

Gondry- Science of Sleep

Fan Video for Grizzly Bear’s Two Weeks

Two Weeks – Grizzly Bear from Gabe Askew on Vimeo.

Inspired by this work, I set out to design what our site would look like. For the workshop, I tried to picture the setting in which this kind of project might take place. What I came up with was a sort of workbench, or craft area. I populated it with the tools needed for the process, and built navigational features out of cardboard scraps. I went for hand-written type wherever possible, and vowed that every part of the site feel like it could actually be touch, handled, and interacted with.

Hand-cut portion of the logo

For the gallery, I tried to imagine how a child might display his finished work. After throwing out a few ideas (hanging from ceiling, refrigerator), I came up with the concept of a sort of puppet theater. I created a winter scene from cardboard cutouts, and used a snowstorm of paper flakes to display the finished products.

Hand-made elements for Snowflake Workshop

Step 4: Creating Video Assets

To really push the trompe l’oeil, we wanted to used live-action video of hands interacting with the snowflake. To do this, we had to script our actions to coincide perfectly with the placement of objects in the interface. We then filmed the live action against a green screen to allow for compositing later on.

Shooting green screen video elements

Step 5: Putting It All Together

All of the visual elements were rendered out as image files with transparent backgrounds and reassembled and animated using Adobe Flash. The video assets were then rendered with an alpha channel and composited into the animations. Finally, the animations were combined with an application written by our developer to create a functioning workshop. After adding music and sweetening with sound effects, the whole thing was tested and published online. We are pretty pleased with the final product and hope that everyone enjoys it. See the finished Snowflake Workshop

Behind the Scenes: Snowflake Workshop from Patrick Mouser on Vimeo.

Check back soon for an update by our developer about his process for writing the application that builds the snowflakes.