From a game and interactive developer's perspective — a clear-eyed look at Flash vs HTML5, native vs cross-compiled apps, iOS vs Android, and how to choose the right technology for your digital content in 2014.

From: A game and Interactive developer / Digital Strategist perspective

To: All decision-makers who got lost in the overgrown device and tech jungle

I often meet people who are in a situation where they have to produce digital content in form of an app or a website – and they have a hard time figuring out what technology to choose.

I just came back from a conference about cross-media animation and interactive entertainment, which was mainly about showing the opportunities in digital games and interactivity for animators and people in the broadcasting entertainment business.

I was not surprised to see that a lot of people I met from the broadcasting business, that were trying to expand their digital strategy on web and other devices, had a hard time telling facts from rumours – and this is something I experience a lot from clients and decision-makers too.

So why are we in this mess that some people might call it? Let me try to elaborate some of the things that have changed the game the last couple of years.

Web

HTML5

HTML5 has taken most of the market Flash was covering the last 10 years. In short terms HTML5 is just a small part of what is new. We have also seen a whole new world evolve around JavaScript. The stylesheet language CSS has come out with a new third version, with a lot of new cool stuff like 3D transitions and tweening animation. And WebGL which is a 3D engine that grants you access to most of the features we see in common 3D games is also relatively new.

WebGL (hardware accelerated graphics, branch of html5) is a most wanted technology, for many interactive and game-developers incl. myself.

A lot of very exciting new tools are coming its way, and the adoption rate of the technology is going forward at a steady pace. But as long as mobile browsers, are not catching up on this, it will only be as good as flash.

“The users still do not care, if the pixels they see on the screen is provided by a plugin or not.” – related blog post: https://thonbo.wordpress.com/2013/05/17/so-what-if-html5-and-webgl-games-makes-it-to-the-mobile-browser-2/

Rich animated HTML websites today will often be called HTML5 websites, but is mostly done with JavaScript or CSS3. HTML5 is mainly used for video where Flash is not used, pixel animations, sounds and custom fonts.

HTML5 can also be used for building lightweight 2D games. (for bigger games you would use WebGL for both 2D and 3D, and object-oriented style JavaScript like TypeScript or Asm.js which are JavaScript libraries that are optimized for fast render speed. Because standard JavaScript is a scripting language, it is not cut out for “+100.000 lines of code” projects)

So this all sounds like its the best thing ever. But there is a catch. Compared to technologies like Flash that has one single rendering engine across all browsers, HTML has 3-4 different rendering engines across different browsers. In other words, the output you get from HTML in one browser is not always the same in other browsers or in some cases not even supported. Two currently crucial cases are Microsoft’s widely used Internet Explorer, which has a very limited feature set, especially in some of the older and still very common versions. And then there is WebGL that is very promising in its effect, but it is only supported by 50% of desktop browsers and no mobile or tablet browsers (these numbers are changing in time. But the prospects are that it will not reach mobile browsers running on iOS).

But all this is new and as “cross-browser issues” come, we expect them to be narrowing over the next couple of years.

Let us come back to the best use cases of HTML5 and games later.

Flash

So Steve Jobs decided to not make the iPhone browser support Flash, because it was going to drain the battery faster, which is true. Flash generally updates 30 times per second, because of animations running. There has been a lot of speculation that Apple decided this because all the Flash games you could access for free in the browser, was working against their plan with the App Store and selling games from there.

To clarify this looking back. Some of the speculation might be true from a business perspective.

But when we saw that Android phones allowed Flash to run in the browser, we quickly realized that a mobile browser, was no place for a technology like flash. The performance on mobiles, was not fast enough back then, resulting in slow choppy animations. This however could be re-evaluated in half a year from now, when most phones have 2 or 4 processor cores and are equally powerful to stationary computers that we know of today. But the fact that remains is, the running processes in Flash will still take more battery power than standard HTML. But the above regular Flash content, like games and web applications was always meant for a medium like apps.

So where is Flash today now that Flash can’t be used on iPad and iPhone and project “Flash on Android” has been put on ice. Adobe has shifted the roadmap for Flash, so that it will be a game engine. A lot of new features has been put into the Flash player so it is possible to use computer game quality 3D graphics, super fast rendering 2D graphics, and a lot of other game mechanics can be achieved. Besides that it is now possible to export projects build in Flash as iOS and Android apps.

So to sum up you can now build great 2D and 3D games in Flash for ALL desktop browsers 98% (Chrome and Internet Explorer 11 has built in flash), and convert that to an iOS, Android, Blackberry, Windows, Linux and Mac Application with native performance.

Apps

iOS Apps

Because Apple’s iPhone was the first device with an App Store, most app developers moved to Apple’s Xcode (Objective-C) to get a piece of the cake. Apple’s App Store has always had a thorough quality control which some might call gatekeeping. This was intentional to prevent bad content and duplicates in the App Store, which to some extent has proven to be a good thing, if you compare it to the Android Market now called “Google Play”, which has no quality control and allow all apps to enter, regardless of malware or replicates. In the earlier days Android Market only had free apps which was a part of Google’s “free” business plan. The result of this was that Android Market was flooded with apps that was build on small budgets. Another theoretical issue is that, because most app developers moved to Apple’s platform before Android, Android Apps has suffered from being the platform-clones which was developed externally by cheaper sources.

Android Apps

Also to note is that in the early Android days, people had gotten so used to free apps and free services from Google, that the Android segment quickly built up a free apps expectation, where the Android users refused to pay because the apps were second rank on low budgets, or users were simply getting used to get everything for free. In contrast to this, we see a steady money flow from users to developers on Apple’s iOS App Store. This results in bigger development budgets and much better quality Apps, and more users willing to pay for better quality, altogether resulting in revenue much higher than on Android. But Android unfortunately shot themselves in the foot, by having an open source platform. Because as we now have 10 different iOS devices to test our apps on, we also have around 12000 devices for Android with different hardware (related article: http://www.businessinsider.com/extreme-android-device-fragmentation-2013-7) – and being able to built an App on a low budget and make sure all devices can handle the App is a challenge on Android. But lets not forget there is a significant amount of Android users out there. Some even with a different mindset, willing to pay for quality apps.

Development

“Native”

In the earlier days, most apps were build in native code. Objective-C for iOS and Java for Android, and developers from other programming backgrounds had to learn a new programming language from scratch, which in its sense was great, but not everyone felt the strong urge to start over. Besides that, if you wanted your app on other platforms you had to develop the App from scratch in another programming language which resulted in a lot of work sent to cheaper developers to clone the app, with varied quality assurance.

“Cross-compilation”

Back in the early iOS days, Apple had put restrictions on their App development program in such ways that you couldn’t really use other programs than Xcode to develop apps for iOS. This was a crucial issue for companies like Adobe, and other cross compiling frameworks that had already build great tools for this, and some of these tools were put on ice – but Unity3D’s game engine was able to compile iOS apps – as a head start. with no restrictions.

“Well, Apple never enforced the ToS 3.3.1, and then canceled that paragraph a few months later. That’s the short version anyway :)”

– David Helgason

Suddenly out of the blue, Apple decided to remove this restriction, and from there on the race was on.

So getting your content out on an App has never been easier than it is today, Everybody with a digital background now has the tools to build great apps with the skill they already know of.

If you are from an HTML background you can use tools like Phonegap to produce apps for all platforms.

If you are from a Flash / ActionScript background you can now use the Flash IDE and Flash Builder to export to all platforms – or use HaXe which is a programming language close to ActionScript3 with somewhat the same export capabilities.

If you use JavaScript, you can use this in combination with 3D to build games in Unity3D – and export to even more platforms like Xbox, Wii and Playstation.

And there are a lot of other tools and frameworks to get your content out to multiple platforms at once that I won’t touch in this post.

What to choose…

So now that everybody is in on the details let us try to clear out what is best used where and why.

A lot of companies think it is simple – they just need a desktop and a mobile website – but where would banking be if they never figured out that an app would serve their kind of content better. We have grown so used to apps in desktop browsers before the App stores that the distinction between app and website has become blurred to most people, we saw 3D interior decorators, augmented reality, home banking, drawing boards, multiplayer games, video chats and more popping up everywhere. It took a little while before people realized that the mobile browser was limited to a very simple feature set. The result of this was that all media has moved out of the mobile browser onto apps, leaving only simple informative data in the mobile and tablet browser. You could not see a simple video in a blog.

This is an interesting read, on how apps represent about 80% of internet data used on mobile and tablets:

http://www.businessinsider.in/It-Turns-Out-People-Dont-Really-Surf-The-Web-On-Their-Smartphones/articleshow/31556511.cms

The first thing you need to do is to figure out who your audience is and how they would access your content best.

Do you know for sure that your target audience is watching your website from mobile and is this an important part of your strategy? Is your audience willing to download an app to view your content, and even further would they want to pay money for it? Does it make sense at all, to charge money for your app?

It is also important to figure out how old your target audience are, and what kind of device and platform they would use for your kind of content.

In some cases it would even make sense to do what Apple succeeded so well with. Instead of trying to give them what they want, figure out what is best for your audience. In many cases you are the expert.

Web

When you are building a website today it is clear to anyone that it has to be HTML to reach the broadest audience, but there are some things to keep in mind if you wish to go deep in terms of user experience and engagement, or simply make a super fancy animating website. Because there is still a lot of features that might be missing in older but still commonly used browsers like Internet Explorer you need to make some choices. First of all you need to consider, if skipping out on these “platforms” would satisfy your needs.

And you need to retain the animations to a minimum when targeting the mobile platform because, as with Flash, the smaller processors in phones and tablets cannot handle rich interactivity to an extent we know from common Flash sites – so if you want to build a rich interactive site, the mobile platform will in any case bottleneck the features and performance you can put into the website. Unless its ok that the site transitions will stutter.

In some cases where the feature bottleneck on mobile is so distinct, you might even have to design a parallel mobile and tablet version of the site.

Another very common technique to reach the broadest user base is to use responsive adapting HTML styling – a technique which is mostly common for normal HTML setups and can be hard if you are not using a grid design.

Before the Flash web plugin was considered obsolete, websites in general was not necessarily flat or structured in a grid – unique floating web design was more common especially in branding and marketing websites where you had to leave some sort of memory footprint. It is up to discussion, if these website had poorly recognisable, usability patterns – Truth is, we hardly see these kinds of deep user-experience driven websites anymore, because it is best practise to keep your website simple and mobile friendly, as follows an era of responsive websites with flat, quick accessible data, in a perfect recognizable designed overview.

It has never been more important to keep page load times at an absolute minimum. Some years ago, it was acceptable to wait some seconds before a page would load, now we are down to about half a second. The mobile era and to some extend, faster internet has changed our expectations for content in the browser – all rich media have been moved onto apps and what we seek in the browser needs to be fast accessible data.

In the tech business we hear things like “mobile first”, “responsive web design” and “page load times” – all these concepts have been known to succeed in what they were meant for. But does this mean, the need for deep compelling user experiences are gone? Not at all. A classic example: everyone is playing games like never before. This industry has boomed like no other. We simply don’t see this kind of content in the browser anymore – and this is only for the better, because the browser was never really meant for playing games, even though Flash succeeded in breaking this rule. When the app stores came out with a model, well suited for games the users started playing games like no one would have imagined – not even the creators of Angry Birds.

After what we in the industry call “the device explosion”, every one has been forced to offer their content in a model that fits the right platform for your users – in short terms : Every content platform has a different way of serving content. There is NO one golden way anymore – we need to see the device app stores as part of the internet now. The lines between an application and a website was blurry before the HTML5 boom, we could do everything in a desktop browser from image editing to 3D kitchen planning.

Content has gotten polarized – but only for the better

We need to stop seeing everything as a website – “online digital content” in any way needs to be thoughtfully separated into:

information
shopping(eCommerce)
economics (stocks and banking)
social media
video
music
games
tools

All of these media was known to be found in the browsers some years ago. The only thing that remains in its classic position is standard informative websites. The rest have gone from mainly being accessible in a desktop browser to the following:

shopping (eCommerse) – now split between web and apps
economics (stock and banking): mainly used in apps today (the move from browser to app has increased the general use)
social media: mainly used in apps today (the move from browser to app has increased the general use)
games: mainly used in apps today (the move from browser to app has increased the general use)
tools: mainly used in apps today (the move from browser to app has increased the general use)
music and video – Is everywhere today – offline digital content such as dvd/blue-ray has come online through streaming services. We see a main focus in apps in this sector as well – and a much wider demand for this media on a broader spectrum of devices than any of the rest – home tv systems, xbox/playstation, even some speakers-systems has built-in spotify. The broad spectrum is mainly because it is “lean back” content – which means you can sit back and relax while enjoying this type of content

As we see it – The content polarization have been a major success. and will continue to be if we look at the numbers from business insider 2014: here

But a lot of content is still being put into the browser. Ever since HTML5 took the leading role of rich interactive websites, the question has been raised. Is the technology ready for the general client and users demands? I would rather put it this way: Has the demand and focus simply shifted to something new, and will we ever see the demand for rich content in mobile browser. Or is the success in Apps here for good.

And not to forget. If the user base is still using desktop browsers to a big extend, and your content is already planned to be launched as an app, you can consider deploying on both mediums with the same content. This can be done with cross compiling software like

Flash (built into chrome and Internet Explorer 10 – good with games and apps)
Unity3D (plugin – need to install – poor in everything else but games – can export to webgl(does not work in Internet Explorer))

So at the end of the day it is not only a matter of technology, but definitely a matter of choosing the right distribution channels – instead of thinking HTML5 will do the job for you all across platforms.

Here you can see a infographic site that keeps track on which features that is safe to use and which are not: http://html5please.com/

So yes, it would make sense to approach each platform with different technologies. Some might be able to cover more platforms than others in different cases, and this has to be carefully considered.

I encourage everyone to set a primary target of platforms to keep a minimum bottleneck in terms of features and performance or even the choice of technology in general.

An important note to remember is that when you build a HTML5 website you need to know what you can do within the limitations of the different browsers and platforms you want to cover – before you start designing the animations and transitions – in other words design your website so it meets the limitations of the your targeted platforms.

Because of these limitations a lot of campaign sites are still being done in flash, because many still believe it is the best tool for such needs – it is said by many leading agencies* that, building a flash website is still cheaper, faster and the end result still shows better performance and have consistently more features across all desktop browsers, such as transparent video, handcrafted vector animations, and webcam support – it is also an important detail for many decision makers that flash covers 99% of all desktop browsers and HTML5 covers around 58-75% depending on many factors.

So in the case of deep compelling rich user experiences – flash delivers what is expected with fever problems in the development process. some of the reasons is also said to be the lack of proper tooling for animating rich interactive sites in HTML5 – but we are seeing more of this popping up lately – most flash tools are being opened up to HTML5 export – this is all good but we still need to carefully sort out animations on mobile because of performance in the browser. This is not an issue in Apps.

Jared Kroff, Creative Director, RED Interactive Agency:

“It is all about providing the most engaging and effective user experiences possible.”

Joshua Hirsch, Partner & Minister of Technology, Big Spaceship:

“We think Flash is a great technology, and will continue to consider it as an option, and to use it when appropriate for the project at hand.”

Daniel Isaksson, Technical Director, North Kingdom:

“We now have more techniques to choose between but we also have a lot more platforms to reach. That’s really good and I wish people would stop claiming there is one solution that works for all.

The need for developing experiences with different techniques for different platforms will keep growing and I see Flash as one of the strongest for desktop experiences.”

But it is not all about tooling, performance and features. It is also shown to be the mindset of the developer.

Most flash developers have moved to HTML5 and JavaScript and this has also shown to be a turning factor because of the knowledge behind the process of building a rich interactive website in flash benefits the process of building a HTML5 website that does not behave like a regular HTML website – many of the award winning HTML5 websites today is build by migrated flash developers.

* http://thefwa.com/article/the-industry-thoughts-on-flash

Final words…

The restriction that flash has come across have made the web a more consistent static looking place – we see a lot of cool animations working their way into responsive and scrolling HTML5 websites. but the abilities to create something completely unique and full of life every time, is still missing, and will be as long as different competing browser giants runs the show.

Truth is that the latest HTML5 design/animation tools look promising, and Unity3D is the best game development engine out there – but it still doesn’t change the fact that browsers still don’t have a consistent use of new features – and as long as WebGL is not coming to the mobile/tablet browser, Flash will still excel in both web, games and rich user experience through Apps