Mobile Web Development

Types of Mobile Applications

Native Application Web Applications Hybrid Applications

Native Application

Native mean applications that are written specifically for a particular type of mobile

device.

Pros of native apps:

They offer a best-in-class user experience, offering a rich design and tapping into device

features and offline use

You can charge for applications.

User can download and install your app.

Cons of native apps:

You have to use different platforms, SDK’s, languages for different mobile platforms.

They require certification and distribution from a third party that you have no control over.

They require you to share revenue with the one or more third parties.

Developing, testing, and supporting multiple device platforms is incredibly costly.

Web Applications

Web apps reside on sever and there is no need to install or download the apps. It just a web page optimized for mobile devices. Web Apps can be written in HTML, CSS and javascript.

Pros of web apps:

You can use simple HTML, CSS and JS for most of the mobile platforms.

You can maintain and fix bugs in real time.

Cons of web apps:

You cannot access all hardware functions of mobile devices.

The difference between native and Web application can be very easily seen in the above image.

Architecture

Progressive Enhancement

It defines layers of compatibility that allow any user to access the basic content, services and functionality of a web and providing an enhanced experience for browser with better support of standards.

• Basic content is accessible to all browsers.

• Basic functionality is accessible to all browsers.

• Semantic markup contains all content.

• Enhanced layout is provided by externally linked CSS.

• Enhanced behavior is provided by unobtrusive, externally linked JavaScript.

Emulators and Simulators

An emulator is a desktop application that emulates mobile device hardware and a mobile operating system, allowing us to test and debug our applications and see how they are working.

A simulator is a less complex application that simulates some of the behaviour of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators.

An up-to-date list of emulator download URLs can be found at http://www.mobilexweb.com/go/emulators.

Standards

CSS compatibility

JavaScript Compatibility

Viewport

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

Icons

Images

Using images effectively

Use images in XHTML only for logos, photos, and maps. Compress the images with normal web image methods. Define the width, height, and alternative text for every image. Use data URIs for small images whenever possible. Leave icons, buttons, backgrounds, and visual alert images for CSS.

Document download Compatibility table

Mobile Web App development Stages

Design Phase

Selecting the Framework

Targeting group of devices and supported platforms

Testing the Web App on Emulator

Mobile Web Design

As we can see , the context is king on the mobile web

Mobile Web App development Frameworks

Why chose framework?

The framework’s provide many ready to use themes that make the Web App look native

The Framework recognizes various tap events, hence allowing for mapping functions to each event.

List of Supported devices

It is virtually impossible to target all the devices. The devices can be categorized depending upon the web app to be

developed.

Ability to make Native calls

Making a call

<a href="tel:+1800229933">Call us free!</a>.

Sending an SMS

<a href="sms://+3490322111?body=Interested%20in%20Product%20AA2">More info for producto AA2</a>

Mobile Web Best Practices

Navigation bars at the top should be minimized

Empty spaces and spacer images should be avoided.

Style sheets should be added only if device supports CSS and the loading time should be considered as well

Input field can be replaced by set of clickable items.

Frames should be avoided.

Testing on Emulators

Once the web app is developed, the next step is to host it and test it on the emulator

The android emulator is most commonly used.

There are online simulators as well:-

Testiphone.com Ipadpeek.com

Android Emulator

THANK YOU