mobile web development ppt
TRANSCRIPT
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