Neural Labs

Experimental Experiments

HTML5 Banner Ads

Banner ads are unusual things, no one is certain how valuable they are, ROI is difficult to track and yet every large brand uses them.  Even to this day, Adobe Flash dominates the banner ad market to the point that everyone just knows them as “flash banners.”  Unfortunately, all of Flash’s downfalls drag the banner ad market down with it including it being a proprietary technology, not working across ever prevalent mobile devices and not being accessible to those with disabilities.

Problems with Flash Banners

If you forget about the fact that flash banners don’t work at all on mobile devices, you’d quickly run into the issue of them not fitting very well on a small mobile screen.  Leaderboard (728×90), Medium Rectangle (300×250) and Wide Skyscrapers (160×600) are the most popular sizes of banner ads today yet only the Medium Rectangle would fit comfortably on a mobile devices.  Imagine if your ads could automatically resize down from a Leaderboard to a Medium Rectangle based on the size of the screen with which they’re being viewed.

Another big issue is accessibility, current flash banners will either be built using images for the text or having the text broken out into vectors.  Combine that with the fact that SWFs are compiled into a binary only the flash player can read and you have an accessibility nightmare.  There’s no feasible way a screen reader can break through the compilation and read the text even if it was in plain text.  There’s got to be a better way.

HTML5 to the Rescue

HTML5 combined with CSS3 takes care of all of these issues.  It’s an open standard that everything from a desktop to the oldest of smartphones utilizes.  The text is plainly readable and can use custom fonts w/ @font-face in CSS. Also via CSS breakpoints we can actually completely reconfigure the ad to work at a number of various sizes through one single iframe embed.  No longer do we need to deploy 10 different sized banners to handle every situation.

Another huge benefit is localization. Using JavaScript, we can read the user’s preferred language set in their browser and translate our strings to match it.  This opens up the entire world to a single banner ad no matter the location or language.  The only thing to keep an eye on is how the length of words in different languages affects your design, but that can be adjusted via CSS.

Now some people think that CSS3 is limited to simple sliding transformations and isn’t sophisticated enough to catch people’s attention on the ever noisy Internet, but they’d be wrong.  We’ve put together an example page that while crude, is responsive and has a couple HTML5 banner ads on it, do yourself a favor and resize the browser and watch the Leaderboard up top resize to a Medium Rectangle and how the animations change accordingly.

 

HTML Banner Ad Demo

2D & 3D Object Recognition on Mobile Phones

We’ve been playing with some new mobile technology that allows us to trigger interactive experiences via markerless 2D or 3D objects.  What that means is we don’t need QR codes in order for the phone to be able to recognize an object and understand how far it is away from the camera as well as which way it’s facing.  It has complete spatial awareness and can make augmented reality experiences seem much more integrated without adding distracting elements to the object.  Check out a few of our videos.

3D Animation Reel

While we certainly put our interactive expertise up front and center, we’ve been handling client’s 3D modeling and animation work for years now.  Here’s our reel to give you a taste of what we can do in Maya and After Effects.

Campbell’s Dinner Spinner Demo

The Campbell’s Dinner Spinner was a web app we built as a part of an API contest they were holding.  The app is completely built and animated in HTML5 using jQuery and some custom animations and allows you to randomly pick a few ingredients and then show recipes based on those ingredients from Campbell’s massive database.  This concept can be easily translated to mobile and the web app was in fact responsive so no matter which device you used it on, it was optimized for the layout needed.