Articles by Chris Heilmann

At Mozilla, we are dedicated to keep the web open and independent of a single company or technology. This means that users should have a choice of browsers and technology to use to go online and should not be blocked out because they can’t afford a certain device or are forbidden to change their browser.

In the world of mobile web development there is currently a massive debate going on about the need for support of various browsers seeing that the most successful phone systems both use the same browser engine. This is good, and we need this debate. It is not good though when developers block out users because they concentrate on targetting a browser. Sometimes this is not by choice of the developer – they are simply using tools that do that blocking for them and the usefulness of the tool outweighs the qualms developers have about that.

We are now planning to talk to library and tool developers and help them support more than one browser engine to prevent this. As a start of that process we wanted to get a glimpse of what people are using right now so we make sure we have the most impact when we help. This is why we started a quick online survey asking developers about their tools for mobile development.

We are happy to report that to date we have 480 answers and it is time to take a first stab at looking at the data.

We are very aware that this is *not* a scientifically clean research and should be taken with a grain of salt (we haven’t asked how many times people used the tools or how much of their work is building mobile apps) but it gives us a good first glimpse at what makes most sense for us to do.

So without further ado, here are the raw numbers as charts:

Platforms

Not many surprises there, iOS and Android are in the lead, quite a lot of people see the web as a must-have (but this is a survey called out by Mozilla…) and Blackberry and Windows Mobile are not that hight on people’s radar.

What platforms are you targeting with your apps – iOS
	focus 208 43% must have 168 35% supported 43 9% sometimes 24 5% not at all 36 8% People may select more than one checkbox, so percentages may add up to more than 100%.

What platforms are you targeting with your apps – Android
	focus 147 31% must have 183 38% supported 85 18% sometimes 33 7% not at all 31 6% People may select more than one checkbox, so percentages may add up to more than 100%.

What platforms are you targeting with your apps – Blackberry
	focus 5 1% must have 11 2% supported 83 17% sometimes 136 28% not at all 244 51% People may select more than one checkbox, so percentages may add up to more than 100%.

What platforms are you targeting with your apps – Web
	focus 306 64% must have 121 25% supported 26 5% sometimes 18 4% not at all 8 2% People may select more than one checkbox, so percentages may add up to more than 100%.

What platforms are you targeting with your apps – Windows phone
	focus 8 2% must have 36 8% supported 112 23% sometimes 137 29% not at all 186 39% People may select more than one checkbox, so percentages may add up to more than 100%.

Libraries

jQuery rules supreme but Sencha touch and Zepto also have their place. Interestingly enough a lot of answers discarded libraries completely and considered them an overhead that will cause damage in the future.

What libraries do you use to build mobile web apps/sites?
	jQuery 349 73% jQuery mobile 248 52% Zepto.js 90 19% JO 5 1% XUI.js 18 4% Sproutcore 7 1% Sencha touch 72 15% JQTouch 50 10% Mootools mobile 11 2% M project 1 0% Nimblekit 2 0% Lime.js 9 2% Wink 1 0% Uxebu Bikeshed 1 0% Other 126 26% People may select more than one checkbox, so percentages may add up to more than 100%.

Conversion frameworks

You do love your PhoneGap / Cordova, it seems. There is not too much competition in this market and a lot of feedback was questioning the sense of converting apps as “building them natively makes more sense”.

Which frameworks do you use to convert apps to native apps?
	PhoneGap 257 90% Appcellerator 45 16% MoSync 2 1% Other 31 11% People may select more than one checkbox, so percentages may add up to more than 100%.

Visual editors

The space of visual editors seems to be not to frequented with this audience – would be interesting to see if there is already a mass market for WYSIWYG-like tools in the web app space.

Do you use any visual tools/converters to build apps? If so, which?
	Adobe Edge 14 35% Sencha Animator 9 23% Other 18 45% People may select more than one checkbox, so percentages may add up to more than 100%.

Webkit only?

71% of the audience saying they test on other browsers than webkit is making us happy of course, but seeing that a lot of the tools in use are webkit only makes that number questionable. Then again, we didn’t qualify what testing entices in this case.

Do you test on non-Webkit browsers?
	Yes 340 71% No 139 29% People may select more than one checkbox, so percentages may add up to more than 100%.

Reasons to test for webkit only

The main reason here is a lack of time to test on other platforms which is understandable – we can assume that a lot of projects from a planning perspective have 99% iOS/Android written all over them. The “lack of incentive” number is high, too, which is understandable – if you can’t show the numbers, you don’t get the time to support.

If no, can you tell us why?

Fixed environment defined by client needs 36 23% Lack of time to support more browser platforms 85 54% Lack of incentive – I don’t know what the benefit of supporting more is 65 42% Lack of documentation how to install and debug on non-webkit browsers 39 25% Bugginess of other browsers on test platforms 24 15% Lack of support for other browsers on target hardware 55 35% Other 16 10% People may select more than one checkbox, so percentages may add up to more than 100%.

More to come

These are just the numbers right now. Soon we’ll be publishing also the free-form comments we got but for now this should get some discussion going and gives us a great start.

And finally – a massive thank you for everybody who participated in this survey!

At Mozilla our main reason to be is to keep the web open and free for everybody. We are passionate about the web and love how easy it is to get started as a developer. A few years ago we fought against monoculture on the desktop and won. Now we have the new challenge to keep the mobile web open and allow anybody to use anything to consume content on their mobile devices.

When it comes to the mobile web there are a lot of open questions and there is a lot of misinformation floating around. We want to make sure that we are not working on false assumptions and paint a much darker or lighter picture than what is real which is why we’d love you to help us get started in our outreach to tool and library makers in supporting more than one browser engine and more platforms when it comes to tooling.

If you are a mobile web developer of apps or sites, we’d be very grateful for you to fill out our quick survey on library usage and cross-platform support on mobile to give us some more data to go on.

Thanks in advance! There is a lot from us to come on this topic, and you have the chance to be able to say “I helped”.

Cheers

Last week Webvisions, a 3 day conference covering everything UX and web lured a few hundred enthusiasts to the sunny Barcelona. Mozilla sent Crystal Beasley and Chris Heilmann to talk about logging into the web with Persona and the future of the web.

Crystal gave a workshop on login systems and how to improve them and a talk on 13 signs your UX needs an exorcism.

Having watched The Lorax on the flight over, and seeing that the audience consisted of a lot of parents we thought it a good idea to write the “Future of HTML5 and the web” talk in the style of Dr. Seuss so people can read to their kids and reflect on what we tried to convey at the same time. Many thanks also to Eric Shepherd for some rhyming help.

Here are just the rhymes with all the links (also available on GitHub):

1. There’s a big web out there, 
   it’s huge – I tell you, 
   it spans the whole world, 
   but it was boring and blue…
2. Then change came about, 
   in the shape of a fox, 
   it was cunning and open, 
   and it broke all the locks.
3. Others showed up,
   and joined the good fight, 
   a singer, an adventurer, 
   and a shiny new knight.
4. These all played together, 
   and spoke the same tongue, 
   which brought back old players,
   to join them in song. 
5. A standard was set, 
   and it changed a few things,
   a richer web for apps, 
   was the promise it brings.
6. Bah, standards! Who needs them?
   Some flashy ones said, 
   till a phone that was smart,
   kicked them out of its bed.
7. We moved past one standard, 
   as web work is richer,
   so “HTML5 and friends“,
   paints a much better <picture>.
8. Things that are fun, 
   should be shiny and cool,
   that’s why the new standards
   bring many a new tool.
9. Watching and hearing,
   are what people like to do.
   Using <audio> and <video> is simple,
   and you can do it, too.
10. Both of them are web-native,
    which is a reason to clap.
    They can interact with other content,
    and Mozilla Popcorn makes that a snap.
11. If beats and frequencies are
    what you need to play,
    check the Web Audio API -
    it gives you just that – even today.
12. To play nice with batteries,
    use requestAnimationFrame(),
    don’t let it stop you
    that it has such a long name.
13. 3D graphics are thrilling,
    as gamers will tell,
    we now have that on the web
    and it is called WebGL.
14. Water goes everywhere you pour it,
    just ask Chris about his Macbook Air :(
    MediaQueries allow you be as fluid
    and respond instead of despair.
15. Natural movements are smooth,
    just open your eyes.
    With CSS animation, transforms and transition,
    you can mimic this – nice!
16. “The web means you need to be online”,
    I hear smartypants gloat,
    well, we have offline storage,
    so there – take your coat.
17. Got a cam and some friends,
    and do you want to chat?
    WebRTC is what you need,
    even to show off your cat.
18. Rhymes sometimes don’t come easy,
    as you just became aware.
    So let’s just move ahead quickly,
    this was just too much to bear.
19. An artist needs a <canvas>,
    and HTML5 gave us that.
    Read, write and convert pixels,
    All in the client, it’s mad!
20. “We don’t have rich elements!”
    many people complain,
    Use Web Components with X-Tag
    and create them – easy to maintain.
21. Passwords are tough, 
    it is easy to see, 
    so allow login with emails,
    using BrowserID.
22. The web is a mess,
    with third party buttons abound.
    Web Intents make them pointless,
    let’s not have them around.
23. By design HTML5 is forgiving,
    its parser is great.
    It didn’t want to break the web,
    so let’s not break it in its stead.
24. Course you can write weird things,
    and they will work – there’s no doubt.
    But will they be readable by others?
    This is what it’s about.
25. You don’t create for yourself,
    or your friends who are the same.
    You develop for the next guy,
    so make sure you’re not to blame.
26. You don’t jump in a river,
    if you don’t know its depth.
    On the web using Modernizr,
    should be your first step.
27. Give new stuff to new players,
    and use it to enhance.
    Don’t support when it’s not needed
    IE6 walks – it can’t dance!
28. With a vendor prefix browsers tell you
    “this is not ready”.
    So by all means, give them a go,
    but don’t expect to go steady. 
29. And those prefixes vanish,
    you mustn’t forget!
    End with a prefixless version,
    It’s your very best bet.
30. So we ask you to help us,
    build a web that will last.
    Be future friendly and look forward,
    and stop building for the past.
31. The web is on phones,
    tablets, computers, TVs.
    We have to move it forward.
    or else our existence will cease.
32. Hardware that is locked up,
    is not what we are about,
    so check out Firefox OS,
    if you like the web – you will like it – no doubt.
33. Last but not least,
    if you find something’s wrong
    please file a bug and tell us,
    this is how things get done.
34. So there you have a lot to play with,
    check out and share.
    We really want you to do that,
    come on, show us you care.
35. Unless someone like you
    cares a whole awful lot,
    nothing is going to get better.
    It’s not.
36. So well done for reading and listening,
    and going great lengths,
    that’s all we got time for today,
    so good-bye and thanks!

Encountering a lot of hardware problems we couldn’t do a recording of the talk so I made a screencast of the presentation available on YouTube.

Alternatively, you can also have a video version with just the rhymes

Other formats for you to download and use:

• Only the rhymes in HTML on GitHub
• PDF version of the slides with notes (PDF, 15.2MB)
• Audio version of full talk (MP3, 6.5MB)
• Audio version of rhymes only (MP3, 2.3MB
• Video version of the full talk (MP4, 60MB)
• Video version of the rhymes (MP4, 30MB)

The audience reaction was very positive and we found out that when you rhyme your talk it flows much faster. The 45 minute slot was 20 minutes of our talk and another 25 minutes explaining in detail what we covered in a Q&A.

All in all Webvisions was a great event and watch out for videos of the other talks being available soon and other slides on the web.

A few weeks ago, Over the Air 2012, Englands biggest mobile (un)conference in Bletchley Park, England (home of the first ever computer built to crack the German Enigma encryption machines) attracted a few hundred developers to hear about the latest happenings in the mobile space and hack with them.

Mozilla’s contribution was not only the sponsorship of the much needed beanbags but also a keynote on the much discussed topic of web vs. native applications on mobile devices. Today the organisers released the videos of the talks and here is Chris Heilmann of Mozilla talking about If mobiles don’t come to the web then the web must come to mobiles.

The slides are on the web and the screencast is on vid.ly and on YouTube:

Furthermore, we chatted with Christian Payne about Boot to Gecko and there is an audio recording available on AudioBoo:

The Next Web also covered the event and had a few questions on HTML5 on mobiles.

In addition to this, Francisco Jordano of Telefonica gave a talk about the Open Web Device which is powered by Boot to Gecko:

There is much, much more to be seen about Over the Air, and you can browse all the videos, talks and coverage of the event on Lanyrd.

In a recently recorded video series for Microsoft’s Channel 9 Rey Bango and Chris Heilmann talked about a few web development topics on camera. The recordings are being edited now but you can get the presentations and the code examples right now.

Yesterday you could get the materials of the Building for real standards session. The second session is about “Modern Web Development”. In this we talk about developing for an unknown environment using Progressive Enhancement, what the differences are to Graceful Degradation and we show how Responsive Design can lead to a future friendly product. The slides areavailable on Slideshare and there is also a version with presenter notes.

As part of the Mozilla Evangelism Reps Program we also make the slides with presenter notes as PDF, Keynote and PPT available and additionally release the code examples with tips on how to present them.

You can get all of this on GitHub in case you want to give this presentation yourself.

The videos of these sessions should be out in a few weeks. We’ll keep you updated.

I just returned from a recording session with Microsoft for their Channel 9 feature. Rey Bango (ex-Mozilla and also ex-Ajaxian) had invited us to chat about a few web development topics on video. The recordings are being edited now but you can get the presentations and the code examples right now.

The first session we recorded was about “Building for real standards”. In this we talk about what a standard means, how this applies to HTML5 and discuss problems and pitfalls to avoid. The slides are available on Slideshare and there is also a version with presenter notes.

As part of the Mozilla Evangelism Reps Program we also make the slides with presenter notes as PDF, Keynote and PPT available and additionally release the code examples with tips on how to present them.

You can get all of this on GitHub in case you want to give this presentation yourself.

In the second (and last) part of the series we talked in detail about Progressive Enhancement, Graceful Degradation and Responsive design. The slides and code examples will be up here tomorrow.

Yesterday around 300 attendees came to the amazing L.S.O. at St Luke’s in London, England for Reasons to be Appy conference. In nine presentations several speakers covered all kind of concepts around app development, from typography to mobile debugging.

Mozilla’s presentation was Christian Heilmann talking about the controversy around the battle of native vs. web app development and explaining that we should not thrive to simulate but to invent instead. Not everything about native apps is as rosy as the headlines in the tech news outlets make us believe. There is quite a lack of basic HTML5 support in mobile browsers and for now hybrid apps and using libraries and polyfills seems to be the safest bet. The talk also covered a request to try out alternative mobile browsers like Firefox for Android, showed the boot to gecko project to free mobile hardware and make the mobile web affordable and asks developers to stop targeting specific browsers and block out others.

The slides are available and here is a screencast of them in sync with the talk.

We cleared the aftermath of yesterday’s epic Geek Quiz (photo proof here) but there is no rest for the wicked in the London Mozilla Space. Tomorrow (yes, that day after this one) we’ll run an MDN hack day here in 101 St. Martin’s Lane, London (5 minute footwalk from Leicester Square or 10 from Charing Cross).

If you have no idea what hack day in MDN means, check out Tristan Nitot’s introductory post.

There are still tickets available, so go to http://mdn-hackday-london.eventbrite.com/ and sign up if you haven’t yet.

There’ll be food (well, Pizza, we thought Fondue would be too much of a mess) and drink (the non-fermented and fermented kind, we don’t discriminate), lots of experts from Mozilla to pester about your wishes for our products and to learn all about what we are doing in London, a few Boot to Gecko phones to play with and quite a few talks to give you inspiration to hack:

Schedule (subject to change slightly but you get the idea of who is speaking):

8:30 Registration & Light Breakfast
9:00 Welcome Remarks Christian Heilmann
9:15 Christian Heilmann – The New Web Challenge
9:45 Rob Hawkes – B2G
10:15 Chloe Varelidi – Catch Them Young – Meet the Web Arcade
10:45 Brad Lassey – Fennec Goes Native
11:15 Break
11:30 Heather Arthur – Firefox DevTools
12:00 Jean Yves Perrier – BrowserID
12:30 Rob Hawkes – Games
1:00 Paul Lewis – WebGL Live Demos
1:30 Lunch (Lightening Talk/Discussion Group Sign Up)
2:30 Hacking
5:15 Presentations and Lightning Talks
5:30 Refreshments

The hashtag to use is #mdnhackday, the wireless is open, the Fox is out there, let’s do this!

Releasing an app is much more than just coding it. You are providing a service to people and they trust you with their data. With the amount of reports of apps “calling home” and storing and sending your data to third parties without your consent rising it is important to make it plain and obvious what you do. An easy to understand and plain Privacy Policy is not only a good service but it can make it easier for investors and users to choose your product over another.

Ramping up developers to submit and publish their apps to the Mozilla Marketplace we just released a few simple to understand Privacy policy guidelines complete with an HTML/CSS/RSS Privacy Policy Template on GitHub.

Whilst the guidelines are not a substitute for a real lawyer and don’t provide legal advice they have some very simple and powerful tips to get you going:

• Design your app or add-on so that what you actually do with user data is what users think you are doing with it.
• Try to give the user as much control over their data as you can, such as giving them the choice to opt-in to or opt-out of data collection whenever possible.
• Try to limit your data collection and use to only the data that you need.
• Design your app and service to protect the security of your user’s data in its collection, storage, and use.
• Respond to user questions and concerns about your privacy practices.
• Avoid ‘secret’ updates.
• Make your use of social features transparent, so that users are aware of when they’re sharing data socially.
• Give people a way to turn off automatic sharing or make more granular choices about sharing data.
• Obtain consent from users when necessary, especially for location and other sensitive information.
• Put a link to your privacy policy and, if you have them, your “terms of use” somewhere in your app.

Avoid confusion and problems in the future by getting the basics right – and that very much includes privacy concerns in your app.

Last Saturday in London, England the State of the browser conference brought together developer advocates from almost all browser vendors to give the audience an overview of what is going on in the world of browsers.

My involvement was to talk about the state of HTML5 when seen from a native market’s perspective, show some cool new technologies that need our input and take part in the browser panel to discuss current issues. Here are the talks and screencasts. Videos recorded by the organisers should follow soon.

Talk “Broken HTML5 promises – are we ‘appy?”

The main Mozilla presentation was about feedback on HTML5 we got at Mobile World Congress from mobile developers, how we as an HTML5 community fail to answer their questions and get tangled up in petty bickering over details instead and what Mozilla does to make HTML5 work across the board.

The slides with notes are available here and the screencast (with bad audio, sorry) is on vid.ly.

Breakout session: “The bleeding edge of HTML needs blood donors”

The breakout session (which was repeated twice) was much less of a “talk” but more of a show and tell in a smaller room. Therefore the screencast is a bit more raw but shows what you can do right now.

The slides with notes are available here and the screencast is on vid.ly.

The conference

All in all the conference was great value for money. All the speakers had great information to give and there was no “marketing talk” promising things that don’t work outside lab environments.

• Michael Mahemoff did a great job introducing the day with a “native vs. web knockout” talk.
• Paul Kinlan showed what is coming in Chrome and how Web Intents can change the way we solve app communication over the web
• Martin Beeby gave a glimpse of how the web can merge with newer devices and UX needs of users

Seb Lee-Delisle took all the browsers to the performance test to end all performance tests by animating millions of 3D particles and seeing which browser would be the one that can show the most without slowing down. In the end Firefox was the winner with 3695244 particles at 10FPS. Of course this is not a real measure (especially seeing IE10 was run in a VM) but it is always fun to see Seb code live.

I guess my favourite piece about the conference was that the browser panel was very much about answering people’s questions instead of trying to beat each other in being the browser that people should use. British understatement at its best.