ISBX Launches Interactive HTML 5 App for TBS

For the new television show Sullivan & Son (Thursdays at 10/9C), ISBX created an HTML 5 app for TBS. In the past these types of games and apps would have been built in Adobe Flash, but as mobile and web converge together Adobe Flash is becoming less relevant. The fact that Adobe is stopping mobile Flash support says it all (Adobe's Blog Post).

The new king in town for interactive web content is HTML 5 and with that comes the need for extensive knowledge in mastering the latest in CSS and Javascript. However, mastering HTML 5 for desktop and mobile is no easy task. There are many pitfalls when building HTML 5 apps that developers need to be aware of. A few basic concepts:

  • Browser compatibility
  • Traditional Javascript key frame animation vs. CSS animation
  • Screen resolution and Retina display support

Browser compatibility on Internet Explorer, Mozilla Firefox, Chrome, and Safari has always been a fundamental issue with HTML/CSS/Javascript development. At ISBX we support Windows/Mac/iOS/Android operating systems as well as the various browser platforms on these operating systems. Our development teams perform heavy testing on all browsers as they develop, but fortunately, frameworks like jQuery help standardize across all browsers. We’ve also found CSS frameworks like Stylus and Less CSS are tools that have helped us create reusable libraries for cross browser compatibility. These frameworks help reduce the Quality Assurance (QA) time needed when it comes to supporting all of the browser configurations.

When it comes to HTML 5 animations and transitions developers have to throw out the old approach using oure Javascript key frame animations as they might like good on a desktop, but you’ll find poor refresh rates on mobile devices that make your animations look choppy. The right approach is using CSS 3 animation, which uses the browser’s inherent support for animations rather than the traditional Javascript keyframe hack. A great plugin we like to use is jQuery Transit for cross browser support.

Lastly, screen resolution and Retina display is something all developers need to be aware of. Desktop and Mobile devices have very different sized screens and making your app compatible is important. Additionally, with Apple’s Retina Display as well as many Android devices have different screen pixel ratios it is key to understanding how to create beautiful HTML 5 apps that come out clean and crisp on these screens. What we found to be the best approach is using CSS’s @media declarative to detect for screen sizes and pixel ratio density at which point you can style your app differently or just feed in higher quality images.

The above are just three helpful tips when it comes to creating great HTML 5 apps for Desktop and Mobile. We’ve got some awesome HTML 5 apps rolling out over the next several months. Stay tuned.