Tag Archives: consumer tech

Building a Native Mobile App Experience—Without the App

Note: This post was adapted from the more developer-oriented “Piggybacking on backbone.js for performant mobile web”, originally published on Sawdust Software.

Native mobile apps are great. They provide a rich user interface (UI). They can easily access other core applications (e.g., camera, calendar, message center) on your smartphone to create stickier, more immersive experiences. They routinely provide a much faster user experience (UX) in terms of menu traversal and screen-to-screen navigation.

However these benefits come at a cost. They require lots of work: learning, developing, and testing on an entirely different tech stack (most likely iOS or Android). They bind you to navigate a proprietary app store release and submission process (one far slower than the ability to release software on your own web farms). Worse, these are not one-time costs. They can double the cost of adding new features (as you have to develop these for web and native mobile). The also introduce a new mobile OS compliance cost: keeping your app up-to-date with new mobile OS releases—while supporting users on older mobile OS versions—can routinely add 30% to your costs of mobile development and testing.

In some situations, the benefits of using a native mobile app far outweigh the costs; in others they do not. Luckily, there are many technologies and approaches available when you want to create a mobile web experience and do not require (or want to) development of a native mobile app:

Create mobile web-optimized templates

The responsive web design (RWD) movement has gained much traction in the design and development community. While it is appealing to create universal web templates that can detect and respond to the size of the browser screen, this is not always ideal for mobile web. More often than not, universal web templates can have quite large file sizes. Downloading these over a 3G connection can be quite slow. Worse, they can burn battery life on your customer’s phones, leading them to not use your site on mobile.

When considering functionality for mobile pay attention to size of the pages you need users to download. If the desktop (or ever increasingly Tablet-plus-WiFi) versions of your HTML templates are large, create mobile-only templates that are smaller and optimized for download and display on smartphones. If you are on a standard web framework, you have a range of plug-ins you can add to easily detect then customers are accessing your site with a mobile device and serve these templates (e.g., Django Mobile, User Agent (for Rails), Spring Mobile Device Module). You can even use these to serve up a different experience for mobile tablet (vs. mobile smartphone) users.

Use HTML5 and jQuery Mobile to emulate native mobile UIs

Thanks to the rise of mobile and responsive web design, there are now many libraries available to develop lightweight (i.e., small file size) touch-responsive web interfaces using HTML5. Some great examples include: JQuery mobile (if you are a jQuery purist), jQT (if you have a Sass shop), and Zepto (if your really want super fast performance).

When you combine these with mobile browser detection (see above), you can serve up HTML interfaces that use widgets that are virtually indistinguishable from their native mobile counterparts to 80% of your customers:

Entirely HTML5, Sass and jQuery mobile web--with emulated iOS widgets (www.custommade.com)
Entirely HTML5, Sass and jQuery mobile web–with emulated iOS widgets (www.custommade.com)

It is worth pointing out that using these libraries not only lets you emulate a mobile app experience, using them also keeps your teams on a single technology stack. Developers building web UIs can easily switch over and develop mobile web equivalents (or vice versa). This makes life much more interesting for developers (they can do more, more easily) and management (people can do more and switch to whatever is most important more easily).

Use backbone.js to load navigation control into the browser

One of the reasons that native mobile apps are able to navigate (between menus and moving from screen to screen) so quickly is that they embed a model-view-controller (MVC) architecture directly into the app installed on the mobile device. In an MVC architecture, the Controller directs what Views (screens, menu elements) to display when a user touches (or clicks) on something. On native mobile apps, the Controller is located on the device itself (an is accessible virtually instantly). This is very different than “traditional” browser based web-applications, where the View Controller is hundreds (or thousands) of miles away on a web server—something made even worse when a smartphone is trying to ping a server over a 3G (or worse) mobile connection.

However, over the past 2-3 years, several JavaScript (JS) frameworks have been developed that solve this problem. All of these frameworks were created to simplify development of Single-page browser Applications (SPAs): rich web applications that approximate the interactivity of traditional “thick client” applications. They do this by loading MVC (or MVC-like) frameworks into the browser. This not allows browser-based apps to display updates without action by the end user; it also provides the secondary (and critical) benefit for mobile web apps of moving the View Controller from a remote server into mobile device in the hands of your customer:

Adding a SPA-oriented JS framework like Angular, Backbone or Knockout embeds a MVC architecture in the hands of your customer, just like a native mobile app does.
Adding a SPA-oriented JS framework like Angular, Backbone or Knockout embeds a MVC architecture in the hands of your customer, just like a native mobile app does.

As result web apps on a smartphone, tablet or desktop can be just as fast as native mobile OS apps. Several JS frameworks are available to achieve this. Google first developed Angular.js in 2009. Steve Sanderson of Microsoft developed Knockout.js a year later. Jeremy Ashkenas also developed Backbone.js—a favorite of many eCommerce and consumer web companies—in 2010.

Caveat

This technology stack does not allow for completely offline operation, something that is possible to achieve with a native mobile application. If you need to support offline operation (for extended periods of time) without losing any data, you will still need to build a native mobile app with an embedded SQLite database. However, that is not the use case more the vast majority of mobile apps.

Credits & Disclaimer

This author of this post used to lead technology at CustomMade Ventures where we have used HTML5, Sass, jQuery Mobile, Backbone.js and Django Mobile to create a mobile web experience for ideation and collaboration for our two-sided marketplace. Translation of this architecture into reality is the work of two great members of our Engineering team: Brendan Smith and Mike Manning.

Ten Tech Trends for Your 2012 New Year’s Resolutions List

Article first published as Ten Tech Trends for Your 2012 New Year’s Resolutions List on Technorati

BabyNewYearOne of the most exciting things about working in tech is using it to create new ways to work, play—and even live. We have seen many great technology innovations develop over the past few years. Over 2012, ten of them will complete the jump from “new concept” to “mainstream trend.” How many of them are your ready for?

1. Everything Will Be Portable. The move to portable computing (smartphones, tablets and ultrabooks) will accelerate. Thick laptops and—even worse—desktops will be a relic of the past (except for those with high-power computing needs). If you are not yet mobile- and portable-ready, you better get there very soon.

2. Augmented Reality Will Go Mainstream. Augmented Reality (AR) is no longer a science fiction concept. Smartphones and (especially) tablets are mass-market platforms for everyday augmented reality. We are already seeing the first applications at Tech Meetups, CES and more. At least three innovators will exploit this, gaining mainstream adoption, by the end of 2012.

3. Touch Will Be Ubiquitous. Over the past five years, capacitive touch interfaces have re-programmed how millions of us interact with technology. As more devices are now sold today with touch than without, it is time to begin optimizing your user interface and user experience for touch (instead of a two-button mouse and keyboard).

4. Voice Will Be Next. While the intuitiveness of touch is a leapfrog improvement over mouse-and-keyboard, it still ties up our hands. Voice-based interaction is where we need to go. Apple’s Siri began the move of voice-driven interaction into the mainstream. This year, we’ll see SDKs for iOS and Android that harness the creativity of thousands to explode use of voice.

5. Fat Will Be the New Thin. Over a decade ago, broadband Internet enabled browsers to replace thick client applications. Now, portable computing usage across low power, lossy networks (e.g., mobile, WiFi, Bluetooth) coupled with AppStore Model has brought locally installed apps back in vogue. Building web apps is not enough; you need AppStore apps too.

6. Location-based Privacy Will Be Solved. Over the last two years location-based services became really hot. Unfortunately location-related privacy issues became hot too. The move of these services into mainstream populations of tens of millions will expand anecdotal security scares into weekly news stories, forcing adoption of safer location-based privacy policies.

7. Cloud Will Be the New Norm. Cloud computing is no longer an “edge market.” It is now adopted by big enterprises, public sector agencies—and even consumer tech providers. The cost, convenience and flexibility advantages of cloud computing will make it too hard for everyone not to use—everyday—by the end of this year.

8. …So Will Twitter. While people still love to debate the reasons to use Twitter, everything from the Arab Spring to the Charlie Sheen Meltdown showed that Twitter is now a well-recognized media channel. #Election2012 will accelerate mainstream use of Twitter—with the same overwhelming intensity we have seen for years in “traditional” campaign advertising.

9. ‘Consumerization of IT’ Planned and Budgeted. Consumer tech has become so sophisticated (without sacrificing ease-of-use and intuitiveness) that we began last year to demand its use in the enterprise. 2012—the first year in which most enterprise budgets include planned projects to support the consumerization of IT—will both accelerate and “lock in” this new tech trend.

10. 2012 Will Be Declared the Begin of “The ‘Big Data’ Era.” This year we will see another 40% increase in data we need to manage. This growth, coupled with recent releases of enterprise-ready high-scale NoSQL products will begin adoption of this tech by the entire industry. Looking back, 2012 will represent the start of the global, cross-industry Big Data era.

If you haven’t started embracing these already, now is a great time to add them to your “2012 Technology New Year’s Resolution List.” Sponsor a few pilot projects in your enterprise. Buy one or two Post-CES products to help you work more efficiently at the office. Or—if you want to include the whole family—buy one to use while you shop online, watch TV or manage your household.