Applying Responsive Design to HTML5 Banner Ads

banner_0With the Chrome and Firefox teams making clear plans to deprecate Flash, the de-facto banner ad standard, there has been a frantic push to convert Flash ads to HTML5 format. HTML5 can replicate most of the features of Flash, but is often more complicated and time consuming to produce. I’ve spent a lot of time reproducing Flash ads in HTML5 and I’m often forced to sacrifice features which simply don’t translate well. Moving forward, HTML5 banners will need to grow beyond Flash mimicry and take advantage of this new medium.

My novelty app Turkey Volume Guessing App, coming this November, contains an interstitial ad for other apps I produce. With the holiday season rapidly approaching, the first promotion will be for my wish list app, Listmas. It occurred to me that a responsive layout would allow the ad to display cleanly on all device screen sizes from phone to tablet. Since the in-app ad is in HTML5 format it works well as a stand-alone banner ad in many sizes, both static and expandable.

90px To Infinity

The simplistic flat design style of lends itself well to SVG/CSS3 based animation. To start, I did make one concession in the universal size requirement, the banner has a minimum size of 300 wide and 90px high. With a repeating background and positioning based on percent, the ads build animation plays well at every other possible size. Though the layout does focus toward the middle 300px, it can be modified to make better use of greater space.

To compliment its infinitely expandable height, the ad had two vertical breakpoints. The smallest format begins at 90px and contains the complete build animation with a CTA to visit The first break-point begins at 250px and reveals badges linking directly to the app stores. The second break-point begins at 600px and reveals copy describing the app and a secondary CTA linking to

When used as an interstitial, the ad takes advantage of the forth dimension, time. In Turkey Volume Guessing App the ad first plays out its build animation full-screen. At the 10 second mark the ad container frame collapses vertically to a 90px height and gently returns the user back to the app while still remaining visible at the top. The final reveal for the full vertical content is hidden until the user follows the collapsed state CTA to “Tap to learn more.” This format combines the attention grabbing nature of an interstitial ad with the persistence of an expandable ad.


Future Development

As it stands, the ad fits all industry standards. All animation ceases at 12 seconds and, without a custom font, it fits in a 40k slot. All copy is fully editable so it could be translated into other languages as well. For convenience, all image and font assets are base64 encoded and embedded into a single index.html file. For this iteration, I focused the ad around more conventional banner sizes. With further development, the ad could be improved to work in sizes smaller than 300x90px and make better use of larger sizes.

Posted in Web Development | Leave a comment

Fire TV Stick : Don’t compare it to Chromecast

20141209_231728I set out to compare the Fire TV Stick with Chromecast and soon realized that was a mistake. Chromecast has only one function, play whatever video your phone/tablet/computer tells it to. Chromecast turns your television into a big-screen peripheral for your device. That works for a wide range of situations but sometimes you need additional functionality, especially when a phone/tablet/computer isn’t available. This is where set-top boxes like Roku, AppleTV and the original Fire TV become useful. Fire TV Stick doesn’t compete with Chromecast, it competes with those set-top boxes; and that’s a good thing. There’s room for Fire TV Stick AND Chromecast behind your television. For the money you would spend on one of those expensive boxes, you can buy a Fire TV Stick and a Chromecast. They’ll give you all of the functionality you care about and you’ll still have enough money left over for a Chinese dinner with your movie.

Exactly what you need, no more, no less

20141209_231930Fire TV Stick has two main advantages over competing products: price and performance. When you compare it to set-top boxes you find that it provides most of the same features: It streams video from all the usual sources, it has an app ecosystem, it even plays games. It falls short only in very specific areas: It hesitates for a fraction of a second when making menu selections, it doesn’t run video games that have whiz-bang 3D lighting and smoke effects, it doesn’t take up space around your television. In most cases, those limitations won’t apply to you. When you factor price into that consideration, Fire TV Stick is a product that can’t be beat!

It’s time to move past the four-way directional

20141209_233829The one negative aspect of Fire TV Stick is its remote control. I think the Chromecast team are the only product designers on the planet who understand that everyone who streams video has a smartphone in their pocket. Chromecast taught me how unnecessarily complicated remote controls make television and the best interface is no interface at all. Fire TV Stick has a very straightforward interface, but it still has an interface. You HAVE to use the four-direction remote control to navigate a huge hierarchy of menus. Amazon provides a free companion app to use your phone as a remote control. It will give you some extended functionality, like voice search and a keyboard, but it’s still just a remote control. There’s no way to simply push content from your phone or tablet to the screen as you would with Chromecast.

A better video game console than you deserve for $40

20141214_210024I was very pleasantly surprised with the library of video games available to Fire TV Stick. You won’t be playing the latest First Person Shooter with its realistic reflections and ray-traced atmospheric lighting. But you can play Sonic the Hedgehog with no noticeable lag. I bought the double dragon trilogy just for the hell of it and remembered how bad I am at those games. But what really surprised me was that my all-time favorite game, Carmageddon, was available. Even though the game is around 20 years old, it’s 3D and it’s fast-paced. Though I had trouble with the controls, I was able to play enough of it to see that performance was flawless. One side note about the controls, I didn’t purchase the official Amazon Game Controller. I already own a Nyko Playpad Pro and found it almost fully compatible with the Fire TV Stick. So far every game has worked perfectly, except the steering in Carmageddon. Even without steering, I was able to get halfway through the first track and waste two opponents. Yeah, I’m that good at Carmageddon. I assume steering would work with the official controller, and I love the game enough to seriously consider that purchase.

Unless you have a very specific need that only one of the more expensive boxes can provide, Fire TV Stick is the answer for you. At $40 it’s almost an impulse buy and you get a lot for your money. Even if you own a Chromecast, Fire TV Stick is still worth consideration. I own three Chromecasts and I still see a place for the Fire TV Stick behind my television.

Posted in Media Server, Retro Gaming, Reviews | 1 Comment

Make Your Wish List With Listmas

IconListmas is a fun way to create holiday wish lists for yourself and loved ones. Add items to your list by scanning a UPC barcode, shooting a photograph, or searching Items added via search or barcode are automatically linked to their product page. When your list is ready, share it on the web with family and friends. Add more items and re-publish your list at any time.

1414981385_751-1aListmas was born of my constant shooting photos of things my kids want for Christmas. Whenever we’re out at a store this time of year, invariably I’d hear one of my kids cry out “I WANT THAT!”. At that point I’d take a photo, make a mental note to look it up on Amazon, later add it to their Amazon wish list, then pass the list out to the family. Listmas simplifies that process into one step you can do right in the store. You can scan the product barcode and instantly link to Amazon. For more obscure things amazon doesn’t carry, you can shoot a photo and include it in the same list. When you’re done, publish the list to Then send out the link to the family, straight from the app.

Knowing that my, and potentially other people’s kids would be the focus of Listmas, I made a conscious decision to keep everything anonymous. Neither the app nor the website has a login. The app doesn’t know anything about you, except what you have entered in your list. When you publish your list to, the site generates a unique url and passes it back to the app. After that, it’s up to you to hand that url to whomever you choose.

Screenshot_2014-11-16-11-53-18This project had a bunch of firsts for me. It was the first project that my son, James, helped me with. He’s responsible for the idea of Amazon integration, he did all of the QA testing, and he came up with the name. Listmas is my first AngularJS project using the Onsen UI framework. It’s also my first project developed, platform independent, exclusively in a browser, using the Monaca IDE. I’m going to write a separate post about Monaca because I now believe it is the best way to develop phonegap/cordova apps.

Onsen UI, built on top of AngularJS, made this project a breeze. Onsen is a very polished mobile web layout framework. It’s a small framework but it has everything you need to start a project, and finish most of them. Listmas was built entirely with stock Onsen, with just a little css to color things. Onsen allowed me to focus on functionality and get the app out to the market in a little over three weeks, just in time for holiday shopping season. Oh, and Onsen integrates Font Awesome, which is mandatory for all of my projects.

If you’re looking for a quick, easy, and free way to make your holiday wish lists this year go get Listmas now for Android and iOS. And if you’re curious, here’s my list:

Posted in Facebook, Reviews, Twitter, Web Development | 1 Comment

Adventures With Customer Service #1 – Comcast

Thankyou for calling Comcast. Please hold for your complimentary colonoscopy.Our story begins about three months into my battle with Comcast over television service. Month after month I paid the bill, but all I got was a big “Not Authorized” message. I spoke with phone support, who claimed the issue was fixed. I tried the chat feature on I even tried their email form to no avail. But television is isn’t a high priority in our house and I didn’t have incentive to press the issue too hard. That was my mistake.

Suddenly, it was Shark Week Eve, and we were still without The Discovery Channel. This was Thanksgiving without a turkey. Something had to be done. I called Comcast:

Comcast Woman: How may I help you?

Me: Ok. I have a bunch of problems. But I want to focus on just this one. Let me start by asking you a few questions.

Comcast: Go ahead.

Me: First, are you able to tell me which television package I am currently subscribed?

Comcast: Yes sir. You have (mutters something “Latino Plus”)

Me: Great! Ok, now, does that package include The Discovery Channel? I know there are lots of channels but I want to know if it includes that one specific channel.

Comcast: Please hold. (Puts me on hold for a good 2-5 minutes) That package has the spanish language version of The Discovery Channel.

Me: Huh…

Comcast: Wait. No, it has the english version too.

Me: Ok, Great! My wife it fluent in spanish, but I am not, so that would have been a problem. Next question… I’m looking at my television right now. It’s on, the cable is on. I’m looking at The Discovery Channel. It says Discovery Channel on the screen. I see the title of the program on right now. A description of the program. But where the show should be, there’s a big blue box with yellow letters that say “Not Authorized.” Can you make it so that message is replaced with the program that’s supposed to be playing right now?

Comcast: I’m working on it right now.

Me: Great!

At this point she goes through some process that involves remotely restarting my cable box. Nothing is changed, it still says “Not Authorized.” The Comcast woman determines that my box is malfunctioning and Schedules an appointment for a service tech to come to my house between 7:30 and 9:30 AM.

9:27 Saturday

I get a call from the service tech. He says, “I’m on my way right now”. He arrives at 9:37AM.

Comcast: Something wrong with your modem?

Me: No no. The television. The woman I spoke with yesterday said I need a new box.

Comcast: (Gives me an odd stare) Just one moment sir.

At this point he returns to his truck for a solid 5 minutes, then comes back in to my house with a cable box. I lead him to the television and he proceeds to disconnect my son’s PlayStation 3.

Me: What are you doing?

Comcast: You said you need a cable box.

Is it a cable box or a PS3? It doesn't matter, I'm only here to waste time.

I gently take the Playstation from his hand and lead him to the other side of the television where the cable box sits. He swaps our the cable box and, sure enough, we both see the same “Not Authorized” message.

Me: This is the same issue I had with the other box.

Comcast: You’re not subscribed to this channel.

I ran him through the conversation from the day before. He proceeds to call his super secret Comcast number. There’s some discussion back and forth but they both conclude that I am not subscribed to The Discovery Channel and I need to call the support number.

Me: You’re here because I called the support number. If I call them back they’re just going to send you back out here. Is that what you want?

Comcast: There’s nothing I can do for you sir. You have to call the support number.

Me: May I speak with the person on your phone please? I think they know something about my account that the other support people do not.

Comcast: No sir. This line is for technicians only.

Me: Sir, please, let me speak with him.

I know how to fix your problem. But you don't get to talk to me.

At this point he hangs up his phone, quickly writes out a receipt for the service call and starts heading for the front door. I’m left in my living room, dumbfounded. Not knowing what to do next, I called Comcast:

Comcast: I will sign you up for (some name) package and your new total will be $160. (Last month’s bill was $122, up from $70 last year.)

Me: I’m paying for this channel already. You disconnected it and now you’re saying I have to pay more to get it back?

Comcast: Sir…

Me: Hold on. Back up. Tell me again what package I’m currently subscribed to?

Comcast: (Says that multi latino thing again)

Me: Does that package include the Discovery channel?

Comcast: No sir.

My accent is only as thick as your patience.

Me: I went through this same conversation yesterday and the woman I spoke with told me it does include the discovery channel. Now you’re telling me that she lied to me. The person I spoke with yesterday OUTRIGHT LIED TO ME! DO YOU UNDERSTAND THE SERIOUSNESS OF THIS?!

At this point we go through a back and forth. He eventually quotes me a lower price. On the $160 package and we went with that. 15 minutes later I was watching shark cams and happy to save ten dollars a month.

# of Problems to Fix 1
Total Time 6 hours (over 3 months)
Employees Involved 6
Consolation Prize $28/mo increase in cable bill
Posted in Adventures With Customer Service | Leave a comment

How To Make Android Toxic Hellstew

20140603_181826During the Apple WWDC 2014 keynote this week, CEO Tim Cook brazenly declared the Android mobile platform a “Toxic Hellstew!” Sure the words actually came from This Article, and Cook clearly attributed it to Adrian Kingsley-Hughes of ZDNET. But the Internet, which Al Gore invented of course, has never been a place to squabble over facts.

Never mind the fact that the highlight of the WWDC keynote was a reference to Android. We were talking about stew now, and I was hungry. I pressed the button on my toxic phone and asked the googles for a hellstew recipe. Sadly, I got back only results for hangover cures and anti-toxins. Maybe Tim Cook was right about this Android thing.

Platform wars aside, I wanted some stew. So in the grand tradition of Android I made my own:

Android Toxic Hellstew


  • Olive oil
  • 1 Onion (chopped)
  • 1 tbsp minced garlic
  • 1lb beef (cubed)
  • 2 russet potatoes (finely chopped)
  • 2 cups beef or vegetable stock
  • 1 can (15oz) diced tomato
  • 1 can (4oz) chopped green chiles (because androids are green!)
  • 1 can (15oz) pintos
  • 1 tsp chili powder
  • salt
  • pepper


Place your stew pot over high heat and bring to temperature.

Drain and wash the pintos.

Coat bottom of pot with olive oil. Add onions and stir fry until soft.


Add beef and garlic. Continue to stir fry until the beef is lightly browned.


Add the beef or vegetable stock, tomatoes, green chiles, potatoes, pintos and chili powder.

Bring to a boil, then reduce heat and simmer until the potatoes dissolve. Add salt and pepper to taste.


Serve with tortilla chips or rice. And, of course, no Android Toxic Hellstew is complete without Kit-Kats.


Posted in Food, Tutorials | 1 Comment