Making sense of the mobile development ecosystem – Part 1: The mobile web

By Brian Rinaldi

If you are a development manager or a CTO, you probably already know that deciding how to proceed with any mobile development project can be a complicated process. Once upon a time, in the not-too-distant past, everyone felt that they urgently needed an app store strategy, and the only choices were either native or hybrid.

When you fast forward just a few years, it’s clear that the ecosystem has gotten far more complex. You start by asking yourself the following questions: Do we even need an app? If so, do we need a mobile web presence in addition to an app? What technologies should we use to build our app?

Over recent years, a whole new range of options for building apps has emerged — including everything from fully web to fully native, with a host of new technologies in between.

Here’s an overview of the range of options:

The mobile development spectrum

Personally, I like to look at the mobile development ecosystem as a spectrum of solutions that range from purely mobile web applications to purely native applications. In between, there are a variety of solutions that either lean more heavily on the WebView (the same technology, more or less, that powers your mobile web browser) or more toward a native user interface (UI) and native libraries.

Here’s a simple diagram to illustrate this spectrum of solutions and where each land:The spectrum of mobile application development options

As you can see, the hybrid and hybrid/native categories lean more toward the mobile web, while JavaScript native and cross-compiled lean more toward native. But you shouldn’t be alarmed if you haven’t heard of some or even most of these other options for mobile development. After all, some of these solutions — such as hybrid/native and JavaScript native — are so new that there currently are no generally accepted names for them.

It’s important to remember that there is a difference between having your website simply function in a mobile browser and choosing the mobile web as your application platform.

Here are three significant approaches to targeting the mobile web as your application platform:

Responsive web design

The responsive web design (or just responsive design) approach has become so broadly accepted over the past five years that it is almost indistinguishable from traditional web design. Responsive design is specifically about website layout. The goal is to use fluid sizing, CSS media queries and a fluid grid to create a layout that functions at any screen size.

The benefit of responsive design is that, in theory, the same site layout can work equally well on a television, desktop, tablet or mobile phone. This can be quite difficult to achieve in practice, however, especially given the growing list of screens to support. There are a number of frameworks that can help ease the complexity of building these sites, with the two most popular being Bootstrap and Foundation.

Another complication is that your site may include code or content that doesn’t appear in the mobile layout — meaning that the user has to download the CSS, JavaScript, HTML and other potential resources for content that they do not even see. This has led to the growth of a concept called RESS, which is responsive web design with server-side components. Basically, it determines the device and viewport (meaning the browser window) size and, on the server side, sends the appropriate layout components optimized for that device.

Adaptive web design

Sometimes, you’ll hear responsive web design and adaptive web design used as synonyms, but in reality, they represent different but overlapping concepts. Responsive web design is focused on determining the size of the viewport and adjusting to it appropriately. Adaptive web design is focused on adjusting both to the viewport and the capabilities of a particular device. In some respects, it can be similar to RESS. But adaptive design also includes feature detection, which can be used to enable or disable features, depending on the type of device used.

Progressive web apps

Progressive web apps are a recent proposal from Google that aim to bridge the gap between the native app experience and the mobile web experience. The key points of progressive web apps are that they are installable, can leverage push notifications and can run background processes — even when the app isn’t open — using a browser technology called Service Workers.

Each of these key points addresses a specific shortcoming of web apps when compared to native mobile apps. So, what’s the drawback?

The biggest challenge is that the browser technologies behind progressive web apps are not supported on iOS, and there are no indications that Apple is inclined to change this soon. That being said, because progressive web apps are built upon a concept of progressive enhancement, you can support Android users but still have a normal, functioning website for iOS users, just without the added benefits that progressive web apps bring.

Choosing to use the mobile web as your mobile application platform is obviously not entirely simple, as it encompasses a broad range of options within itself. However, it’s also not an “either/or” scenario. Many companies choose to have both a mobile web version and a mobile app version of their applications.

The next part of this series will focus on the hybrid and hybrid/native options. Be sure to check back next week for the latest installment!

Written By

Brian Rinaldi

Developer Programs Manager, Telerik

Brian uses his decades of experience in development and the developer community to help the Telerik Developer Relations team deliver top-notch content and community programs. He is co-editor of the Mobile Web Weekly newsletter and authored the recent report on Static Site Generators…

Other Articles by Brian Rinaldi
See All Posts