Background

Maybe you have decided to get an app built. You will not build it yourself (obviously!) so you have done your homework properly, went out and got a few quotes (that’s more than 2, please) to establish the cost of getting this built. The only problem is the total for each of them varies between 15 and 90K. How to tell them apart, beside the Kia vs BWM price tag?

If you are targeting a mobile market the first thing you must understand is the various types of “apps” that can be built. Same as you understand the difference between a car and a UTE when you buy a four-wheeler. To make your life easier, the broad advantages and disadvantages to each type of apps, are listed in the table below.

In case you didn’t know also, “App” is short for Application. But of course you knew that!

What is a “native” app

Specimen number 1
The EmpireOne Facebook page, viewed from two “different apps” (web and native) on the same mobile device.

A native application is designed and built to run in a specific environment. In the mobile world, there are many environments, namely iOS, Android, Windows8 Mobile and Blackberry being the most popular ones. Native apps require to be manually installed on the device also, from Apple’s App Store, Google’s Play Store, or others.

To remember: requires one app built per target environment.

Because the app was written for a specific environment, it will not run in a different one. This is why iPhone apps don’t run on an Android phones, and vice versa. So one application per environment has to be built.

What is a “web” app

The Web application is also designed and built for a web environment, which means it’s accessed via any web browser. Given all smartphones and tablets have a web browser pre-installed, all web apps are automatically compatible with them, without having to be installed first.

This makes a web app not specific to iPhones or Android. In other words, it’s built once and runs everywhere.

To remember: uses web technologies to build a single application for all environments.

So in essence a Web app is nothing more than a website which is designed for mobile devices, usually with functionality which is more specific to mobile devices.

What is a “responsive” web app

Responsive web app
Responsive web design, illustrating the same app over multiple devices, computer, tablet and phone. see demo

Responsive websites use special code (known as CSS media queries) to adapt the layout of a website to various device sizes. This allows for the same application to look differently on a mobile phone in landscape mode, a tablet in portrait, or on a desktop computer.

To remember: uses web technologies, also, to build an app which runs equally on mobile, tables and desktops.

Same as with web applications, a responsive web app uses nothing but a web-browser to run, making a single application to be compatible with all smart devices and without having to be installed first.

Try this demo and resize your browser. See? This is responsive!

Telling them apart

Specimen number 2
The EmpireOne Facebook page, with feedback alert, viewed from two “different apps” (web and native) on the same mobile device.

Telling the difference between applications using web technologies (Web apps, or Responsive apps) versus those that don’t (Native apps) is not always easy to the untrained eye! The primary difference is how seamlessly the application integrates with the environment.

Native application are started from the phone itself, whereas web technologies require you to start a browser first. A native app also feels, by definition, more native! Think of when you pick a date, when you see an alert box, or have to change application settings – all environments are slightly different in that respect (see specimen 2).

Still all gibberish? Lucky you, the following section and table should help, hopefully!

The non-technical talk

From a business point of view, it really boils down to two things; features and money. It is important to understand what your are getting built because the price tag will vary significantly and the possibilities for your app could be limited if the wrong platform is picked. All good developers will discuss this with you prior to giving you an estimate or at the very least, before starting any development.

If they don’t, or if you still don’t understand what it means after they did, the following table should help sussing out the differences.

Native, Web and Responsive apps compared – although responsive web design is
more of an extension of a Web app and not usually compared with Native apps.
Pros Cons
Native Apps provide a better user experience due to how they integrate more seamlessly with the device. They are usually used for games, application with access to phone settings or sensors, or needing to run without a data connection. However they are environment-specific and usually more expensive to develop. See how much apps cost
  • Better user experience
  • Access to all phone hardware (NFC, sms, contacts, notifications, etc)
  • Discoverability via the ecosystem (AppStore, GooglePlay, etc)
  • Apple will keep 30% of all revenues (not so much Google)
  • In most cases more expensive mobile strategy
  • Stores (namely Apple’s) will try to dictate what you can and cannot do
Web Apps provide a good (not great) but consistent user experience across all platforms. They are usually used when cost is a consideration and a tightly integrated user experience is not required as much. They will run in all environments and in all devices (tablets vs phones, normal and high resolution screens – eg. retina) out of the box. However they have some, but limited access to device data and hardware.
  • Built once, runs everywhere
  • Updates are deployed once and published everywhere, no update or review process
  • Can be retrofitted to desktop website via responsive web (below)
  • Monetisation requires paywall to be setup (no pay-per-download)
  • Limited access to device features (eg. geolocation)
  • Doesn’t leverage the app ecosystem to be found (organic growth via search engines, not via Store)
Responsive Apps are very well suited for large content-driven websites, where functionality is accessed via desktop and mobile devices. They tend to have a less “native” look, but nonetheless well suited to all environments. Predominantly used for content-driven or transactional apps. Same as Web Apps, they have limited access to device data and hardware.
(on top of Web App pros)

  • a single application needs building and maintenance for all platforms and devices
  • integrates with enterprise security more easily
(also, on top of Web Apps cons)

  • initially more costly than a simple Web App (tho’ in the end, has a better ROI)
  • requires an active data connection

In the end…

If you are investing a serious amount of money into a mobile app (native or web), it is imperative to have a digital partner you can trust to help you make the right decision. Always keep the following in mind, and in doubt, contact us or comment on this article; we’ll help you with your decision.

  1. if you cannot do without using the phone hardware like accelerometer, flash or NFC, chances are you will need a native app.
  2. if you are planning on releasing many changes often and quickly, anything web based could save you thousands.
  3. always remember your audience and if all they require is access to your site from a mobile device, you don’t need a mobile app!

As you now understand, native apps and web technologies both have their advantages. In the recent years, the concept of Hybrid app has emerged providing with best-of-both-worlds approach. Make sure you ask your digital partner on this!

Understanding apps: mobile, native or responsive的更多相关文章

  1. Xamarin vs React Native vs Ionic vs NativeScript: Cross-platform Mobile Frameworks Comparison

    CONTENTS Reading time: 14 minutes Cross-platform mobile development has long been a viable alternati ...

  2. [转] Understanding Twitter Bootstrap 3

    Bootstrap is a popular, open source framework. Complete with pre-built components it allows web desi ...

  3. Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018

    Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018 May 18, 2018 Alex Ivanovs Website ...

  4. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

  5. 所有selenium相关的库

    通过爬虫 获取 官方文档库 如果想获取 相应的库 修改对应配置即可 代码如下 from urllib.parse import urljoin import requests from lxml im ...

  6. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  7. 分享最新15个加速 Web 开发的框架和工具

    我们为开发人员挑选了15个最新的  Web 开发框架,你肯定尝试一下这些新鲜的框架,有的可能略微复杂,有的提供了很多的配置选项,也有一些窗口小部件和界面交互的选择.他们将帮助你创建更优秀的网站,提供给 ...

  8. 分享最新15个加速 Web 开发的框架和工具(梦想天空)

    我们为开发人员挑选了15个最新的  Web 开发框架,你肯定尝试一下这些新鲜的框架,有的可能略微复杂,有的提供了很多的配置选项,也有一些窗口小部件和界面交互的选择.他们将帮助你创建更优秀的网站,提供给 ...

  9. 谷歌Web中国开发手册:1目的&夹

    原版的:https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/ 该网站 ...

随机推荐

  1. Shell脚本学习入门(一)

    1.Shell脚本是解释型的语言. 2.Shell脚本建立的基本步骤: 3.Shell脚本文件的第一行一般可以是:"#! 路径名 -(选项)", 为了要使Shell脚本有移植性,请 ...

  2. STL的string和wstring

    STL有字符串处理类——stirng和wstring,但是用的时候会觉得不是很方便,因为它不能像TCHAR一样根据定义的宏在char类型字符串和wchar_t进行转换,总不能因为程序要Unicode就 ...

  3. android: PendingIntent的使用

    PendingIntent的Flags的类型: * Flags的类型: FLAG_ONE_SHOT:得到的pi只能使用一次,第二次使用该pi时报错 FLAG_NO_CREATE: 当pi不存在时,不创 ...

  4. 使用commons-beanutils迭代获取javabean的属性

    NoteEntity entity = new NoteEntity(); entity.setNote001("a1"); entity.setNote002("a2& ...

  5. Codeforces Round #385 (Div. 2) A. Hongcow Learns the Cyclic Shift 水题

    A. Hongcow Learns the Cyclic Shift 题目连接: http://codeforces.com/contest/745/problem/A Description Hon ...

  6. [玩转微信平台]XML的格式化- 如何去掉XML 文档头和命名空间

    前言 系统要求能够回复微信用户发过来的文本消息.实现中使用的实体对象进行XML的序列化的方式来实现XML消息.   微信平台的回复例子 http://mp.weixin.qq.com/wiki/14/ ...

  7. Creating Apps With Material Design —— Creating Lists and Cards

    转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android.时间仓促,有翻译问题请留言指出,谢谢 创建Lisst和Cards 在你的应用程序创 ...

  8. How to get URL parameters with Javascript?

    function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '( ...

  9. 单源最短路径算法---Dijkstra

    Dijkstra算法树解决有向图G=(V,E)上带权的单源最短路径问题,但是要求所有边的权值非负. 解题思路: V表示有向图的所有顶点集合,S表示那么一些顶点结合,从源点s到该集合中的顶点的最终最短路 ...

  10. 我的web框架

    我的web框架 ========================================================== 前端:css(bootstrap,自己的代码片段),js(jque ...