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