Cross-platform Mobile Web Apps with Native User Interface

The rapid introduction of a new smartphones from leading vendors with different screen sizes and operating systems has created a dilemma for Web and SaaS application vendors. These application vendors already have existing or new customers who are buying smartphones in increasingly large numbers. Application vendors thinking about developing native apps have two choices. They can either support all popular smartphones, which is very expensive, or they can support only one or two smartphones which means that many of their customers will be unable to access their app from unsupported smartphones. Neither choice is appealing.

Chatty Apps offer a different and elegant alternative to this dilemma by introducing and supporting the concept of chunking for creating user interfaces.  Chatty Apps use HTML which enables Web and SaaS application vendors to create cross-platform user interfaces for their apps. The drawback of conventional Web apps is that they do not have the look and feel and appeal of native apps. One Web page does not fit elegantly in all devices with different screen sizes. The result is that cross-platform support is achieved at the cost of an inferior user interface.

Chatty Apps addresses this limitation by providing a powerful means of supporting a “chunked” user interface. I described the concept of chunking in a previous blog titled “Chunking” Enables Better User Interface for Mobile Apps. Basically, the user interface is broken down or “chunked” into small parts or “bites”, the size and content of each bite is up to the user interface designer. In a Chatty App, the chunked user interface is presented to the user in a sequence that is controlled by a flow chart. Rules allow the sequence to be changed in real time, which means that the user interface is dynamic and adapts to the context of the information being entered by the user.

One of the major benefits of chunking is that each set of chunks can be designed to fit the screen size of a specific smartphone. Thus the user interface appears as if it is designed for the smartphone. If the UI designer wants to support a different smartphone, he can simply create a different set of chunks with a different flow chart to control its sequence. In this way any number of different smartphones or devices can be supported, and the UI appears like a native app.

The Chatty App Studio provides the tools necessary to develop such chunked user interfaces in an elegant and logical fashion, which include the following

  1. A UI Editor to create chunked user interfaces for each device, including the ability to clone the UI for devices that are similar.
  2. Flow Editor to create the flow chart to control the sequence of each set of chunks.
  3. Rules Editor that enables the UI designer to define context-aware rules that can alter the sequence of the chunks and make the UI dynamic and context sensitive.
  4. The Chatty Apps Server that senses the device that is accessing the Chatty App, and then presents the sequence of chunks that were designed for the device. This ensures that each smartphone displays the user interface for the Chatty App that is designed for the device and looks and behaves like a native app.
  5. The Chatty App Server also provides the tools and connectivity to Web and SaaS applications through SOA/Web Services. Thus the Chatty App essentially becomes the user interface front-end of Web and SaaS applications, whereas the core logic, functionality and database continue to reside in the application.

The bottom line is that Chatty Apps allow Web and SaaS application vendors to create and deploy mobile user interface that are not only cross-platform, but also feel and behave like native apps on the smartphone they are running on.

Rashid N. Khan

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

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>