ISBX Launches Interactive HTML 5 App for TBS

July 30, 2012
WRITTEN BY
July 30, 2012

Kelly Chu

For the new tele­vi­sion show Sul­li­van & Son (Thurs­days at 10/9C), ISBX cre­at­ed 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 con­verge togeth­er Adobe Flash is becom­ing less rel­e­vant. The fact that Adobe is stop­ping mobile Flash sup­port says it all (Adobe’s Blog Post).
The new king in town for inter­ac­tive web con­tent is HTML 5 and with that comes the need for exten­sive knowl­edge in mas­ter­ing the lat­est in CSS and Javascript. How­ev­er, mas­ter­ing HTML 5 for desk­top and mobile is no easy task. There are many pit­falls when build­ing HTML 5 apps that devel­op­ers need to be aware of. A few basic concepts:
  • Brows­er compatibility
  • Tra­di­tion­al Javascript key frame ani­ma­tion vs. CSS animation
  • Screen res­o­lu­tion and Reti­na dis­play support
Brows­er com­pat­i­bil­i­ty on Inter­net Explor­er, Mozil­la Fire­fox, Chrome, and Safari has always been a fun­da­men­tal issue with HTML/CSS/Javascript devel­op­ment. At ISBX we sup­port Windows/Mac/iOS/Android oper­at­ing sys­tems as well as the var­i­ous brows­er plat­forms on these oper­at­ing sys­tems. Our devel­op­ment teams per­form heavy test­ing on all browsers as they devel­op, but for­tu­nate­ly, frame­works like jQuery help stan­dard­ize across all browsers. We’ve also found CSS frame­works like Sty­lus and Less CSS are tools that have helped us cre­ate reusable libraries for cross brows­er com­pat­i­bil­i­ty. These frame­works help reduce the Qual­i­ty Assur­ance (QA) time need­ed when it comes to sup­port­ing all of the brows­er configurations.
When it comes to HTML 5 ani­ma­tions and tran­si­tions devel­op­ers have to throw out the old approach using oure Javascript key frame ani­ma­tions as they might like good on a desk­top, but you’ll find poor refresh rates on mobile devices that make your ani­ma­tions look chop­py. The right approach is using CSS 3 ani­ma­tion, which uses the browser’s inher­ent sup­port for ani­ma­tions rather than the tra­di­tion­al Javascript keyframe hack. A great plu­g­in we like to use is jQuery Tran­sit for cross brows­er support.
Last­ly, screen res­o­lu­tion and Reti­na dis­play is some­thing all devel­op­ers need to be aware of. Desk­top and Mobile devices have very dif­fer­ent sized screens and mak­ing your app com­pat­i­ble is impor­tant. Addi­tion­al­ly, with Apple’s Reti­na Dis­play as well as many Android devices have dif­fer­ent screen pix­el ratios it is key to under­stand­ing how to cre­ate beau­ti­ful 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 declar­a­tive to detect for screen sizes and pix­el ratio den­si­ty at which point you can style your app dif­fer­ent­ly or just feed in high­er qual­i­ty images.
The above are just three help­ful tips when it comes to cre­at­ing great HTML 5 apps for Desk­top and Mobile. We’ve got some awe­some HTML 5 apps rolling out over the next sev­er­al months. Stay tuned.
BACK TO BLOG

Collaborate with us

Ready to discuss your project? Please fill out the basics in the form below to get in touch with us. We would love to hear from you! If you don’t like filling out forms just send an email to info@isbx.com to start discussing your project with our team!

Project Budget