A sane way to create native mobile apps

I love using native mobile apps. Don’t get me wrong, I also like using the browser on my iPhone, but nothing beats the care and polish of native mobile apps. Text in the right size. A beautiful, balanced header that lets me know where I am. Fast scrolling. Direct access from the home screen. No need to zoom in and out. Everything just works out of the box.

But native apps are too hard to create. Everyone and their cousin can create a web site which can be used from the browser on any device. But creating a mobile app requires serious coding chops, and if you want all your friends/family/customers to be able to use it, you need multilingual skills: Objective C, Java/J2ME, Java/Android, Java/Blackberry, maybe even C# and what not. Not something you can do over a weekend. Not good.

Some time ago I had an epiphany: a native mobile app is just a way of presenting information. And the web stack already incorporates CSS as a standard which allows configuring how information should be presented. Why not somehow evolve CSS into determining how web content should be presented as native-mobile-app content? And while we’re at it, why not do this platform-independently? Then we’d be able to write something as simple as this:

#title img { mobile-app-style: header on(red gradient); }

 

And automatically get something like this on an iPhone:

Or this on an Android phone:

Or even something like these, on a Blackberry and on a Java/J2ME feature phone:

It seems like magic, but it should be doable, and the result should be a system that lets you create a native mobile app in hours, not weeks, and compatible with all the mutually-incompatible platforms out there.

And thus, Mouin was born.

As any other technology that aspires to become magic, it’s more than sufficiently advanced, and it took us a long time to implement and get all the pieces working even for a 1.0 release. The native client portion of the system, to read the advanced CSS and display it according to each platform’s convention. On four major platforms. Functionality at a level that allows doing useful things: sections, lists, rich text and images, forms, etc… Writing a full spec [PDF]. A good tutorial. A simple way for you to test and preview how things will look when the app is built. The “build & submit” server, which can automatically build app binaries for four platforms and submit them to the different app stores. No picnic.

But now it’s ready, and we’re happy to share it with you. Here’s the result of 20 lines of CSS code with the Mouin system (click for a hi-res version):

You can learn more details starting with the tutorial. You can actually use the sample app above by downloading the Mouin preview app on any supported platform and logging in with username ‘guest’ and password ‘guest’. You can view the actual CSS – in some way, this is the app’s source code! And of course, this kind of set up allows the easiest integration into any existing CMS you are using.

Have a look at it. And let us know what you think. We’re all ears.

BTW, we’re based in Europe, but I will be around San Francisco and the Silicon Valley in early November. We are looking for passionate users, technology and product partners, early customers, constructive critics, and meeting all around interesting people. Let me know if you’re interested in this area and you’d like to get together for a beer, it’s on me. I’m reachable on Twitter as @jonbho, and Mouin news will be published under @themouin.

7 thoughts on “A sane way to create native mobile apps

  1. Cellurl, send me your email via the support form and we can arrange for the beers in SF!

    Ericson, thanks much, glad you like it. You’re invited to the beers too if you want :)

    - Jon

  2. Mgoetz, thanks. Be sure to get in touch with me (jon [dot] bh [at] the above domain) and I’ll be happy to help out along the way! The customer area is still rough around the edges, while we improve that, we’re happy to help as much as possible.

  3. I prefer to make my apps at snappii.They host apps and the changes you make become visible right away after update.It’s cool.BTW programming skills are not needed actually.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>