Touching jQuery Mobile

By Hatem Ben YacoubDevDay.org Jeddah, February 27, 2011

@hatemhttp://hby.me

Hatem Ben Yacoub

Entrepreneur

Senior Systems Architect

IT Consultant

PHP expert & PHP 5.3 ZCE

e-Government specialist

Energy Engineer

Open Source evangelist

http://hby.me@hatem

Mobile ecosystem today

jQuery Mobile is

• Cross platform & Cross device• HTML5

• Touch optimized layouts• UI widgets

• Powerful theming framework• A-grade compliant WAI And more

…

Keep in mind that…

jQuery Mobile is an alpha project

α API might change, more features coming, … !

jQuery mobile is … “Light”

jQuery 29KB (minified and gzipped)

jQuery Mobile JS 17Kb (minified and gzipped)

jQuery Mobile CSS 7KB (minified)

jQuery Mobile images 10x4KB (compressed png)

This is already 29+17+7+40 = 93KB

jQuery mobile is … “Light”

jQuery Mobile 93KB

+Content +Images +Others…

= jQuery mobile application final size ?!

+Validation plugin

jQuery Mobile single page

jQuery Mobile embedded pages

Some Recommendation

Use short & clear forms

Error & Confirmation dialogs should be part

of the downloaded page

Error handling should be intuitive and visible

Mobile navigation workflow

validation

Open Form

Fill fields

Error

Confirmation

Next page

Sample registration and login page

More about jQuery Mobile

Page transitions

Dialogs, Buttons

Formatting content

Touch optimized form elements

List views

Events, themes…

http://jquerymobile.com

More Mobile technologies :

Titanium mobile : (HTML5/JS/CSS3…)http://www.appcelerator.com/products/titanium-mobi

le-application-development/

PhoneGap : (HTML5/JS/CSS)http://www.phonegap.com/

SenchaTouch : (HTML5/JS/CSS) http://www.sencha.com/products/touch/

Thank youDevDay.org

@hatemhttp://hby.me