ISBX Launches Interactive HTML 5 App for TBS

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.

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 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.