Games in HTML5 Banners
An Experiment with Gaming in HTML5 Banners
This is a topic that has been on my mind for a long time now. It started when Flash ruled the advertising world. It was very rare to see games in the banner space and I always wondered why. I always thought they were successful campaigns, especially next to ads that were fairly bland and contained cookie-cutter messaging.
My first playable experiment.
What makes it unique?
- Every image is swappable by merely updating images in a folder. No need to do any extra coding. Go nuts.
- Any customizations can be done easily – like wording, the timer, points, etc.
- It’s total file size is 192k. So it can be used in regular ad placements.
- It can easily be customized for any system: Google, Sizmek or any other platform.
- Built in HTML, CSS and Javascript – all ad-friendly code languages.
- It spits out an image of your final score, to post to social media.
- It can be repurposed and reskinned to look totally different each time.
- Playable on desktop, phones, tablets – you name it.
Well, what’s the point – you may ask?
Do you remember those old Orbitz Flash ads, the ones where you played mini-golf in the banner? I remember playing them at work with friends, trying to get a hole-in-one on every course. Those games were the only reason I still remember the name Orbitz, to this day.
Why do I still vividly remember the game and Orbitz all those years and not the thousands of other ads I encountered, lets break it down:
Was it the gameplay itself?
Probably not, because I could have easily went to Armorgames or Kongregate and played games that were better and more involved. The mini-golf game was good, but it wasn’t a destination game, something that could easily drive traffic to a site.
Was it the messaging?
Absolutely not. I didn’t care for cheap travel or Orbitz in general, none of the messaging concerned me. You know what I do remember though, all the courses were in the shapes of things relative to Orbitz like the airplane in the ad above. Orbitz = travel, okay – got it.
Could it have been the location of the ads?
A little bit. I don’t remember any of the sites where these ads were placed. The game placement meant nothing for the site itself, there was no connection whatsoever because it was merely an ad. However, location was everything – if that makes sense. Making the game viewable at random, on a random site, helped its cause. It was being placed in an arena where anyone could access it, whether you like games or not.
So what made it successful in keeping my interest after all this time?
It was a solid mix of everything.
First, would I have noticed the game if it was on a gaming site? Nope. The fact that it was simply placed in front of me, while browsing for something else, made it interesting. It was like seeing flowers in a sea of grass, it stood out. It had no competition from other games, so therefore it was simply the best game on the page.
Second, the gameplay was simple, short and concise. The whole game took about 2 mintues to complete. Would I have played the same game if it took an hour to complete, probably not. It was a happy little escape from my searching. While it only held my attention for a couple minutes, it still held my attention. Plus, I was able to move on without any feeling I needed to finish the game. That’s a huge win.
The last and most important aspect is that it drilled it’s content into my brain, without force. Most ads now-a-days are clickbait. They make you feel as though you need to go somewhere else to explain what they want to tell you. The mini-golf game had subtle hints sprinkled throughout it. The courses were all in the theme of the business, the branding was un-obtrusive and didn’t take away from the game, and I didn’t feel pressured to click through to a site for any reason. Playing it over and over again, those things slowly crept into my sub-conscious. It was like seeing the same billboard while driving to work every day, you just start to remember it.
A path forward.
Its hard to determine what reception these sort of ads would garnish in the online banner space, it’s a different setting now – compared to the days of Flash. There’s really no hurt in developing games and pushing the envelope to create better banner ads. Perhaps someday, it might be commonplace to turn your ad-blocker off to see what kind of creative ideas are coming from the ads. However – until that time comes, we’re basically stuck going through the motions.
Soda Pop Stop
The Story of Soda Pop Stop
In honor of upgrading Soda Pop Stop’s site to 3.0, I’m finally going to tell the story of one of the most involved sites I’ve ever had the privilege of creating. Galco’s Soda Pop Stop
OLD SCHOOL
In May of 2016 I was contacted to help a site that was in need of fixing. The site was being repeatedly hacked by Chinese hackers and it was severely outdated. The site was running off of a version of Cold Fusion 5.0 – that was released in 2001. The design needed jump-started too. The original design was created around April of 2001. Noelle, the daughter of the owner, wanted to keep the update simple for one good reason – it had over 400 products listed on it. After taking a full survey of the site, it was nearly impossible to update. The only course of action would be a total rebuild. I was actually on the fence about taking the site, because of it’s sheer size.
THE VIDEO THAT SOLD ME
Looking around Google for methods to update the site easily, I searched for “Soda Pop Stop”. I came across this video (below) from Chow on Vimeo about Soda Pop Stop. I seriously watched it 5 or 6 times in a row. Seeing John so passionate about what he does, grouped together with a David vs. Goliath story, topped with a small family owned business trying to make it in the world – sweet mother of God, I must do everything to help them – even if it kills me. There was no doubt in my mind anymore, I’m doing it.
Obsessives: Soda Pop from CHOW.com on Vimeo.
BUILDING FROM SCRATCH
Honestly, there were pieces of me that wanted to just keep the site in Cold Fusion. However, with WordPress taking leaps and bounds in recent years along with the powerful (and free) WooCommerce, I had to convert it. This decision was gut-wrenching – because I knew the 400 products were going to come into play if I was going to start from scratch. It was not something I was looking forward to.
There was no easy way to do it. I designed the site, got it approved, and moved into building it. How do you move 400-500 pages of content from Cold Fusion 5.0 into a WordPress/WooCommerce build? Simply put – you don’t. I went through 4-5 methods of exporting data (data scrapers, exporting databases, Excel hacks etc), none of them came out as clean as I would have liked. Finally, I came the conclusion it had to be done by hand. I manually transferred 500 products, images, descriptions, and titles to 20 Google spreadsheets.
After gathering up all the info, importing it into WordPress was a breeze. Using a CSV import tool, I was able to import all the products into the site in an hour. That was a sweet treat after spending so much time gathering it all up.
THE LAUNCH WITH A HUG FROM REDDIT
December 12th, 2016 we launched the site. It was one of those launches where you hold your breath and hope to God nothing breaks. This was especially the case because I was the only developer, meaning if anything broke – I needed to fix it immediately. I thoroughly tested it for weeks before the launch, looking into every nook and cranny to make sure it was solid. It was go time. Time to freak out.
The day of the launch someone posted the Chow video to r/videos on Reddit. I honestly had no clue the post existed – as I was cautiously monitoring sales and visits. My email was on the sales notification list for when people purchased anything, so every once and a while I would see my phone light up with a sale.
Around 3pm on the 12th, 4 hours after launch my phone started going nuts. Emails were coming in on top of emails – each one was a sale from the site. My first reaction was that something was caught in a loop, and it was sending out emails at random – or worse yet, we were hacked. I went into Google Analytics to see if the visitors were legit – in real time. Opening up Analytics I noticed we had 40 concurrent users on at the same time, from different locations. Over the next 2 hours, 40 turned into 70, which turned into 100.
I’m not even sure how many sales were done on the 12th and 13th, I removed my email from the list so I could focus on other projects. I had at least 100 emails before I took my email out. Over a 24-hour span – the site had 2,329 visitors, with 93.56% of those visitors being new sessions.
The site held up to the stress, nothing went wrong.
THE PERKS OF SMALL BUSINESSES
I have some really awesome clients. They range from high demanding media agencies to the family owned shops that are doing everything to stay relevant. One of the things that stuck out about the people of Galcos is their genuine sincerity. I really take it to heart when a client says that they absolutely love everything about the work I do. I don’t think most people realize how much work goes into designing and building a full website (especially by yourself), but everyone at the Soda Pop Stop was so receptive, courteous, outgoing and positive. Not once did I have a negative conversation with them. That’s a rarity.
I vividly remember a call with Noelle from Galcos after the site was launched – when she said “I’m so glad we found you”.
It goes both ways.
Firestride the New Design
What Have I Done?
Have you ever started something, then realize that you’ve made a terrible mistake and you’re in too deep to turn back?
It started out as a simple logo redesign because I had found some spare time. Over the course of a month, it snowballed into a monster that I couldn’t control. The logo design turned into a total website reconstruction. I scrapped tons of designs, code was deleted, templates were ripped to shreds, Photoshop files grew to unmanageable file sizes. I liked where the site was going, but I hit the point of no return.
As a developer, this always happens to me – especially with my own personal projects. I really don’t know when to stop. The most interesting projects I’ve created have never seen the light of day, because I get past the fun, creative part and get bored with the drudgery of adding content.
This site was different. It was like drinking medicine that tastes awful – I knew I had to finish it for the greater good, but it was going to be terrible. The worst part was the project pages. I totally rebuilt 48 project pages from scratch.
Looking back, I’m glad I went in head first, the site looks good. Sometimes the best things come from jumping without looking. I think if I would have stepped back to see where I was going, I would have procrastinated and the site would still be on my hard drive.
