How it works

Introduction

Native mobile apps provide a much better user experience than mobilized web sites. The drawback is that they are complex and costly to create, and that it has to be created separately for each important mobile platform (iPhone, Android, Blackberry....), since they are completely incompatible, so the effort is multiplied.

The Mouin system provides a solution to this problem. We tried several approaches, thought heavily about it, and came up with a system that provides a great compromise between all the related factors, and a great solution for many potential customers.

The core idea was to extend the CSS standard with new styles (vendor-specific CSS extensions, to be precise), which allow you to describe how your web content can be converted into native mobile controls. Reading these styles, the Mouin runtime on the mobile device will be able to read your web site and present a fully native user interface to the user.

For example, you can add the following CSS to your site:

  .logo { -mouin-style: header "App Title" white on(gradient red); } 

This will make Mouin create a native mobile header, showing the logo and "Sample Title" text in black, over a red gradient. The style is adapted to each platform's conventions, and using a reasonable size for each element.

iPhone

Android

BlackBerry

Java

You can create list items, mobile forms, sections, and all other common mobile UI elements, just using simple CSS instructions as seen above. All the technical details are on the Mouin Spec document.

You can download and use the free Mouin preview app to test how your web site looks when converted into a native app with the Mouin CSS styles, and once you are satisfied with the user experience, you can just upload the app name and icon and pay the one-time fee, and the Mouin system will automatically build and submit the customized app for the four supported platforms: iPhone, Android, Blackberry and Java.

The great advantage is that you only need to add some extra CSS to your web site, which can be integrated in your existing web content creation pipeline or CMS, and you will get native mobile apps for all major mobile platforms. No other available solution is so simple and flexible.


Example App

Since an example is often the best way to understand things, we are going to show you how we can build a native mobile app using Mouin in a few simple steps.

Have look at the sample web site we have created at http://retronews.mouin.com. Here is a screenshot:

RetroNews

This web site can be visited using a mobile browser, but it will not be easy to read:

RetroNewsMobile

We could play around with CSS styles and HTML5 to try to adapt it to mobile devices, but this is really difficult and time-consuming. Even for experienced web designers, it's very difficult to adapt properly to all platforms, device types and form factors. And when you are done, you still don't have a mobile app that you can upload to the different app stores.

We are going to take a different route. We would like to create a native mobile app for it, showing the main sections, news, content, and contact form, in a mobile-native format, using native UI elements on all platforms. And we are going to do it adding Mouin CSS styles.


Step 1: Create the header

If you have a look at the HTML/CSS for the web site, you will see the following piece of code:

  <div id="top_header">
<div id="logo_container">
<img id="logo" src="images/retro-news.png"/>
</div>
</div>

We want to use the RetroNews logo for the header, so we need to add the following CSS to the site:

  #logo { -mouin-style: header on(#424E5D gradient);

The property "header" instructs the Mouin client to create a header and get the text and image from the element. Since this is applied to an img element, there will be no text. Separately, the "on" property defines the background of the header. As you can see, we are assigning a bluish-grey color (#424E5D), and requesting a gradient to make it more interesting.

This is all.To check how this looks, you just need to install the Mouin News app on your mobile device, enter your user credentials, and select the app. It will look like this:

iPhone

Android

BlackBerry

Java

If you want to follow along on your mobile device, you can download the Mouin News preview app and use the read-only guest account (username guest, password guest) to visit the samples.


Step 2: Main content

You can see that the previous version didn't show any content. This is because we haven't designated anything to be shown by Mouin. The next obvious step, following native mobile app conventions, is to display the main entries as mobile list items. Here is the original HTML code that displays items:

  <div class = "entry main_post">
<h1><a class="entry_title article_link" href="/sol20.php">SOL-20/8</a></h1>
<img class="entry_image" src = "images/Sol20_294px_w.png">
<div class ="desc">
<strong>The small computer.</strong>
Twenty-five years ago a computer as powerful as...
<a class="text-link" href="/sol20.php"><strong>Read more...</strong></a>
</div>
</div>

We will now add the Mouin styles to convert this into native mobile controls:

  .entry          { -mouin-style: item; }
.entry_title { -mouin-set-prop: title href; }
.entry_image { -mouin-set-prop: image; }
.desc { -mouin-set-prop: text; }

The first rule converts any HTML element of class "entry" into a native list item. The other rules extract the indicated attributes from the sub-elements and add them to the list item.

With just these four lines added to your web site, this is what Mouin will show on each platform:

iPhone

Android

BlackBerry

Java

As you see, with a total of 5 lines of CSS, the result is starting to look and act as a fully native native mobile app.


Step 3: Article content

Once the content index is done, we need to make sure that the article content is displayed properly when the user visits it. The article content is composed of rich formatted text and images, and it is contained in a DIV element with id "main_content". So, here is the Mouin CSS rule that converts this into native mobile format:

  #main_content { -mouin-style: article; }

This is how the article will look when visited on different platforms:

iPhone

Android

BlackBerry

Java

As you can see, you need not specify how the content is adapted, the text or image size, or anything else - the Mouin system does a good default job of adapting running text with links and images to optimal native presentation on each supported platform.


Step 4: Sections

Instead of a navigation bar, many mobile apps show section icons to allow users to access their favorite content quickly. Here is a typical section-access bar on an iPhone app:

MenuBarIphone

We would like to use this format to convert the navigation bar of our web site. Here is the simple CSS needed:

  .sec            { -mouin-style: section white on(black); }
.sec_icon { -mouin-set-prop: image; }
.sec_link { -mouin-set-prop: href; }

As with the items, the first rule creates the section entry for each navigation element, and the other two rules extract the necessary info from the sub-elements and assign it to the containing Mouin element.

Mouin will take care of collecting and displaying all the sections in a format appropriate for each platform. Here is how the app looks now, with the main four sections:

iPhone

Android

BlackBerry

Java


Step 5: Contact form

Finally, we are going to add a contact form to our native mobile app. As for all other parts of the app, we will rely on converting the existing contact form into a native form. Here is the simple CSS code that achieves this:

  #contact_form            { -mouin-style: form; }
#contact_form li { -mouin-style: field; }
#contact_form li label { -mouin-set-prop: title; }
#contact_form li input,
#contact_form li textarea,
#contact_form li button { -mouin-set-prop: value(name content ui);}

Again, the first two rules determine which HTML elements "get promoted" to Mouin display and how, and the other rules extract the relevant information from sub-elements. Once you add this code and visit the contact section on the app, this is how it will look on the device:

iPhone

Android


Final step: Build & submit the app

As you can see, we have built a full native mobile app with about 20 lines of very simple CSS code. While you add the styling, you can use the Mouin News preview app to check how things look and act. Once you are happy with how everything is, you are ready to have the app actually built and submitted to the app stores.

You just need to go into your Mouin account panel, submit an icon for the app, select the platforms you want to build for, pay the fee using a credit card or a supported payment method, and click "Purchase". The Mouin system will take care of building the app on all systems, and submitting it to the app stores. Within minutes, the app will be available for download on "immediate" app stores like the Android market, and after the respective review processes are done on each store, on all the other stores in a few days.

The best thing here is that, if you change the CSS styles on your web site, the app that users have downloaded will reflect the changes immediately, so you will be able to change the look, add or remove sections, and much more, without having to depend on anyone else.

If you want to learn all technical details of the Mouin CSS extensions, you can download the Mouin spec. If you want to kick the tires, you can download the Mouin News preview app and use the "guest" account. And if you want to go for a test ride, just sign up for free and get started turning your web site into native multiplatform mobile apps!