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.

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.

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.

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.