Development Options

Native or Web? Or Both?

Android, Apple and world imagesApps are short for “Applications” and are essentially software programs that can be used to perform a specific function on your mobile device. Apps are actually becoming more important than the devices themselves. While the devices will have a limited shelf life, your App and your personal data associated with that App will continue to exist and evolve for much longer and on multiple platforms if you so choose. The Apple App store as part of iTunes was the surprise story of 2008, becoming one of the biggest successes in mobile history. In fact, all of the other major mobile platforms have copied this App store model. 

The biggest difference between mobile web apps and native apps today from a development perspective is that native apps can require development for multiple platforms whereas mobile web apps can require support for many browsers. The bottom line is that native apps vs. web apps is not really a debate. There is no winner and there is no loser. The choice of what to develop is an engineering and a design decision that should be based on a solid set of requirements. Think about your users and where you want to distribute your content. Mobile is bigger than just apps!

Native Apps

Definition

What is a “native” App? A native App is an application specifically designed to run on a device’s operating system and machine firmware. It typically needs to be programmed in a unique or proprietary language and development environment for each platform or operating system. The terms platform and operating system are often used interchangeably in the mobile industry. Deloitte estimates the cost of developing for two OSs is 160 percent of the cost of developing for one. (Source). A native App is so much more than just the look and the feel. Many things matter, including the way that data is stored on the mobile. In a native App, most of the Application is stored locally on the device, but the user data may be stored on the device, in the cloud (remotely), or both. 

When to Develop

  • Charging for it (for profit)
  • Games and 3D
  • Using cameras or other features (e.g. Augmented Reality)
  • Accessing the file systems
  • Offline / disconnected use

Platforms & Operating Systems

Sometimes the term, "platform" has been used rather loosely in the mobile world and this causes some confusion because there are such things as "development platforms". For the sake of consistency, when we refer to platforms we are referring to the operating system. Currently, in the desktop world, we primarily have to deal with different variants of Windows, Mac, and Linux. In the mobile world, we have to target many more if we are looking to develop a native application. Developing for each native platform requires a specialized development approach, often coupled with an integrated development environment (IDE) or software development kit (SDK). This list below is not all inclusive, but provides links to download several IDEs and SDKs used to develop mobile Apps natively for each platform: In terms of developing for Native Applications, there are so many Software Development Kits (SDKs) to choose from. This list is not all inclusive, but will give you an idea of how complicated it can be to try to develop for multiple platforms using multiple SDKs. While some of these do support limited cross-platform deployment there is no single SDK that supports every Native platform, but there are a few that come close.

Also see: List of platform development environment / SDKs (list provided by Wikipedia)

App Stores

Each mobile device today usually provides direct access to a specific platform App store, but not all App stores are accessible on each platform since they are proprietary and unique to each device’s operating system. For example, iOS Apps packaged for iPhone, iPad, and iPod Touch won’t be discoverable in the Android Market (recently renamed Google play). Each App store has a unique process, file formats, and specific requirements for distribution to their App store. The process of distributing your App to these different App stores for each platform can be very time-consuming and should be considered in your overall distribution strategy. While the Apple process is rigid and time-consuming, I’ve found the Android process to be the quickest. Below is a listing of the primary native App stores available to mobile devices in the United States:

Native Apps Pros and Cons

Pros:
  • They offer a best-in-class user experience, offering a rich design and tapping into device features and offline use.
  • They are relatively simple to develop for a single platform.
  • You can charge for applications.
Cons:
  • They require a unique programming language.
  • They cannot be easily ported to other mobile platforms.
  • Developing, testing, and supporting multiple device platforms can be costly.
  • They may require certification and distribution from a third party that you have no control over.

Mobile Web Apps

Definition

Mobile Web Apps are also referred to as Mobile Rich Internet Applications (RIA). The difference between mobile web app and native apps is anticipated to be less obvious by users in the near future. Modern mobile browsers can now gain direct access to the hardware capabilities of mobile devices (including accelerometers and geo-location).

The performance of browser-based mobile web applications continues to improve. Persistent storage and access to user interface functions (such as the address book) may further reduce the demand for platform-specific native apps. As far as today's mobile web apps are concerned, most of the data is stored in the cloud.

When to Develop

  • When you seek cross-platform compatibility
  • When you can't support the development of native apps using proprietary SDKs
  • When accessibility is a requirement
  • When the more advanced capabilities of the device aren't required

Standards

Mobile Web Best Practices pamphlet
W3C Initiative
Widgets
The new concept of mobile widgets offers a great multi-device application platform, including local applications that don't require an always-connected Web with URLs and browsers. A widget is a local HTML / CSS / JavaScript web application. A mobile phone user downloads a widget once, and then the web application is stored locally on their mobile phone.
  • Pioneered by Opera and Vodaphone
  • Goal: "Write once, run anywhere"
  • Based on a W3C specification: http://www.w3.org/TR/widgets/
  • Highly endorsed by the Wholesale Applications Community (WAC)
WAC
  • Goal: Portability of applications across devices, operating systems and network operators
  • History: In July 2010, the BONDI initiative and the Joint Innovation Lab (JIL) merged into the Wholesale Applications Community.
  • Will enable developers not only to write a web application that can function across different platforms and devices, but also can be deployed across the many different applications stores supplied by the WAC platform.

Mobile Web Pros and Cons

Pros:
  • Uses basic HTML, CSS, and JavaScript knowledge
  • Easy to deploy across multiple devices
  • Content is accessible on any mobile web browser
  • Can be packaged and ported as a native app! See mobile web app frameworks
Cons:
  • The best user experience (interface) might not be available on all handsets
  • Can be challenging (but not impossible) to support across multiple browsers
  • Older devices don't support native application features, like offline mode, location lookup, file system access, camera, etc.

Frameworks

Mobile web app frameworks are easing the development process for those interested in the mobile web app approach. These frameworks allow mobile web apps to look and feel and function like native apps. They are typically available as configurable open source frameworks that you can download and begin working with by using pre-existing templates and themes. They provide anyone the ability to edit the existing files and are developed using web standards (HTML, CSS, JavaScript); the more recent ones support HTML5.

Some of these frameworks include APIs and some offer additional commercial tools or publishing capabilities for packaging the content as a native app. If you only care about targeting the newer smartphone touch devices or mobile devices that support HTML5, then this is a cost-effective alternative to native app development.

Framework Comments
iPhone User Interface Framework(iUi) File package containing HTML, CSS, JavaScript and images. Intended for iPhone, iPod Touch and iPad but works well on any mobile device that supports CSS 3 webkit extensions. First framework of it's kind. Requires basic knowledge of HTML; requires intermediate knowledge of CSS.
iWebkit File package containing HTML, CSS, JavaScript and images. Intended for iPhone, iPod Touch and iPad but works well on any mobile device that supports CSS 3 webkit extensions. Has more templates than iUI. Requires basic knowledge of HTML; requires intermediate knowledge of CSS.
JQTouch File package containing HTML, CSS, JQuery (JavaScript Library) and images. Intended for iPhone, but works on Android too. Has more interactions and features than iWebkit or iUI, but is limited to iPhone in terms of compatibility. Requires intermediate knowledge and understanding of HTML, CSS, and JavaScript.
Sencha Touch File package containing HTML5, CSS3, JavaScript, and images. Provides a robust set of themes, templates, and targets mobile browsers supporting HTML5. Developed by one of the initial creators of JQTouch. Requires advanced knowledge and understanding of HTML5, CSS3, and JavaScript. Heavily based on JavaScript and most content is maintained within JavaScript files, not HTML.
JQuery Mobile File package containing HTML, CSS, and JavaScript (JQuery library optimized for mobile), and images. The goal of this initiative is to provide a unified user interface system across all popular mobile device platforms. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Requires advanced knowledge and understanding of HTML5, CSS3, and JavaScript.
The M Project Uses the JQuery Mobile Framework, but expands on the implementation by providing a configuration management / life-cycle approach with a library of example Apps that you can work with. Features include:
  • Model-View-Controller (MVC) implementation
  • HTML5 Offline support (automatic cache manifest generation)
  • JavaScript-all development cycle
  • Rich User Interfaces
  • DataProvider for local and remote storage persistence
  • Internationalization (i18n)
  • Open Source (MIT License)
  • NodeJS based build tools (called Espresso)
PhoneGap This is a nice compliment to of any of the above frameworks if you wish to turn your mobile web app into a native app. This app publishing framework supports several platforms. It allows you to use core features of the iPhone, Android, Palm, Symbian and Blackberry smartphones, including geolocation, accelerometer, contacts, sound and vibration. Requires additional software specific to the platform that is being developed, such as the iPhone SDK for the iPhone iOS, Android SDK for Android, etc. This is different than the above frameworks as it does not contain any file packages that you can customize. You are expected to create your own HTML, CSS, and JavaScript before using PhoneGap.
PhoneGap Build Simply write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more. By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

Progressive Enhancement

Prior to the last few years, web development best practices embraced the concept of graceful degradation of content to support the lowest common denominator. A common theme and best practice these days in mobile web development is progressive enhancement . Graceful degradation dates back to 1994 with respect to the web. The basic idea behind graceful degradation is that so long as less capable browsers can handle documents containing newer technologies and still view basic information and/or functionality, then everything is fine. In recent years, though, this has come to mean producing only one version of the web content without designing in support for less capable browsers. In years past, most thought that the modern desktop browsers would always be what people used, but with the ubiquity of browsers on mobile devices this is no longer true. In a nutshell: when developing any web content, you should start with the basic technology supported and then only provide enhanced features as an option if they user’s browser supports it. This approach is called progressive enhancement.

Both graceful degradation and progressive enhancement consider how well a site works in a variety of browsers on a variety of devices. The key is where they place their focus and how this affects workflow. The graceful degradation technique is not useful for mobile browsers because there are serious compatibility issues in the mobile world. If we develop mobile content for the latest device (for example, the iPhone’s safari webkit browser), it may not automatically work on other, less advanced devices. Below is a table showing the key differences between the two approaches and why progressive enhancement is important when developing mobile content.

Graceful Degradation  Progressive Enhancement
Browser-focused Content-focused
Test high-end browsers first; low-end browsers last Supports low-end browsers; if high end available then add enhancements
Looks at accessibility last Looks at accessibility first
May require browser and/or device detection with server-side scripting Possible to support ALL browsers with only set of X/HTML; may require device detection

Device Detection/Content Adaptation

Progressive enhancement is a good place to start for mobile content development, but one size doesn’t necessarily fit all. Device detection is used mostly today in situations where the mobile design wasn’t considered first and/or where progressive enhancement isn't possible without a costly rework of the website or web application. For example, a website that was asked to be converted to support mobile might be more quickly accomplished by creating a smaller, stand-alone version. There are several situations where the content will need to be adapted for a specific browser or deliver a specific file time (e.g. video) using device detection. The main problem with this approach is that it can sometimes present a real challenge in terms of life cycle maintenance.

Below are some tools that can be leveraged for implementing a content adaptation strategy for your mobile content:

WURFL

Terra-WURFL

  • PHP API & MySQL focused on high-performance detection of mobile devices
  • Can detect over 45,000 User Agents
  • http://www.tera-wurfl.com

Device Atlas

  • Mobile Device Database & API
  • Developed by dotMobi
  • Comprehensive data on over 6,000 devices
  • http://deviceatlas.com

DetectMobileBrowsers.mobi

  • Detects Mobile Browser User Agents
  • PHP-based (server-side)
  • Supports: iPhone, iPad, Android, Opera Mini, Blackberry, Palm, Windows Mobiles, Low End Mobiles, Desktop Redirect URL
  • http://detectmobilebrowsers.mobi

Device Detection/Content Adaptation Examples

University of Alabama

  • Used for XHTML Mobile Profile and CSS for basic version
  • Used iWebkit for advanced version
  • Used device detection (detectmobilebrowsers.mobi)
  • http://webguide.ua.edu/mobile.html
content-adaptation.png
Comments