fish in a bottle  fish in a bottle

All-in-one apps

Home > Blog > All-in-one apps

In the past, entertainment content platforms have been fragmented. Branded games have been built and deployed across multiple websites and apps with no real interconnections or regard for the audience’s greater hunger for content.

The result of that has been a fractured experience for the user and a lost audience for the brand.

To change that situation there’s been a transition toward all-in-one apps (we also call these content container apps). These are single apps that provide a framework that houses related content.

How can an all-in-one app help you own your audience?

When using an all-in-one app your audiences can find games, videos and activities relating to specific entertainment brands without feeling compelled to hit Google and find more of what they want elsewhere.

Once your all-in-one-app is published, you only have to activate and market one app, and you can quickly move to own and build your audience, free from the ties of third party channels.

The theory is sound, but how do you deliver that all-in-one app reliably and efficiently? And how do you go about using your existing interactive content?

Our approach has been to use an HTML5 framework that allows us to cover all bases – designing and building games for delivery across all of websites, standalone apps and, most importantly, all-in-one apps.

 

Peppa Pig Fun with Peppa Nick Jr app

Fun with Peppa is one of the many HTML5 games we have created for all-in-one apps

How to create content for an all-in-one app

A popular approach uses Ludei’s CocoonJS technology. This allows HTML5 games to be deployed into an app with minimal code changes, and allows the advantages of using a hybrid app to shine through – that’s one app that will run in web browsers and as an app on iOS and Android devices.

CocoonJS provides a WebView for content – which is essentially a stripped-down mobile browser that runs the game and takes care of native features. So you can access device specific features like the gyro for tilt detection and notifications for player retention.

You can usually get better performance than a standard browser and the ability to update without a download – both huge benefits.  The key advantage here though, is that your app and any games you want to host in it, can be developed very efficiently.

Our studio has brought together our top tips for making the integration of HTML5 games into an all-in-one entertainment app hassle free.

1 – Provide easy communication between content and your container app        

Communication between your content and the app it sits within has to be planned and set up in advance – implement a simple API for that.

Basic functions of that API might be finding out if the content loaded correctly so that you can gracefully fail and provide a better experience for your players, or provide cloud based save states, so players can return to their content on other devices. You’ll want to consider pulling in thumbnail images for activities to be displayed in the container app. And then there’s analytics – providing one method of tracking through a standardised API is going to empower your performance analysis and avoid your data looking like a big plate of spaghetti.

Focus on the basics to begin with. Then, as your all-in-one app grows you’ll want to add new features.

 

Content_image01

Content_image03

Set up your API to communicate with the app, as well as leaving room for potential content updates

Retention features like high scores, rewards, related in-game or in-app content, and seasonal events (without an app update) should be in your plans. The API could also extend further to offer commercial benefits like monetisation features and rewards that span multiple games within the same app, further nailing that audience retention.

2 – Being responsive is a must

Content that sits within your all-in-one app is going to be used by a lot of people on a lot of different devices. For the best experience, you’ll want to make sure that any content you integrate uses all available screen space, so you need to insist on a responsive layout.

One approach is to use ‘bleed areas’ to accommodate screens between 4:3 and 16:9; as well as dynamically positioning some UI elements to keep them in the correct place. This ensures a nice fit regardless of whether your content is displayed in a browser or boxed in within an app.

 

Content_viewpoint_linear

Setting and taking advantage of bleed areas (as well as responsive sizing) improves user experience with minimal additional work

Whether you’re creating an all-in-one app, or content for one, we’d recommend making sure your UI is consistent throughout. That’s across the container app menus and down into every element of the content it contains. This makes for a much better user experience and keeps branding consistent throughout.

 

Mickey and the roadster racers fish in a bottle

People want their entertainment content to fit perfectly to their screen – create consistent UI and accommodate multiple devices

 3 – Prepare for the inevitable audio hassles

Don’t underestimate the challenges that come with audio in HTML5. There are other ways of nailing it, but our approach now is to use our own generalised solution. It can switch between platforms, technologies, and devices. Due to the various way CocoonJS and other frameworks handle audio, if you’re just starting out you may well find yourself regularly overhauling your audio tech. Be prepared for that.

4 – Memory and resources: expect the unexpected and you won’t come unstuck

It’s worth noting that, in the case of most container apps, while the game may boast better performance, there will be memory and other resource overheads imposed by the app itself. This effectively limits what’s available for the game – meaning you might not have as much memory available to you as you’d like.

Getting it right

Above all else, if you want your all-in-one app to be a success, you need to get the technical approach right to ensure that it’s easy to not only add content, but promote it too. It’s worth taking stock of your existing content – that’s more than likely scattered across a number of sites – to see what can have new life breathed into it.

Don’t forget that another key benefit of the HTML5 approach is that for people without the app, the content will still work when hosted on a website – the container app just shows it in a WebView. This sets you up with a stockpile of content that shouldn’t need much work before its integrated, and having all of that content in one place makes for a much smoother user experience.

A final note on your existing content – the era of Adobe Flash ended a while ago  but you can quite easily re-version Flash content for HTML5, opening up a great source of content for your all-in-one-app.

We’re working with the world’s leading entertainment brands, broadcasters and media organisations to design and deliver the next generation of digital entertainment apps.

Get in touch if you would like to know more.