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. 更新日志 - 关于 iOS9 设备的安装及其他优化

    新版 fir.im 上线整 3 周了,感谢你们对 fir.im 的关注和支持!无以言表,唯有做更好用的产品给大家.本周我们对新版做了以下的功能更新和 bug 修复: 功能更新 在使用过程中,请注意: ...

  2. 喜大普奔!Fanvas正式对外开源了,一键把Flash转为Canvas动画!移动终端动画开发不再困难。

    http://code.tencent.com/ https://github.com/TencentOpen/Fanvas DEMO: http://kenkozheng.github.io/fan ...

  3. GO語言基礎教程:數據類型,變量,常量

    GO類似PHP,每行的結尾要加分號來結束,不同點在於GO對此並不強制,這一點又像javascript,另外GO的語句塊是用一對大括號來包裹的,但是go要求左大括號必須要在語句的結尾處,不能在行首出現左 ...

  4. Dom4J解析xml文件动态转换为List<Bean>或者Map集合

    大家在解析大量相似xml文件的时候是否会遇到这样一个问题:冗余的代码去set定义的实体对象Bean的值,基本都是一样的操作   而且毫无任何代码价值可言所以在这写了一个简单的例子,类封装了几个方法你只 ...

  5. hibernate spring annotation setup

    First step setup for the pom.xml with hibernate dependency , hibernate dependency need to before the ...

  6. java 发送带Basic Auth认证的http post请求

    构造http header private static final String URL = "url"; private static final String APP_KEY ...

  7. 谢谢博客-园,让我不再有开源AYUI的想法

    第一次 第二次 教程不会在博客园上写了,具体的看我官网博客吧,谢谢大家了 ================= 我是个有素质的程序员 艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹 ...

  8. 我的常用mixin 之 lines

    /** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines( ...

  9. android Studio NDK

    官方文档地址: https://developer.android.com/studio/projects/add-native-code.html#download-ndk 最近推出CMake方式集 ...

  10. FindProcDLL::FindProc 和 KillProcDLL::KillProc,必须使用WPF x86编译出来的程序

    如果是 WPF 编写的exe,想用NSIS打包. 脚本里面要注意了,如果使用了 FindProcDLL::FindProc 和 KillProcDLL::KillProc, 那么WPF 的编译选项必须 ...