Mobile Technologies - Personal World Wide Web Pagesbcf.usc.edu/~trinagre/itp140/lectures/ITP140_AppTypes.pdf · Intel XDK • Create HTML5 apps and deliver them to multiple app stores

Mobile Technologies

TechTypes

ofApps

What is mobile?• Devices and their capabilities• It’s about people• “Fundamentally, ‘mobile’ refers to the user,

and not the device or the application.”– Barbara Ballard, Designing the Mobile User

Experience• People use mobile apps when they are

mobile– Anywhere and everywhere

Types of Apps• Types of mobile apps based on technology

used to develop– Native Mobile App– Web Mobile App– Cross-Compiled (Hybrid) App

Native Apps• Native App

– Built specifically for a given platform– Is installed on the device much like a desktop

application– Available via a platform-specific app

marketplace• Google Play• Apple’s App Store

Native Apps• Pros

– Better performance– Access to all device features, immediately– Usually the best user interface and user

experience• Cons

– Rewrite client for every platform, costly– Have to deal with operating system/platform

fragmentation on your own

Web Apps• Web App

– Accessed on the Web via the device’s browser– A website that offers app-like functionality– Use HTML 5, CSS 3, & JavaScript– Do not need to use an app store– Put on a web server & everyone can access

• Cons– Performance– Have to have an Internet connection

Web Apps as Icons• Open a web browser on your mobile device.• Enter a web address such as dominos.com.• Tap the Share button on the bottom menu

bar.– It's a box with an up arrow.

• Tap on the Add to Home Screen option.• Tap the Add button in the top right-hand

corner.

Example

Mobile Websites• Smaller screens• Different input such as touch screens• Always with us and always on

– Important updates can be sent as text messages instead of emails

• Images and video– Cameras

• GPS– Localized content

• PC Integration• Responsive Web Design

Responsive Web Design• Uses "media queries" to figure out what

resolution of device it's being served on– Flexible images and fluid grids that size

correctly to fit the screen– Example: You see a layout shrink from three

columns (PC),to two columns(tablet), to asingular column(mobile phone)of content

Responsive Web Design• Same source code

– The code contains these "media queries" to change the display

• It's an increasingly popular option for companies that are looking to move into mobile, but that lack the budgets to support separate apps for each mobile platform and without the needs of something more complex such as a mobile web app

Responsive Web Design• Examples:

– http://webdesignledger.com/inspiration/21-fresh-examples-of-responsive-web-design

• 2013 is the Year of RWD– http://mashable.com/2012/12/11/responsive-

web-design/

Adaptive Design• Also detect device functionalities

– On touch devices, for instance, we enable swiping between columns

– Technically, may be referred to as "adaptive design" rather than "responsive"

Statistics• For the first time since 2001, PC sales are

projected to be lower than they were in the previous year

• Tablet sales are expected to exceed 100 million this year

• The majority of U.S. mobile subscribers now own smartphones, not feature phones

• Today, 30% of Mashable's traffic is mobile– By the end of next year, this may exceed 50%

• 2013 Is the Year of Responsive Web Design

Target• Web App • Native App

NativeApp

WebApp

NativeApp

WebApp

Native vs. Web

Device Access Speed Development

Cost App Store Approval Process

Native Full Very Fast Expensive Available Mandatory

Web Partial Fast Reasonable Not Available None

Websites• How can I tell if a site uses RWD?

– Look at a site on a laptop/desktop computer using a web browser and compare it to the same site on a mobile device.

Is the website RWD?• RWD

– The URL (web address) is the same on the laptop/desktop computer and the mobile device.

– The site on the mobile device looks good and is easy to read.

– The links on the site on the mobile device are easily touchable.

• Not RWD– The URL (web address) does not change and the site

looks small or need to scroll/pinch on mobile device.– The URL (web address) changes and the site looks

good on the mobile device.• Example: URL on laptop/computer is domain.com, and URL on

mobile is mobile.domain.com.

Cross-Compiled Apps• Cross-Compiled (or Hybrid) App

– Use a tool to create native apps and/or web apps

• Pros– Cross platform– Tools

• Cons– Additional cost of integrating 3rd party SDKs– Larger download size– Performance

Cross-Compiled Tools• Examples:

– PhoneGap– Cordova– Intel XDK– Appcelerator– Titanium– Trigger.io– Xamarin– Unity

PhoneGap

PhoneGap• This platform is the most widely used non-

Android-SDK framework.• This a cross-platform, open source project

aiming to make everyone able to write their applications using the familiar HTML, CSS, JavaScript combination, and to port it on three major mobile platforms.

• Adobe’s PhoneGap Build platform provides support for compiling the programs into native codes for each of the devices.

• http://phonegap.com

Apps Using PhoneGap• http://phonegap.com/app/

Cordova• Apache Cordova is a set of device APIs that

allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript.

• Combined with a UI framework such as jQuery Mobile or Dojo Mobile or SenchaTouch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

• https://cordova.apache.org

Apps Using Cordova• NewVo

• Pacifica

• FanReact

• JustWatch

• Gudog

• ReactEurope

Intel XDK• Create HTML5 apps and deliver

them to multiple app stores andform factors.

• Contains built-in design, debug,and build tools, plus 100's ofCordova APIs

• Easier build, faster deployment - write for one, publish to all multi-OS app stores

• https://software.intel.com/en-us/intel-xdk

Appcelerator• Everything you need to create great, native

mobile apps – all from a single JavaScript code base.

• Mostly used in enterprisesand on cloud platforms.

• http://www.appcelerator.com

Apps Using Appcelerator

Titanium• Create native, hybrid, or mobile web apps across all

platforms from a single JavaScript code base.• Award-winning Titanium allows you to deliver an

immersive user experience at a fraction of the time, but with the same results, of native platforms.

• JavaScript-based SDK with over 5,000 APIs for iOS, Android, Windows, Blackberry and HTML5

• Use web development skills to quickly build rich, fully native mobile apps and leverage any native platform API.

• Reuse 60%–90% of code when supporting multiple platforms

• http://www.appcelerator.org/#titanium

Trigger.io• Build native mobile apps for multiple

platforms from a single codebase.• You write your HTML5 code using the Forge

JavaScript API which gives you access to native features such as the camera and contacts API.

• Our cloud build service does the rest to create your native apps for iPhone, iPadand Android.

• https://trigger.io

Apps Using Trigger.io• https://trigger.io/examples/

Xamarin• Xamarin apps share code across all

platforms.• Target iOS, Android, Windows and Mac with

a single, shared C# codebase.• Use the same language, APIs and data

structures on every platform.• http://xamarin.com

Xamarin Customers• http://xamarin.com/customers

Unity• Unity is a flexible and powerful

development platform for creating multiplatform 3D and 2D games and interactive experiences.

• It's a complete ecosystem for anyone who aims to build a business on creating high-end content and connecting to their most loyal and enthusiastic players and customers.

• https://unity3d.com

Made With Unity• http://madewith.unity.com

Examples• Games made with Unity:

– Temple Run– Bad Piggies– Angry Birds Epic– Jungle Rumble

• Games made with Corona:– Fun Run– Major Magnet– Blast Monkeys– The Lost City

Tech Types

Web App• RWD+Availability- Needs

Internet connection

Cross-compiled App• Tools+Creates web app

and native app (iOS, Android)

- Big download sizeNative App• App store• iOS, Android+ Performance+ UI/UX- Development

cost

Types of Apps – Business• From the business perspective, apps can be

divided into:– Those that are meant to directly generate

income• Income comes from charging for the app directly, in-

app purchases, and subscriptions, or less directly through advertising

– Those that are built for purposes of marketing, branding, or customer service• Usually solved with web apps

Designing Mobile Apps5 tips to keep in mind when designing and developing your mobile app, regardless of platform1. Native App or Web App

– Need a native app, mobile website, or both?– What format/s best suit your goals?– Do you already have a full-featured website?

• If the answer is yes, how many of those features are you looking to integrate into the app?

• If your app is going to be largely a re-creation of your website, you may want to focus on creating a mobile site first. Use Responsive Web Design!

5 Tips …1. Native App or Web App …

• Is this an app that can be used without an Internet connection? Some examples include note-taking or calculator apps. If so, a native app makes more sense.

• Are you going to be integrating with other parts of the mobile operating system, like the dialer, the GPS and the mail client? If this is the case, consider building a native app.

5 Tips …2. Consider Where Your App Will Be Used

– If used while walking around, want geo-location info– If used in a stationary spot, make sure that text is readable

3. Be Aware of Various Screen Sizes– Screen sizes and resolutions can vary based on device type– For a consistent look and feel across all devices, user

interface elements and graphics need to be scalable– Designing for iPhone 4's Retina Display

• http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml

– Android Developers Supporting Multiple Screens• http://developer.android.com/guide/practices/screens_support.html

5 Tips …4. Follow Existing UI Conventions

– User interface conventions– Sticking with consistent methods of displaying data

and interacting with content will make your app easier to pick up by end-users

– Apple’s iOS Human Interface Guidelines• https://developer.apple.com/library/ios/

– Android User Interface Guidelines• http://developer.android.com/guide/practices/ui_guidelines/index.html

– UI Guidelines for BlackBerry devices• http://docs.blackberry.com/en/developers

5 Tips …5. Design for Touch

– Mobile apps are going to be in someone’s hand– Designing your mobile app around touch and

ergonomics is very important– How do you hold your phone & where is your

thumb• That’s why many apps have main menus and selectors

at the bottom of the screen; content is near the top– Use physical or visual cues to show touch– Take advantage of gestures, pinching, etc.