HTML5 Games—a Chat with’s Content Chief

Scott DeVaney


HTML5 gaming is still in its early stages, though rapidly maturing to make good on its promise of becoming the cross-platform technology that everyone—developers and gamers alike—yearn for. We spoke with Roy Tzayag, head of content and strategy for, about the state of HTML5 gaming and where it’s headed. is also the publisher of Yepi Games, a casual games multi-pack now available on Firefox Marketplace.

How close are HTML5 games from truly being able to run proficiently across all browsers—desktop, mobile, and tablet?
Roy Tzayag: It’s definitely getting there! Smartphone browsers are becoming more powerful as we speak, and alongside various updates, compatibility and performance issues are being solved and dealt with on a daily basis. I can already detect fewer performance and compatibility issues are appearing on the newer games we build, and as time progresses these issues will decrease even more.

If you’re a beginning developer in HTML5 games, please consider using one of the many free, open source frameworks available, such as Phaser, LimeJS, and Crafty for instance. They make the process of creating a cross-platform/cross-browser game easier, and allow you to focus on your game logic, without having to worry about the little (and big) things necessary to make your game run smoothly.

yepi_yepiWhat’s the biggest hurdle HTML5 games must overcome to take that next big step in widespread adoption for both users and developers?
RT: Before answering this question, I must indicate I’m a true believer in the potential of HTML5 games. I’ve seen the way these games have progressed during the last few years, and I think the next step is very close.

Let’s not forget that Flash games nine or 10 years ago featured very low quality, and it took them some time to become the games they are today. In my opinion the biggest hurdle is overcoming the huge, unrealistic expectations gamers and developers have for HTML5 games. The “one game fits all” solution takes time to achieve, and while we’re not quite there, HTML5 games are definitely on their way to achieve that Holy Grail.

How do you see HTML5 games taking root in developing regions, like India, where internet access can be spotty?
RT: Thanks to many companies—Mozilla for instance, Google, and several others—internet and smartphone opportunities are expanding into places where they weren’t previously available. Many companies recognized the huge opportunity in developing regions, and started shifting resources in order to supply and conduct business in these high potential markets. Mozilla, along with its low smartphone prices helps many people acquire smartphones, hence opening new markets for apps, especially HTML5 apps. Since there is a lot of business potential hooking up these countries, I believe that in the years to come, most of the world will have a steady internet, which opens a hatch for various markets where you as a developer can distribute and monetize your games.

yepi_html5Let’s say I’ve just created a great HTML5 game. How do you suggest I make money off it? In-game advertising? Download purchase?
RT: Unlike the more polished native games, HTML5 titles are currently not that rich in content. While there are several games that offer enough depth and complexity to leverage download or in-app purchases, for beginners I would recommend sticking with free games that feature ads.

Ads-wise, similar to the web world, Google will supply most of your needs with their solid ad solutions, as they monetize in pretty much all countries and are quite flexible in sizes and types.

Another way to monetize games is by offering them to various publishers (like for instance). Publishers may offer various deals to HTML5 developers, either on a revenue share basis, or a one-time payment mode.

Build a Website to Market Your App

Sakina Groth


Uphill battleApp developers know that becoming a breakthrough success is an uphill battle, particularly for new developers. Apple and Google’s app stores receive over 10,000 new app submissions a month, making discovery so challenging, Businessweek recently reported on a new marketplace specifically dedicated to failed apps. The good news is, developers can take proactive steps to bolster their chances of success far ahead of becoming a failure – even before an app is actually developed.

Studies have found that most developers, particularly new ones, do not plan for marketing. This is unfortunate, because research has found a clear correlation between app marketing and traits of successful developers. So get ahead of the game and start building a marketing plan now. A great place to start? Just a simple website. If you’re an HTML5 app developer, your app making skills may also be your best app marketing skills.

But What About “Think Mobile First”?

Yes, websites are primarily for desktop users. But you’re already adopting the “mobile first” strategy by creating an app in the first place – a website is just a way to draw more attention to it. You need a place to give all-important bloggers, journalists, and other online influencers a place to find you. An app can’t go viral by itself, but a web URL can – it is sharable through blogs, social media, and anywhere else on the web. This also gives users another way to find and communicate with you. Finally, as you add more channels to your marketing mix – a website allows you to have a simple, one-click call to action. This is a much likelier conversion than say, tweeting about your app, hope people immediately pick up their phone, enter the app marketplace, find for your app and (finally!) download it. Ultimately, the user will have to take these steps to download the app either way, but which would you consider more compelling: a tweet with a 140 character limit, or an entire website that intrigues and excites the user about specific benefits of an app?

Building Your Site: Tips & Tricks

Ready to build that website? Follow these key best practices to make market your app effectively:

Keep it Simple

The goal of your website is to convince people to download your app (or follow through on another specified call to action) in as little time as possible. People have short attention spans. You have to capture their interest quickly. The page should never be text-heavy – whenever possible, limit text to bullet points and replace words with graphics. Most importantly: let visitors know where your app is available! Most app stores have badges available for this. You can also create a general icon for an unpackaged, browser-based app, such as this one from

Some of the most effective elements for your website include: Badges

  • Brief bullets explaining what your app does and the benefits of using it
  • Screenshots of your app – show, don’t tell!
  • Badges indicating where your app is available. Firefox Marketplace badges are available here.
  • Awards, accolades or any other form of social proof. This may include features or reviews on other sites or media, testimonials, or ratings and reviews. Be creative!
  • Promotional video – a great way to demo your app.
  • Contact info – make sure users (and press!) can get in touch with you.
Make it Slick
Line is doing a great job marketing their app with a website

Line is doing a great job marketing their app with a website

Simple doesn’t mean boring. To captivate your visitor, your site needs to should be visually appealing and create a sense of excitement. Keep it clean and easy to scan, but use bold colors, images, and fonts. Ensure a modern look and feel –no one wants to use technology that feels outdated.  For a great example, check out Line’s website – great design, captivating imagery, easy on the text, clear messaging.


Of course, there’s no point to having a website if no one visits it. This is where search engine optimization comes in. If you’re new to this, do a little research before you start building your site. Google has a great starter guide for this. . Try to use keywords that will draw the most targeted audience for your app. And make sure your site is optimized for mobile browsers!

Have a Call to Action

CTA’s measure the success of your website marketing. Incorporate at least one but no more than three. A link to download your app (if it’s ready) is the most obvious CTA. If you have them,  include links to your blog, social sites, and/or newsletter. Integrating comments will help make your site interactive, and can help you get valuable feedback. If your app isn’t ready yet, use this valuable time to gauge interest and capture feedback about the app you intend to build. Invite users to subscribe to status updates on its development. When it’s ready, you’ll have a targeted distribution list for an announcement. Nurture long-term relationships by communicating as you add new features to your app, or start building a new one.

Jongla Offers Free Soccer Stickers & More

Scott DeVaney


jongla_1Now that we’re headed to the 2nd stage of World Cup competition, this is a good time to mention that one of the most popular messaging apps on Firefox Marketplace—Jongla—now offers free soccer-themed stickers.

Look at these cute little dudes!

More than just stickers, though, Jongla’s latest app update includes a bunch of feature enhancements and privacy protections.

jongla_2“The idea of the Jongla Firefox OS App is to make messaging fast, fun, and free without forgetting the safety and privacy issues,” says Jongla CEO Riku Salminen. “Jongla is designed for private messaging and we offer a more privacy conscious and secure experience for our users. Thanks to unique Jongla Usernames, users phone numbers are never revealed to other users. We are using TLS encryption to provide communication security during the registrations and messaging – ensuring what is private, stays private.”

June 26 Marketplace Day: All About Apps!

Amy Tsay


Join us next Thursday, June 26, for a Marketplace Day that is all about apps. Marketplace Day is a regular online event that brings staff, volunteers, and potential volunteers together to connect, complete tasks, and have fun.

There are contribution opportunities for everyone, no matter how technical you are or how much time you can commit. You can hack on apps, write some documentation, or try out apps and rate them. Or, just come and see what we’re up to.

Join us here on June 26, and on in the #Marketplace channel. Apps Offer Complete World Cup Coverage

Scott DeVaney


GoalThe World Cup is in full force. We have a lot of apps to help you make the most of your World Cup 2014 experience. But if you’re only concerned with breaking news, live scores, and expert insights, we’re happy to announce that recently published a Firefox OS version of their and Goal Live Scores apps.

Derrick Smith, a rep from Goal’s product team, answered a few of our questions about their content and why they chose to make it available for Firefox OS…

What makes Goal’s coverage of football so distinct from other sports media?
Derrick Smith: At our aim is to bring the fans the facts and the stories that matter. We employ local journalists who are on the ground, breaking stories—over 500 journalists across the world creating exclusive and original content. We are the world’s number one dedicated football website, is available in 35 local editions and 11 languages. Over 52 million users rely on us for the latest news and insightful opinions on their favourite teams and players.

For the World Cup specifically, what special types of coverage or editorial features are you running?
DS: We’re delivering round-the-clock, in-depth coverage of the entire tournament. We’re deploying country-specific editorial teams consisting of editors, journalists, camera crews and photographers to follow all the competing nations in all of the venues. Our team will be right there with your team, reporting the news that matters.

Goal Live Scores

Goal Live Scores

From a media perspective, how do you think Brazil hosting the World Cup will be unique relative to other parts of the globe?
DS: Brazilian’s love football. Their passion for the game and the country’s rich culture will combine to create an exciting atmosphere. Brazil has a diversity that is unique amongst host nations and the country has worked hard to deliver what promises to be the biggest show on Earth.

Anything else you’d like to add about Goal or, specifically, your Firefox OS app?
DS: We are thrilled to be developing an app for Firefox OS. The devices are equipped with some great features and offer users fantastic value. As our mobile audience grows it’s a great opportunity for us to be able to offer them a great app on a great OS.

World Cup Apps —Editors’ Picks

Scott DeVaney


You’ve waited four years for this. Now it’s time to live/breathe/eat/sleep/sweat/scream football. Whether you plan to enjoy the games from home, or pack up your nation’s flag and travel to Brazil, Firefox Marketplace has a bunch of apps to help you make the most of your World Cup 2014 experience.

Editor’s note: If English ain’t your thing, this post has been lovingly localized in Spanish, Portuguese, German, Italian, Dutch, Polish, French, Serbian, Greek, and Hungarian.

Streaming News, Scores & Highlights
Never miss a moment with apps specially designed to deliver breaking news, live scores, and alerts.

Available in more than a dozen languages, is one of the most comprehensive football news apps available. Real-time scores, video highlights, and great social sharing capabilities top our list of favorite features.

Capp 2014 (available in English, Spanish, and Portuguese) presents scores and news within a nifty, streamlined package. It also integrates travel info via Tripadvisor.

Football Fever delivers official tweets from FIFA—perfect for fans who don’t want to bother with a full Twitter setup just to follow FIFA info.

EU Match Center focuses exclusively on European clubs.

Football Games
What better way to get into the mood of the games than with a few games.

Real Soccer
Real Soccer is a full-field football experience. Choose your team based on different skill strengths and compete against the computer. Pass, shoot, control your goalkeeper—it’s all within your control.

Airfootball is the football version of air hockey. Simple and surprisingly challenging.

Soccer Fling combines football with addictive puzzle challenges.

Header Champ is a cartoonish romp that tests your header skills.

Speaking of headers, in Real Headshot you recreate Zinedine Zidane’s infamous head butt maneuver! See how many opponents you can thwart with “Zizou’s” forehead before time runs out. I think this game is actually a bit too difficult for its own good (I could never successfully land more than two head butts), but it’s just too hilarious not to include in this list.

For those fortunate enough to travel to Brazil, you can plan your complete trip—everything form airline to hotel and car reservations—with Kayak and

Kekanto helps you discover local hot spots, restaurants, clubs, and more. And you can get anywhere quickly and easily by hailing a cab with Easy Taxi.

Need some help with your Portuguese? Translator works in 50 languages.

Enjoy the World Cup, everyone—may your team emerge victorious!

Interested in learning more about Firefox OS devices and where you can find them? Here you go!

Join Us for Marketplace Day on May 8

Amy Tsay


Whether you’re already a contributor to Marketplace or want to become one, please join us at the first Marketplace Day on Thursday, May 8! Marketplace Day is a regular online event that brings staff, volunteers, and potential volunteers together to complete tasks, mentor newcomers, and have fun.

There is something for everyone, no matter how technical you are or how much time you can commit. There will be contribution opportunities in design, development, QA, editorial, and more. We hope to see you there!

Join us here on May 8, and on in the #Marketplace channel.

LINE Adds New Stickers & More

Scott DeVaney


sticker_01LINE continues to add features and improve functionality for the Firefox OS version of its globally popular messaging app.

Performance-wise, LINE has been enhanced for speed and usage efficiency. This means all those insanely adorable stickers you can share with friends will arrive faster than ever before!

Speaking of stickers… LINE has added a bunch of new characters and designs to its catalog of free goodies. Better still, you can now easily gift stickers to your contacts. Who doesn’t enjoy receiving stickers of dancing bears in love?


Why Localization Is Important: The Word from Mañana



One of the handiest apps on Firefox Marketplace is even more useful because it’s available in multiple languages.

Mañana, which lets you save for tomorrow interesting articles you find but don’t have time to read today, is the first Firefox OS app from developer Alberto Granzotto and graphic designer Valentina Montagna. In fact, it’s their first app, period.

Mañana is available in English, German, Spanish, Portuguese, Italian, and Polish—with Russian and Greek on the way soon.

So why would first-time developers take the extra time and effort to localize an app?

“Considering that the emerging markets have been crucial for Firefox OS since the beginning, localizing the app in several languages has come naturally,” said Chiara Zecchetto, business development manager. “Don’t forget that one of the goals of Firefox OS, which we proudly support, is to guarantee internet access to as many people as possible.”

Mozilla allows developers to choose where their apps are available—something that can’t be said of all apps stores. (Read our post, “Geo-Targeting: Keeping Developers in the Driver’s Seat,” for more information.)

That choice is significant to the Mañana team.

“Openness, through localization, is important to let more people access the internet—so they can gain and share knowledge, culture, and life experience,” Chiara noted. “We also think that localizing a product, in this case one app or an entire marketplace, is really crucial in helping people familiarize themselves with new technology.”

Developing the app took about three weeks (not full time), from concept to delivery of the first version.

“We started it as a ‘hobby project’ to test the new Firefox OS and optimize languages we already know (HTML5, CSS, and JavaScript) for this new adventure,” Alberto explained.

In deciding which languages to focus on first, the team had specific goals in mind.

“We focused on the Firefox OS launches in Spain/LATAM, Italy, and Germany in late 2013,” Alberto said. “Then, we added languages following two criteria: potential Firefox OS markets, and languages that were quick to translate because of the international community that surrounds us.”

A note about translation work: Based in Berlin, the Mañana team found it easy to connect with enthusiastic Mozillians who supported them. But if you don’t have friends to help translate, you can still localize you apps, with Transifex. (Check out “App Localization with Transifex” on the Mozilla Developer Network. Mozilla’s Technical Evangelism team is piloting a program that uses Transifex for managing translation work, both for app developers and localizers.)

Useful resources for developers: While they created Mañana, the team put together this list of links and resources about creating apps for Firefox OS.

Integrating App Payments

Scott DeVaney


money_imageToday we’re featuring a guest post from Andy McKay, Engineering Manager for Firefox Marketplace. He’s got some exciting news to share about setting up payments for your apps…

The Firefox Marketplace now accepts payments for apps and in-app payments. This allows developers to earn some money from their work.

Currently we’ve got just one payment provider who is integrated into Firefox Marketplace, the great team at Bango have been integrating credit card and carrier billing. But we don’t want to stop there, we’d like to have lots of options for different payment providers that meet the different consumers and developers needs.

Implementing payments for the Firefox Marketplace is a little different from any other site because, unlike most implementations, Mozilla does not look after holding money and paying developers, the payment providers do. This creates issues for payment providers who don’t normally operate this way.

To explain how we do things at Mozilla, we wanted to write a specification of how to integrate with the backend. But writing specifications is no fun, writing code is more fun. So we wrote a sample backend for payment providers, it’s called Zippy.

As it turns out writing Zippy gives us a bunch of other advantages:

* Tests can now be run on the entire payment flow from start to end without having to spend real money. This testing sandbox is something many payment providers do not provide.
* We have real HTML, JS and CSS for the payment pages so payment providers don’t need to implement it, just integrate our code.
* We can use the Mozilla localisation teams to provide localisations.
* Payment providers now have a working implementation they can poke and prod and examine.

Here’s an example of a payment using the Zippy backend, in French:

So if you are payment provider and wanted to integrate payments with the Marketplace, all you have to do is implement the Zippy API on your end in what ever language or platform you like. It’s not intended you’d ever use Zippy as is, rather implement the same REST APIs. We’ll need to enable you as a payment provider in the Marketplace, so you’ll want to speak to us before you start doing work on it.

The code is available under the MPL, is written in Node.js and is the hard work of David Larlet, Stuart Colville and Kumar McMillan. It is in the early days right now, at version 0.1 and I am sure there are lots of new features to come.