jQuery mobile

Pascal Naujoks | [email protected] | November 2011

Framework for building mobile Websites

Mission: Compatibility, accessibility and usability

Image taken from the flickr Stream of the filamentgroup:http://www.flickr.com/photos/filamentgroup/sets/72157625318352332/

Full jQuery Mobile Browser Support List: http://jquerymobile.com/gbs/

Mission: Compatibility, accessibility and usability

High market share Supports media queries Actively tested

Low market share Supports media queries Tested sometimes

Does not support media queries

No jQuery at all Fallback to simple HTML and

CSS

Ressource: http://jquerymobile.com/original-graded-browser-matrix/

Incredients

Incredients

Semantic WAI ARIA Input-types data-roles …

Borders Shadows Round corners Gradients …

… all the magic!

Page and code structure

<body>

</body>

Application structure

Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh tellus, vel malesuada sapien. Mauris eget nunc ligula, condimentum mattis velit. Vivamus erat augue, consectetur id malesuada vitae, dignissim ac dui. Ut eu nisi lorem. Donec id lacus mauris. Named sed lacus di ninc…

<body>

</body>

Page 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Page 2

Phasellus at justo augue. Sed sit amet lorem risus. In lacus ipsum…Page 3

Praesent et magna sit amet eros bibendum imperdiet…

RegularjQuery Mobile


Page

Header

Page Title

Content

Page content goes here

Footer

Page Footer

Say Hello, but be nice and semantic!

Say Hello, but be nice and semantic!

Some nice comparisons about jQuery Mobile VS. Sencha Touch:• http://tysonlloydcadenhead.com/blog/jquery-mobile-vs-sencha-touch• http://www.the4thdimension.net/2011/07/sencha-touch-vs-jquerymobile.html

data-role="page"

data-role="header"

data-role="content"

data-role="footer"

data-role="navbar"

data-role="controlgroup"

data-role="button"

data-role="list-divider"

data-role="listview "

…

data-rock-n-roll

data-transition="pop "

data-position="fixed"

data-rel="dialog"

data-title="Page Title Foo"

data-prefetch="true"

data-url="foo.html"

data-theme="b"

data-fullscreen="true"

data-icon="delete"

…

Overview (since 04.11.2011) at: http://jquerymobile.com/test/docs/api/data-attributes.html

data-rock-n-roll: Buttons

data-rock-n-roll: Listviews

data-rock-n-roll: Form elements

data-rock-n-roll: Form elements

NoScript? NoProblem!

Theming

Theming with… wait… Swatches?!

The ThemeRoller strikes back!

Available (since 28.10.2011) at: http://jquerymobile.com/themeroller/

Presenting www.jqmgallery.com

Firebug > Photshop

Events

For the „App-Feeling“: Touch events

Images taken from the „Open Source Gesture Library“ of http://gestureworks.com

tab tabhold

swipe swipeleft swiperight

scrollstart scrollstop

Responsive design

orientationchange portrait landscape

Great simulators for • iPhone: http://www.testiphone.com/• iPad: http://alexw.me/ipad2/#!safari

… for me how still doesn‘t own one of these

http://alexw.me/ipad2/#!safari

Loading...

<body>

</body>

Page 1


Page 2

Phasellus at justo augue. Sed sit amet lorem risus. In lacus ipsum…

•page

beforechange

•pagec

hange

•pagechangefailed

Loading...

<body>

</body>

Page 1


Page 2

Phasellus at justo augue. Sed sit amet lorem risus. In lacus ipsum…

•pagebeforeload

•pageload

•pageloadfailed

Page 3

Praesent et magna sit amet eros bibendum imperdiet…

Amherst College - https://www.amherst.edu/mobile/ Austin Peay State University - http://m.apsu.edu/ Baylor University - http://m.baylor.edu/ Bellarmine University - http://m.bellarmine.edu/ Butler University - http://www.butler.edu/mobile/ Cal State Monterey Bay - http://m.csumb.edu/ Columbia University - http://m.columbia.edu/ Dallas Theological Seminary - http://mobile.dts.edu/ Delaware Valley College -

http://www.delval.edu/mobile Eastern Washington University - http://m.ewu.edu/ EckerdCollege - http://m.eckerd.edu/ Edison State College - https://www.edison.edu/m/ Fort Lewis College -

http://explore.fortlewis.edu/mobile/ George Fox University - http://m.georgefox.edu/ Hamilton College -

http://www.hamilton.edu/mobile/index.html Hampden-Sydney College - http://m.hsc.edu/ Harding University - http://mobile.harding.edu/ Houghton College - http://m.houghton.edu/ Indiana University - https://m.iu.edu/kme-prd/home Istanbul Bilgi University SIS / Turkey -

https://register.bilgi.edu.tr/m Istanbul Bilgi University BilgiOnline / Turkey -

https://register.bilgi.edu.tr/mdl Kankakee Community College - http://m.kcc.edu/

Not enough? Kennesaw State University - http://m.kcc.edu/ Keuka College - http://m.keuka.edu/ Lawrence Technological University - http://m.ltu.edu/ Lehigh University -

http://www4.lehigh.edu/mobile/default.aspx Lynchburg College - http://m.lynchburg.edu/ Mary Baldwin College - http://www.mbc.edu/m/ Marywood University - http://mobile.marywood.edu/ Mount Olive College - http://m.moc.edu/ Pennsylvania State University World Campus -

http://m.worldcampus.psu.edu/ Pittsburg State University - http://m.pittstate.edu/ Providence College - http://m.providence.edu/ St. Mary's College of Maryland -

http://mobile.smcm.edu/ St. Olaf College - http://m.stolaf.edu/ Stanford University - http://m.stanford.edu/ University of Florida - http://m.ufl.edu/ University of Michigan - http://m.umich.edu/ University of North Texas - http://m.unt.edu/ University of Scranton - http://m.scranton.edu/ University of South Florida - http://m.usf.edu/ University of Southern Mississippi - http://m.usm.edu/ Vanderbilt University - http://m.vanderbilt.edu/ Wayne State University - http://mobile.wayne.edu/ Weber State University - http://m.weber.edu/ West Chester University - http://m.wcupa.edu/ List created by Dave Olsen

(https://twitter.com/#!/dmolsen/status/126680771254681600) on 19.10.2011 then filed at https://github.com/jquery/jquery-mobile/wiki/Sites-built-with-jQuery-Mobile

https://www.amherst.edu/mobile/

http://m.apsu.edu/

http://m.baylor.edu/

http://m.bellarmine.edu/

http://www.butler.edu/mobile/

http://m.csumb.edu/

http://m.columbia.edu/

http://mobile.dts.edu/

http://www.delval.edu/mobile

http://m.ewu.edu/

http://m.eckerd.edu/

https://www.edison.edu/m/

http://explore.fortlewis.edu/mobile/

http://m.georgefox.edu/

http://www.hamilton.edu/mobile/index.html

http://m.hsc.edu/

http://mobile.harding.edu/

http://m.houghton.edu/

https://m.iu.edu/kme-prd/home

https://register.bilgi.edu.tr/m

https://register.bilgi.edu.tr/mdl

http://m.kcc.edu/

http://m.kcc.edu/

http://m.keuka.edu/

http://m.ltu.edu/

http://www4.lehigh.edu/mobile/default.aspx

http://m.lynchburg.edu/

http://www.mbc.edu/m/

http://mobile.marywood.edu/

http://m.moc.edu/

http://m.worldcampus.psu.edu/

http://m.pittstate.edu/

http://m.providence.edu/

http://mobile.smcm.edu/

http://m.stolaf.edu/

http://m.stanford.edu/

http://m.ufl.edu/

http://m.umich.edu/

http://m.unt.edu/

http://m.scranton.edu/

http://m.usf.edu/

http://m.usm.edu/

http://m.vanderbilt.edu/

http://mobile.wayne.edu/

http://m.weber.edu/

http://m.wcupa.edu/

It‘s going to be BIG

Conclusion

Wrap-Up

Quickly built usable and accessible sites for all kind of mobile devices

Very easy to learn Known jQuery based framework Great and huge community Expandable with plugins and

themes Very lightweight (31KB for jQuery

+ 24KB for jQuery Mobile) compared to other frameworks

No f****ng Appstore or something when you build “Apps” with jQuery Mobile

Use your existing and favorite IDE, Repository, etc. for building sites with jQuery Mobile

Does not use new HTML5 semantic tags (<div data-role=“header“> instead of <header>)

No 100% complete HTML – only fallback without enabled JavaScript

IMHO a bit too addicted to the “Apple-Lock”

Not quite as fast as native Apps Limited capabilities (DOM-Size

etc.) Still beta with some bugs

As always: It depends…

Pascal Naujoks [email protected]

Usage rights:

http://creativecommons.org/licenses/by-nc-sa/2.5/

Sincerely, your jQuery fanboy…

Comic taken from http://xkcd.com/869/Don‘t fall into this!

jQuery mobile

Lifestyle

Transcript of jQuery mobile