DIY Mobile Apps Using Web Technologies

Afnan AlSubaihin

iwan.ksu.edu.sa iwan@ksu.edu.sa @iwan_rg

Islamic
Applications

Web
Technologies

Arabic NLP

What are Mobile Web Apps? Why Use Mobile Web Apps?
Mobile Web Design Best Practices Mobile Web Development Technologies

People LOVE their mobile phones

People LOVE their mobile phones

Remember when mobile phones were only for making phone calls?

Mobile Phone Features

Data Storage Capability GPRS Camera Web Connectivity Touch Screen

GPS & Location Awareness

Enhanced Processing Power

Accelerometers

Mobile Phone Platforms

Types of Mobile Applications

Native App
Web App

Types of Mobile Applications

Types of Mobile Applications

Develop once, deploy everywhere

Every manufacturer has its own IDE/PL Cant access all device features Better control over the hardware Browser Download/install Cheap Expensive Can be the same as the web site Must develop from scratch Easy to update User must agree to install the update Scattered over the web Appstore/Marketplace (insures quality of apps)

Types of Mobile Applications

Types of Mobile Applications

Does the mobile app require the use of any special device features?
Whats my budget? Does the mobile app need to be Internet-enabled? Do I need to target all mobile devices or just certain devices? What programming languages do I already know? How important is speed and performance? How will this app be monetized effectively?

Why Use Mobile Web Apps?

You are familiar with web development (HTML5, CSS3, JavaScript, server-side) You want to overcome fragmentation of mobile platforms You dont want to use hardware-specific features of the device. You want agility and less costs

Shortcut..
You already have a website? Make it responsive! * * There are many ways to create
responsive web design Mainly using Media

Queries

Responsive Web Design

Same code: Displays differently according to the device.

Responsive Web Design

Activity: Go to * http://www.antarcticstation.org/

Why Use Mobile Web Apps?

Sometimes, a native app is better. Provide Web based alternative anyway!

Why Use Mobile Web Apps?

HTML 5, CSS3, JavaScript, Server-side Are very powerful with many capabilities
Audio and

Offline
Storage Editable Content Animation
Geolocation API

Video Support

Canvas Graphics
Video
Streaming

Forms 2.0 (Form Place Holders)

Refined Typography

Mobile Web Design Best Practices

How to design? Whether you are..

Building from scratch

i.e. chose a mobile web app over a native app

Turning a Website into a mobile web app

Responsive design Both have the same functionality

Mobile Web Design Best Practices

Mobile Web App Usage Behavior Content and Navigation Action and Interaction Input
Layout

Mobile Web Design Best Practices Usage Behavior

Lookup/Find
(urgent info, local) I need an answer to something now frequently related to my current location in the world.

Mobile Web Design Best Practices Usage Behavior

Explore / Play
(bored , Local)

I have some time to kill I want a few idle time distractions.

Mobile Web Design Best Practices Usage Behavior

Check in / Status
(repeat , micro-tasking)

Something important to me keeps changing or updating I want to stay on top of it.

Mobile Web Design Best Practices Usage Behavior

Edit / Create
(urgent change/microtasking)

I need to get something done now that cant wait.

Mobile Web Design Best Practices Usage Behavior

Edit / Create
(urgent change/microtasking)

I need to get something done now that cant wait.

Mobile Web Design Best Practices

Content and Navigation
Content, content, content! Content first, navigation second!
N

Mobile Web Design Best Practices

Content and Navigation
Where to place your navigation
Top navigation
Quick Access

Bottom Navigation
Near and Comfortable

Side Navigation
Must be collapsible

Mobile Web Design Best Practices

Content and Navigation
*

Mobile Web Design Best Practices

Content and Navigation
Comfortable clicking zone *

Mobile Web Design Best Practices

Content and Navigation
Remember!
Minimize your navigation elements. Hide it when possible. Buttons Vs. Links

Horizontal Vs. Vertical

Focus on the task at hand When the user opens my app, what does he/she want exactly?

Mobile Web Design Best Practices

Action and Interaction
Common Interaction Methods:
Multi-Touch Screen Trackball Stylus Other HW buttons (Back button in Android devices)

Pay special attention to:

Size of buttons and clickable content (44x44 px)

Mobile Web Design Best Practices

Input
Always try to minimize user input.

Use inline labels to save space.

Placeholders in HTML5

Mobile Web Design Best Practices

Layout
The most user friendly layout for mobile content:
*

One Column!
Horizontal Scrolling

Mobile Web Design Best Practices

Layout
The most user friendly layout for mobile content:
*

One Column!
Horizontal Scrolling

Mobile Web Design Best Practices

Layout
*

Another Approach:

Icon grids

Lets Start Designing!

Think about:

Information Architecture Clickstream Wireframe the Layout

Lets Start Designing!

Information Architecture

Lets Start Designing!

Information Architecture

Lets Start Designing!

Clickstream

Lets Start Designing!

Wireframes and Prototypes

Lets Start Designing!

Activity - Worksheet

Mobile Web Development Technologies

IDEs

Helper Tools and Frameworks

Programming Languages

Mobile Web Development Technologies

Mobile Web Development Technologies

Kendo UI, a division of Telerik, surveyed 4,043 software developers in the period between September 5th and September 26th of 2012 regarding their usage, attitudes and expectations surrounding

HTML5

and its adoption for mobile development initiatives.*

Mobile Web Development Technologies

Mobile Web Development Technologies

Start building HTML5 files NOW
HTML 4.01 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

Mobile Web Development Technologies

New structural tags Video and Audio tags.

Canvas Graphics
Forms 2.0

Mobile Web Development Technologies

<input type="datetime">

<input type="text" list="list"> <datalist id="list"> <option value="Mr"> ... </datalist> <input type="number"> <input type="range"> <input type="url"> <input type="email">

And many more

Mobile Web Development Technologies

<input type="datetime">

Mobile Web Development Technologies

Minimum and Maximum Values
<input type="range" min="20" max="80">

MaxLength for textarea

<textarea maxlength="2000"></textarea>

Required Fields
<input type="email" required>

Regular Expressions
<input type="text" pattern="[A-Za-z0-9_\-]+">

Mobile Web Development Technologies

Integrated APIs
Offline Application API Inline Editing API Drag & Drop API

Associated APIs
Geolocation API: builds location-aware applications Web Storage API: stores data locally

Mobile Web Development Technologies

Easy to learn HTML5 !

http://diveintohtml5.info/

w3schools.com/html/html5_intro.asp

Mobile Web Development Technologies

Activity Start Coding!

Start Coding
Youll need a mobile emulator

(http://www.mobilephoneemulator.com/)

Or drag and drop

http://jquerymobile.com/
http://www.codiqa.com/builder/demo

Lets admit: A native app is much cooler! Faster penetration among users - Better Discovery Monetization

The Best of Both Worlds!

Code using Web Technologies Package and Deploy as a native app

PhoneGap Build build.phonegap.com

Widgets.. The new best thing?

Package .html .css .js files as a one app (.WGT)
Add a config.xml file to guide the OS on how to operate the app The app is universal and runs on all devices The runtime environment is like a browser but without the controls. W3C Specification: http://www.w3.org/TR/widgets/

Standardized.. But not yet adopted

Sample of a config.xml file:

To start building Widgets, you can follow the WAC

specification using the WAC SDK: https://www.wacapps.net To Run Widgets on your device: You must have a runtime environment that supports WAC specification

Finally..
You know the difference between a native app and a web-based mobile app. You know when to choose either.. You learned about responsive design You know how to design for mobile phones Youve seen a glimpse of HTML5, CSS3, JS APIs capabilities You know how to package your mobile web app as a

native app.

Thank YOU!
@afnantweets
aalsubaihin@ksu.edu.sa