Post on 07-Dec-2014
description
Pascal Naujoks | pn012@hdm-stuttgart.de | 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/
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
Application structure
Page
Header
Page Title
Content
Page content goes here
Footer
Page Footer
Application structure
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
Loading...
<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
beforechange
•pagec
hange
•pagechangefailed
Loading...
<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…
•pagebeforeload
•pageload
•pageloadfailed
Page 3
Praesent et magna sit amet eros bibendum imperdiet…
Demo
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
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 pn012@hdm-stuttgart.de
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!