Have feedback? Tell us what you think via Twitter.
To create an open source mobile web app design and development framework to easily create cross-platform application-like mobile experiences using web standards principles and practices.
The purpose of this framework is to abstract the common elements of design and development into reusable and adaptable libraries, making it easier to build cross-platform native-like experiences using the mobile web.
The mobile web is becoming an increasingly viable means of creating cross-platform mobile applications, but the lack of tools to create easy cross-platform experiences. Especially when rivaled by native applications and app stores, threatening to marginalize the only ubiquitous mobile platform, the web. While many mobile web application user interface and javascript libraries have evolved along with specific devices, they lack backwards compatibility with other devices.
Use the same language and basic techniques to express mobile interactions across multiple platforms.
Designers and developers would be able to express the mobile interface in basic XHTML. By using a common library of classes and id's, the creator would be able to quickly layout and design mobile interfaces that would render native looking experiences across multiple devices.
For example writing the following line of code: <a href="#" class="button">Button text goes here</a> would reference the framework and render the appropriate button style depending on the device platform. On an iPhone it would show and iPhone button, on an Android device it would show an Android styled button, as well as a style for less capable devices. Or conversely designers will be able to create and use their own themes and interface elements.
The core framework would utilize a stacked approach, the common resources living at the bottom most layer and the device specific resources living at the top most layer. The first layer would contain the common elements that work across all supported devices, like layout, color and typography. The second layer would be the common libraries based upon defined device classes, this would include the page model and layout libraries. The third layer would be the device specific themes and Javascript libraries that call the common interface elements for that particular device.
In the end designer and developers should be able to use the framework to publish mobile web applications simultaneously on multiple device platforms with little to no device-specific adaptation, as well as deploy web applications to various mobile application stores as native applications, using an embedded browser within a native container.
The project will consist of a number of deliverables aimed and simplifying the mobile design and development process, meant to be packaged and distributed under and open source license . However with the massive number of devices in the market each of which with their own often non-compliant, non-updateable browsers, it likely won't be possible to support all devices. Our goal will be to support devices and browsers based on either market share or how well the browser complies to web standards. By making the project open source it is our hope that we can provide a base library that others can continue to adapt for the specific devices that suit their business needs and contribute their work back into the project.
The following is the list of deliverables we've outlined as being essential to the framework.
In order to have a useful framework that can be used for cross-platform mobile web apps as well as native apps based on web apps, a new page metaphor and navigation model will need to be defined and created.
The purpose is to have a common user interface metaphor and technical specification for how the user will interact with content that applies to multiple devices.
One of the biggest challenges of the project will be to define and create a page model that works on both lower end devices as well as high end devices. Currently most high end device frameworks like iUI and jQTouch use AJAX and DHTML to mimic native application page transitions and break the page model of other browsers.
Create a mobile layout library based on a design grid ranging from small fixed width feature phone screen to a larger fluid width smart phone screen.
The purpose of this deliverable is to allow designers and developers to quickly layout content without having to worrying about device specific quirks.
Create a mobile typography library to allow designers and developers easy access to the core common block level elements across multiple devices.
The purpose of this library is to abstract the typography and sizes from the core stylesheets in order to easily adapt to less capable different devices.
Create a Photoshop design library of common mobile interaction elements in various native GUIs.
The purpose of this deliverable to give designers the template to create new interfaces based from the common design conventions established with a native device API. Thus allowing designers and developers to use the web and not the native API to create rich experiences.
Define and provide names and definitions for common mobile interaction metaphors.
The purpose of this deliverable is to provide a common language to elements a mobile user may need to interpret and interact with. By providing an agreed to nomenclature, we not only better incorporate features into the core framework, but also better advocate for standardized methods across browsers.
Create an animation library, based on predefined standards to perform common user interface animations.
The purpose of this library is to not just simplify the inclusion of animation into mobile user interfaces, but also to standardize how it is called allowing for easier adaptation across multiple devices that may rely on different means of execution.
Create a common Javascript library, optimized for mobile devices, to perform common interactive and device functions.
The purpose of this library is to create a base reusable Javascript library for designers and developers to use when creating mobile experiences, as well as to standardize the nomenclature to which device functions, like location, filesystem, address book are called.
Create platform-specific themes for the top devices, starting with the highest scored devices in the device matrix and moving down to lessor devices.
The purpose of these libraries is to provide a native experience using web technologies for the requesting platform. Designers and developers should have the option to use the default device theme, their own theme, or a hybrid of the two.
Create platform-specific script libraries for the top devices, starting with the highest scored devices in the device matrix and moving down to lessor devices.
The purpose of these libraries is to provide the scripts necessary to perform common DHTML or AJAX-based interactions where available.
Design (or fork) each of its libraries to work within the most popular native application containers like PhoneGap or QuickConnect.
The purpose of this library is to have the framework, or at least a version of the framework, available in popular native application containers in parallel to primary development.
One major benefit of the framework is to use web standards principles and techniques to create native applications that work across platforms with a little to no cross-platform adaptation.
To simplify how stylesheets are called across multiple devices create a Javascript that replaces the body class of the document from the default lowest common denominator to the class of requesting device.
By including a short script that looks at the requesting user agent and replaces the class to <body class="iphone"> we can override the default theme with our iPhone theme. For example by default our document might include <body class="lcd">.
Create and publish simple device detection and adaptation methods for various web development frameworks, allowing developers to be able to detect the requesting device then include the resources within the framework needed for the target device.
The purpose of this deliverable is give developers a simple tool to conditionally load needed resources for more widely deployed applications.
Create a simple scoring system for devices and display devices within a framework compatibility matrix.
The purpose of this deliverable is to record and share which devices support which resources within the framework. The matrix will give the project team insight into which device specific themes to prioritize, as well as give developers helpful insight into the baseline support of various devices.
Create an automated device test that can be easily run from a device.
The purpose of this deliverable to quickly be able to test the device browser for compatibility with the framework. Completion of the test will give the browser a score and submit it to the device compatibility database.
Explore using the same principles and methods for expressing data as used in common microformats.
Create a number of examples of simple mobile web applications made with the framework. Make each example open source and freely available to help designers and developers get started using the framework.
Create a series of tutorials to help people solve problems using the framework.
Fully document the framework.
All deliverables should make its best effort to comply to relevant W3C, Open Mobile Alliance and accessibility specifications.
Have feedback? Tell us what you think via Twitter.