HTML5

Art, Copy & Code. Nike’s “Phenomenal Shot” campaign.

The business of advertising is a tricky game. You need to keep one step ahead of the competition, constantly create memorable and unique advertisements, develop those ideas across an ever expanding horizon of channels, and constantly create something new for your client. One agency that seems to do this with ease on a regular basis is W+K and when they team up with Grow and Google they produce something really unique that shows just how the world of advertising is changing in clever new ways.

In a campaign for Nike, W+K and Grow created a series of Real-Time ads that were designed to let fans celebrate, remix, and share customized posters, and images within 10 seconds of a sporting event happening live. “Phenomenal Shot” uses a Nike sponsored player rendered  in 3D along with a series of prewritten headlines, phrases, stickers, and filters, that allow fans to remix that moment and share with friends across a variety of digital networks.

The Real-Time Ads are rendered with a  3D-Engine and then distributed via the Google Ad Network across all devices creating an immersive experience powered by HTML5, CSS, and java script. Using the gyroscope that is built in to smartphones and tablets fans can spin the Nike athlete in 3D space to create the perfect shot before embellishing with ad-ons. Since the entire experience is rendered with WebGL the experience happens within the browser and there is no need for plugins or a dedicated app. Pretty damn slick, and a great way to promote your brand without being overly pushy or doing a hard sell. For more info on #ArtCopyCode click here.

Aether, “Cone”.

I originally went to the Aether website to check out the new microsite for their “Cone” speaker. The site takes full advantage of HTML5, CSS, Full screen video, and other modern web browsing experiences. The look and feel is simple, clean and refined with limited copy allowing the images, video and audio to effectively sell the product. While checking out the look of the new site, I kind of fell in love with the “Cone” speaker itself.

copper

Cone is a portable speaker with a minimalist design aesthetic, and ease of use in mind. The intelligent electronics inside Cone collect an ongoing record of the users music history remembering when, where and what was played, creating smart playlists for the right time and place. Cone draws from your personal music collection as well as from an online library packed with more than 20 million tracks available to you. The online catalog also features internet radio services and pod casts extending your listening experience.

silver

The controls are simple. Touch the center button for play pause and power, rotate the outer ring for track selection and volume. If you click through to the nicely designed website there is a section of videos that show Cone in action. right now Cone is available for pre-order and it comes in either black and copper, or white and silver color combinations. Cone is powered by a Lithium Ion battery that delivers up to 8 hours of playback on a single charge. To get Cone up and running you will need an iPhone,iPad or Mac, but Android is in the works.

Working Adobe Muse

Yesterday afternoon I was given an assignment to build a micro-site, on a very tight deadline and budget. Now I want to point out I am Not a coder/developer. I can hack my way around with some light HTML and CSS stuff but I am not the guy you want to sit down and start writing from code scratch. Especially if it involves advanced HTML5 and CSS tricks paired up with Java.

So in order to get the initial site design hammered out with the correct flow, look and feel, and user experience, I turned to Adobe Muse which I haven’t touched since it was in beta on Adobe Labs. I have to say, while not perfect, it does a solid job of letting me plan and execute this small 11 page site. The application is pretty much drop dead simple, and allows you to create all sorts of things like modal windows with video embedded in it.

Now before any hardcore code junkies fire up the comment wagon and send a bunch of comments slamming Muse, remember this application was not built for developers. It was built for designers that need to rapid prototype a web design for functionality and user flow. And hopefully Muse will be a catalyst for designers wanting to learn more about HTML, CSS, and Java. For a couple of quick reviews of the software, click here or here. For a more in depth overview of what Muse does, and to see how it is different from things like Dreamweaver watch the video below.

The Death of Flash is Greatly Exaggerated.

Yesterday morning like most people in the tech world I saw the announcement that Adobe was no longer going to continue to develop Flash for mobile devices. That was rather ironic considering that I was starting a 3 day class on developing applications for Android and iOS devices using Flash. Thankfully class was not cancelled.

As the day progressed the headlines rolled out across the internet proclaiming the death of Flash, the victory of HTML5, and How Steve Job’s had been right. My fave was the headline from Fox News “Steve Jobs Was Right: Adobe Halts Flash for Mobile Devices“. The funny thing is, Flash isn’t dead, Steve wasn’t necessarily right, and a more accurate description would be that Adobe has halted Flash development for mobile devices that want to run Flash in a browser using the Flash plugin.

So here we are, once again in a position where we will have to try to explain that Flash does a great job of doing mobile development. That you can build applications with Flash, compile them for Android and iOS devices, and distribute them via any app store. I hate to say it but this is going to be an up hill battle, and it is going to be a hard one. To many people in the design and content development industry don’t fully understand what Adobe announced, but feel compelled to expound on the wonders of HTML 5, and CSS3.

HTML 5 and CSS3 are not technological panacea for mobile devices. Like Flash they are solid tools for mobile development but they are the only solution, and they are not necessarily the best or easiest solution for the job.

Yesterday I spent the afternoon in class building a standalone application for both the iPhone and Android phones using Flash CS5.5. We built the file twice. One hard coding the app, the other by using built-in Flash tools, and code snippets. The application was fairly simple, it loaded an image from the library and allowed you to zoom, rotate, scale etc. Nothing ground breaking, but what the application was isn’t the point. The point is Flash provided an easy to use familiar interactive development environment that built applications for both Android and iOS. I say this, and I am not a huge fan of Flash. I am not a programmer. I’m a designer. I find Flash to finicky on the Mac. I think the UI needs a serious update to look more like Edge and After Effects. It is not my favorite application that Adobe makes. With that said though, I think it is a shame that so many people are writing it off as a dead platform without fully understanding the tool, its capabilities, and how it can continue to be used as a development tool for mobile devices.

If you want to see some examples of truly amazing work that has been built with Flash for mobile platforms go to the Adobe Developer site and look around. Spend some time looking at Sylvester’s Band. This app was built with a very small crew on a short time frame and it is a fantastic example of how Flash is used to build apps for Android and iOS.

100 percent built with Flash, and distributed to iPad, iPhone, Android, and Blackberry,

 

Infographic Monday. The Evolution of the Web.

It’s Monday, and that means a link to a fancy schmancy infographic. This one comes to you from the people at Evolution of the Web, and the reason I am posting a linked image is the infographic is interactive.

This goes all the way back to the internet dark ages with browsers like Mosaic, and rolls forward to the latest versions of Chrome, Firefox, Safari, and IE. If you are curious about what is possible and plays well, this interactive image shows where things like HTML5, CSS3, WebGL, and Flash are supported.

 

The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.

Click the image below to see the full interactive graphic on The Evolution of the Web site.