Mobile Application

Development Concept
Aryo Pinandito, ST, M.MT

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Delivering Mobile Content

It isn't just about choosing native apps or choosing the mobile web it's also
about looking at who your customers are and what devices they use.

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Karakteristik Aplikasi Mobile

Short-duration activities: SMS, membaca notifikasi,

mengambil foto dan mengunggahnya ke internet,

dsb
Fitur yang dimiliki aplikasi bergerak pada umumnya
lebih spesifik, instan, dan terbatas.
Dapat diakses dengan cara-cara yang sederhana /
simple (one touch, sliding, non scrollable)
Tampilan berukuran kecil dan minimal

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

The whole web is confused by

mobile
App, web app, native app, mobile site, mobile app,

adaptive design, reactive design, responsive design.

What!?!
There seems to be a lot of confusion out there.

What do all of these seemingly interchangeable

terms mean for me?

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Do I Need to Consider Mobile?

Everybody is talking mobile. Smart phones and

tablets are changing the way that your users

interact with content and online services.
45% of people interact with online content while
out and about*. That rises to 70% for 16-25s. (UK
Sept. 2011).

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

1. Do Nothing
There is a case for allowing your site to be rendered
in all of it's desktop browser glory on some mobile
devices.
For high end devices such as the iPhone or iPad,
where users are used to panning and zooming, why
give them a watered down version of your service?
This is certainly the cheapest option.
However, the Tablet is more than a small PC and
the Smart Phone is not just a small Tablet. These
are distinct devices with unique user behavior and
context.
Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

2. Adaptive Design
Different view (style) for different
screen size or different device

This enables you to tailor the visual

appearance of your site to each
device, without needing separate
mobile websites.

This is a relatively simple way of

tailoring your website or application to

specific mobile devices without having
to redesign your existing desktop
version.

It requires you to know which screen

sizes and devices you are targeting in

advanced.

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

3. Responsive Design
Responsive' design does not require you
to know your target screen sizes from
the beginning.
The page will rearrange content
constantly as the screen changes size.

Taking a 'responsive design approach

means that your site will be optimised

for all potential screen dimension.

This offers a degree of future proofing

of device screen size.

There is a degree of extra complexity in

this approach which will often be
reflected in development time scales
and, ultimately, cost.

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

4. Web App
Typically built with HTML5, CSS3 and

JavaScript
Web apps will work on any device that uses
a modern mobile web browser making
them universal; cross platform
applications.
This reduces development costs.
Limited in functionality and user
experience to what can be provided within
a browser
Your app will be unable to use device
specific technologies (such as the camera)
or harness the devices native user
experience
Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

5. Native App
You can take advantage of the vast

array technology buried in the mobile

device; compass, gyroscope, storage
(offline and cloud), Near Field
Communications (NFC), and the
camera

Allowing you access to the native UX

controls.

Native apps are not cross platform.

These two factors combine to make this
the most costly option in terms of both
time and budget.

The app. A bite sized piece of software that enables you to define the
specific content and functionality for the user in their context.
Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

App or Not to App?

Native or Web?
Which one should we go for?

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Which One is Right for Me?

Do you need an app?
You need an app, but who is it for?
Native or Web?
Who is your users anyway?
You dont need an app. Are you responsive or
adaptive?
Developing a fully responsive website can be

expensive and time consuming

Responsive is also a great way to future proof your
website for devices that emerge over the coming years
Understand your audience, their context (how, where,
and when do they access your content or service),
and what you want to achieve

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Pull or Push
Apps have two options for engagement
pull technology or push notifications.

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Pull Technology
Pull technology is when a request for the

transmission of information is initiated by the

receiver or client, [Wikipedia].
The earliest form of this type was email or faxes. Now,

users pull information when searching for an item on the

web, on an application or on a website.

HTTP Requests (AJAX or Non-AJAX)

RSS Feeds
POP3

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Push Technology
Push, or server push, describes a style of Internet-

based communication where the request for a given

transaction is initiated by the publisher or central
server [Wikipedia]
HTTP Server Push
Pushlet
Long-polling
Flash XMLSocket Relay

Despite push technologys recent popularity, the question is not whether the push
model is superior to the pull model, but rather when to use one rather than the
other
Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

To Pull or To Push?
Pull Technology
Pull marketing can be more
cost-efficient

Pull marketing only works

and maintains its costefficiency

Pull messages are sent only

upon request

The investment in this type

of marketing is minimal

Might lead to ineffective

power and bandwidth usage

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Push Technology
Push marketing is invasive
Push marketing creates
demand

Many users resent unsolicited

notifications

Up to 5% of free mobile apps

use malicious advertising that

can hijack a users phone and
steal contacts information

May lead to efficient power and

bandwidth usage

Cross Platform
Application Development

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Multiplatform Application
OutSystems

Python

Unity

MonoTouch

OpenPlug

Codename One
Mendix
Ubuntu Touch
Firefox OS
WebOS
Apache Cordova
DragonRAD
Mono
Blackberry
NME
Appcellerator
Smartface
Aqua
QT SDK
Lazarus
Android Windows Phone
Metismo
Tyzen
Stencyl
Unity
RareWire
iOS
SDK
DSI
M2Active
MobiOne
Meme IDE
RhoMobile
Java
Adobe AIR
Appception
Windows Mobile Java ME MoSync
.NET Compact Framework
PalmOS
SenchaTouch
KonyOne

ViziApps

IBM Worklight
Corona SDK

Marmalade
Symbian

Convertigo Mobilizer MEAP

BREW

MIT AppInventor Open MEAP

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Macromedia FlashLite

WebORB

GeneXus

PhoneGap

Device or Application Centric

The device-centric approach

Adapting the application to the UI model provided in the

device.
Easy for the user to understand the application.
In case the current platform does not support the UI
functionality of the said application, the cost of development
will be very high and the app might still not function.

The application-centric approach

Application would be developed in such a way as to have the

very same look and feel across diverse platforms.

This approach could create serious problems, the app may
not at all fit the underlying device user interface model.
The entire end-user experience would be severely affected. Of
course, this approach would work very well for applications
that are consistent with the underlying device model.
Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

How Do I Plan It Out?

Understand the environment
Take into account the main objectives that the brand will stand

for, ways to tackle the multiple obstacles that are bound to come
in the way and the kind of consumers you want to be targeting.
This process will take time, effort and patience. Once this is done,
you can proceed ahead with the next step.

Decide on relevant sphere

Decide in which sphere your brand will be most useful to

customers. Once you have set your target, you will want to
determine which deployments would be most relevant as per
consumer needs.
This will help you out with time management and control your
budget.

Sketch out a proper plan

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Tools for Multi-Platform Mobile

App Development
Rhomobile, a framework by Motorola that

uses Ruby programming language

PhoneGap, is an FOSS environment that
allows developers to create apps that uses
standard web development languages such
as HTML and JavaScript.
Appcelerator, aids the development of
native mobile, tablet and desktop apps
that uses HTML, PHP, JavaScript, Ruby and
Python
MoSync, offers the developer integrated
compilers, libraries, runtimes, device
profiles and other useful tools. Support for
JavaScript, PHP, Ruby, Python and now
includes Eclipse-based IDE for C/C++.
Many more

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Quiz Time!

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Quiz
Mentions 5 mobile application examples for each of
the following application functions!
Games
Photography
Social Media
Photography
Mentions at least 5 different platforms that
supports mobile application development.

Answer both questions in 5 minutes!

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya

Any Questions?

Grazias

Danke

Kiitos

Gratias

Terima Kasih

Merci

Thank You