4. Web/Mobile Developer since the late 1990s
Interested in: Java, CFML, Functional
Programming, Go, JS, Mobile, Raspberry Pi
!
I’ve already showed you where I live :)
Me
5. - Some jQuery Mobile basic concepts
- Architecture considerations and dealing with
your application & backend data
- Can I use Responsive Design with jQM?
- Device troubles and how to approach them
- The issues with plugins and widgets
- Other, unsorted bits and pieces
Agenda
8. jQuery Mobile
Framework for developing portable, mobile
websites or web applications, mobile apps or
desktop apps.
!
Builds on top of the jQuery framework
!
Leverages semantic HTML5/CSS3 and JS
10. jQuery Mobile
Cross-Mobile Platform (i.e. mobile operating
system)
!
Cross-Browser
!
Optimised for touch but also provides support
for mouse cursor
11. jQuery Mobile
1 .js file,1-many .css files and some images
!
Minified and/or Structure-only versions
!
Custom download packaging
!
12. 2 interesting and very different examples
http://c.dric.be
http://m.stanford.edu
!
!
!
Discuss!
15. Some (good?) scenarios for jQM
Existing site and you want a mobile “view”.
!
Existing site and you want a mobile web app
complementing it.
!
You’ve got an awesome idea for an app and want
to leverage your web skills to build a mobile app
for an app store.
19. Be aware though
If you only have a hammer in your toolbox, every
problem looks like a nail
20. Some (bad?) scenarios for jQM
You want to build a casual game app. (maybe use
Flash/AIR and compile to native app)
!
You want to build a game app using some 3D
rendering and lots of heavy maths. (go native)
!
You want a 100% “real and beautiful and
awesome and perfect and...” native experience
(go native)
21. Be aware EVEN MORE
Let’s get back to jQuery Mobile:
!
- Widgets
- Page Management
- History Management
- Event Management
!
What’s missing here?
22. The need for another (data) framework
If you decide to build a Single-Page-App you
most likely want to have another framework
involved:
!
- AngularJS (careful, known issues)
- Knockout or Backbone
!
Also worthwhile having a look at - structuring
your app with RequireJS.
26. Device detection
In all seriousness - you’re trying to swim against
the stream if you try device detection on your
own.
!
- External services that help you (WURFL)
- Do not do it unless you really have to*
!
* For instance mobilising a legacy app and
creating a different “default” views: phone, tablet,
desktop
29. A problematic device detection example
User complains they always end up on the
mobile web app even though they’re using
Firefox on a Mac - obviously client couldn’t
reproduce it.
!
Screen sharing session with the user all of a
sudden makes them realise that he’s using a
reallly old Mac (PowerPC architecture, not Intel).
Guess what, his user agent contained “PPC”...
31. Urban myth:
jQuery Mobile and RWD don’t work together
!
!
They do - but maybe differently from what
you’d expect after having done pure-RWD
without any mobile UI framework.
33. Myth explanations
An early beta version of jQuery Mobile had
“Media Query Helper Classes” that were
removed.
!
Instead: use CSS3 Media Queries
!
It’s absolutely feasible to use RWD on the global
design level.
34. RWD on global design level
Quick demo of using RWD to render different
part of a jQuery Mobile UI depending on
viewport sizing.
35. RWD-enabled components
All jQuery Mobile components are flexible re
their width and can work in a responsive
context.
!
Since jQM 1.3.x, some UI widgets explicitly
support internal RWD-behaviour:
Grids, Reflow Tables & Column Toggles, Panels
47. Animations and Transitions
Transitions are seriously broken on Android 2/3
devices. Still in some instances on Android 4.x devices.
!
Good solution: switch them off!
!
$( document ).bind( "mobileinit", function (){
var userAgent = navigator.userAgent.toUpperCase();
if (userAgent.indexOf('IPHONE') == -1 &&
userAgent.indexOf('IPOD') == -1) {
$.mobile.defaultPageTransition = 'none';
}
});
50. Loading scripts
Every page should contain custom css, global
scripts, headers, footers etc.
!
Some overhead - but SOME user will be on a
phone where JS is locked away or running a basic
feature phone etc.
!
Don’t assume that the user has the latest and
greatest and give jQuery Mobile the option to
provide an appropriate fallback.
53. Switching between mobile and …
If you switch me between the mobile, tablet and
desktop version of a site, there is no parallel
universe in which I wouldn’t want to end up on
the equivalent page of where I’ve been before.
!
Note:That can be surprisingly hard in a Single-
Page-App.
55. Labels
jQM automatically truncates your labels.
!
Very cool and useful - not that great if you have
a site with 15 languages, including Hebrew and
Arabic and dynamic labelling.
!
It can be switched off via CSS - but it depends
on the version one’s on.
56. The power of grids
I seriously think grids and blocks are the most
under-leveraged features in jQuery Mobile.
!
<div class="content" data-role="content">!
! <div class="ui-grid-a">!
! <div class="ui-block-a">I'm the grid element content on the left</div>!
! <div class="ui-block-b">I'm the grid element content on the right</div>!
! </div>!
!
! <div class="ui-grid-a">!
! <div class="ui-block-a"><div class="ui-bar ui-bar-e">I'm the grid element content on the left</
div></div>!
! <div class="ui-block-b"><div class="ui-bar ui-bar-b">I'm the grid element content on the right</
div></div>!
! </div>!
!
! <div class="ui-grid-a">
! <div class="ui-block-a"><button type="submit" data-theme="c">Submit</button></div>
! <div class="ui-block-b"><button type="cancel" data-theme="e">Cancel</button></div>
! </div>!
</div>!
!