Joe Baron
shareclose share


Technologies used for Website and App Development



HTML5,javascript,CSS3

Modern websites are created using HTML5, javascript and CSS3. These are the open source web industry standards that are here to stay and are the recommended technologies for website creation.

The combination of HTML5, javascript, and CSS3, allows for responsive design that will adapt a web pages display to the screen size and orientation of any device. HTML5, javascript, and CSS3 also allows for interactive web experiences, such as basic animations and sounds, within your web pages - without the need of a plug in. With the huge array of growing devices and screen sizes that can access the internet these days, HTML5, javascript, and CSS3, is definitely the way forward for web design.

Web games / apps can also be created using HTML5, javascript, and CSS3. So it is possible to use HTML5, javascript, and CSS3, as an all in one solution in the web browser. Although there are still limitations and pitfalls to this approach, such as the crucial and out of your control requirement of a user having an up to date web browser, and performance issues in mobile web browsers, which may or may not be ironed out in the future. Also, you may prefer to create an app alongside your website, rather than within it, for a better overall strategy. The technology used to create that app can differ depending on the nature of the app.

Depending on your over all web strategy, the HTML5, javascript, and CSS3, all in the web browser combination may not be the most suitable technologies for your end goal. For instance, in some cases, it may be better to build your website in HTML5, javascript, and CSS3, and create your game/app as a native mobile app for iOS and Android. Phone Gap can be used to create native apps for both iOS and Android using the same HTML5, javascript, and CSS3 code base. However, Adobe AIR is better optimised for creating native game apps for both iOS and Android using an Actionscript 3 / Starling Framework code base. A user can then play your game/app at 60 frames per second as a native app on their mobile device, and on a desktop pc through the website itself, using either the ubiquitous Flash Player plug in pre-installed on virtually every pc and laptop out there (AIR option), or just plain HTML5, javascript, and CSS3 (Phone Gap option). Basically, this way you use your mobile/desktop website as a vessel to drive native app downloads on a mobile device, rather than to just provide everything for free in the web browser.

The 4 Minute Max Outs and 60 count projects are examples of this. The websites were created using HTML5, javascript, and CSS3, and the native mobile apps were created using Adobe AIR and the Starling Framework. Mobile apps can then either be purchased for a small fee or downloaded for free and carry ads and offer in-app purchases for monetisation. The apps can also be inserted into the desktop version of the website via the Flash player at any time if desired. This way users on desktops would get to play the app (or a free trial of perhaps) online in their desktop web browser, whilst users on mobiles would be directed straight to their app store instead to download the app to play.

Adobe AIR and Starling, Phone Gap

Why would you use Adobe AIR over HTML5?
HTML5 games / web apps can be converted to native iOS and Android app using Phone Gap, however, Adobe AIR with Starling is better optimised for hardware acceleration, sound control, and more complex game creation. Also the fact that HTML5 runs in mobile web browsers can be misleading in terms of choosing a technology to use.

Unlike Flash / AIR games which cannot be played on a mobile web browser, an HTML 5 game will play in both a desktop and mobile web browser. But it will probably suffer slow down on the mobile web browser, and have potential playability issues. This is both from the fact that it is being played in a mobile web browser in the first place, and that that mobile web browser may not be up to date enough to run CSS3 properly. As HTML5 basically does the same thing as Flash, for complex apps such as games, HTML5 has the same slow down issues that Flash had on mobile web browsers! So the fact HTML5 animations and interactions will play in a mobile web browser can actually end up more of a hindrance than an advantage. Simple HTML 5 animations do work great on most mobile browsers though, and, like Flash, HTML5 performs great on desktops - only with the big added advantage of not requiring a plug in for it to work in any web browser. However, the issue of potentially poor game performance of HTML 5, javascript, and CSS3 in a mobile web browser remains.

The other main issue with mobile web browser game apps is, although HMTL5 will display in a mobile web browser, do you really want it to? You probably don't want users to play your game through a mobile web browser for free anyway! You may prefer users to download your app on a mobile device instead. This allows for potential monetisation of the app that would otherwise be played for free, and at a lower quality, in a mobile web browser.

By exporting your app as a native app using the right technology, you will hopefully eliminate any slow down that would otherwise occur if you played the complex game/app in a mobile web browser.

So your website/app solution will depend on your projects needs. To sum up:-

Websites themselves are ALWAYS best done in HTML5, javascript, and CSS3. It's the best option and industry standard.

Where integrated and or native apps are concerned:-

If you want to make a web app / game that can be played for free in a mobile web browser, you need to use HTML5, javascript, and CSS3 and be mindful of potential performance issues.
The HTML 5 Phone Gap to native iOS and Android app solution, keeps everything HTML5 and can be good for simple games and data driven apps that don't stray too far from the web browsers behaviour.
The Adobe AIR to native iOS and Android app solution is best for more complex games that require better hardware acceleration and faster user interaction. However, this will require your game/app to be coded in Actionscript 3 with the Starling Framework.

All the above options will also allow you to run a version of the app/game in a desktop/laptop web browser within your HTML5, javascript, and CSS3 website.

The 4 Minute Max Outs and 60 count projects are examples of this. The websites were created using HTML5, javascript, and CSS3, and the native mobile apps were created using Adobe AIR and the Starling Framework. Mobile apps can then either be purchased for a small fee or downloaded for free and carry ads and offer in-app purchases for monetisation. The apps can also be inserted into the desktop version of the website via the Flash player at any time if desired. This way users on desktops would get to play the app (or a free trial of perhaps) online in their desktop web browser, whilst users on mobiles would be directed straight to their app store instead to download the app to play.
HTML5,javascript,CSS3

Adobe AIR and Starling, Phone Gap


  advertisement