Mobile Web Application Design

I get "Mobile First", I want a mobile interface, where do I start?

Sometimes it seems there are as many options as there are devices. DurangoBPA can help your organization make the transition.

If you are looking to extend and enhance traditional business processes, then a mobile web application may be the most cost effective path.

Cross-platform and mobile-ready

Our mobile solutions rely heavily on mobile web and hybrid application design patterns. Great effort is taken to ensure usability on any device and at any screen size.

Balancing cutting-edge with stable, industry accepted best-practices

  • Judicious use of AJAX and RESTful APIs to
    • support efficient utilization of mobile bandwidth
    • increase overall user experience (UX) and throughput of information
    • promote scalability and maintainability
  • Varying levels of responsive design that are tailored to project goals and requirements
  • Premium, robust and stable client-side frameworks and libraries
  • Client and server-side device detection to promote usability and user experience (UX)
  • Cross-platform strategies for data synchronization in online/offline scenarios
  • Selective use of single page application (SPA) models and techniques

Related Links

Mobile Application Types

  • Native
  • Mobile Web
  • Hybrid

Native applications are developed to target a specific, mobile operating system, (iOS, Google Android etc.), and are typically downloaded and installed from an "app store" (Apple App Store/Google Play).

Pros
  • Direct, fast and complete access to device hardware and special features; graphics processing, accelerometer, geolocation, camera, file access, storage management, etc.
  • Best support for in-app/app-store purchasing. Customers can easily make purchases via their Apple App Store or Google Play accounts.
Cons
  • Not cross-platform; multiple code-bases are required to target multiple platforms.
  • Expensive development cycle; mobile platform-specific programming skills are required.

Mobile web applications use the latest standards to deliver a mobile-friendly user interface. Interactive elements like buttons, input boxes, menus and scrolling appear and function like their native counterparts. Responsive design reduces or eliminates horizontal scrolling and pinch to zoom. Device detection is often used to deliver special, “mobile widgets” to smartphones.

Pros
  • Inherently cross-platform and based on non-proprietary web standards like HTML5, CSS3 and JavaScript.
  • Tools and techniques to detect device capabilities are steadily improving. It is now possible for a single code-base to deliver high quality interfaces to smartphones, tablets and desktops.
  • Powerful functionality, (that was cost-prohibitive and overly complex just a few years ago), are now trending toward mainstream.
    • Single Page App's (SPA's) like Outlook Web Mail and Google Mail are becoming easier to develop.
    • "Field" capable apps that transition seamlessly between connected and offline states. Edits made offline are cached and transferred once a mobile data connection is reestablished.
Cons
  • Some native bells and whistles are still not accessible to a browser-based solution. For example, "tap/click-to-call" is supported by most mobile browsers, whereas full-featured access to the camera is not.
  • Cannot be deployed via the Apple App Store or Google Play, (see Hybrid).

Mobil hybrid applications utilize web standards just like mobile web apps. However, they differ in that they execute within the context of a native container. The container (UIWebView in iOS, WebView in Android and other mobile OS's) is a native OS design tool that native application developers use to embed web content and functionality into their native apps. The real power of the hybrid design derives from additional utilities that enable access to native device capabilities from special JavaScript-based code.

Pros
  • Allows native app's to be built directly from HTML5, CSS and JavaScript
  • Allows app delivery and monetization via the app store, (Apple App Store or Google Play)
Cons
  • Requires an extra step: PhoneGap (aka Apache Cordova)