Mobile Ajax Workshop
-
Upload
bryan-rieger -
Category
Design
-
view
113 -
download
0
description
Transcript of Mobile Ajax Workshop
![Page 1: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/1.jpg)
mobile ajaxor DHTML for the new millennium!
Informa Mobile User Experience Workshop: 16 November 2009
presented by Stephanie Rieger
![Page 2: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/2.jpg)
what is AJAX?
![Page 3: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/3.jpg)
AJAX creates desktop-like experienceson modern browsers using HTML,
JavaScript and CSS
![Page 4: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/4.jpg)
how the user perceives AJAX....
![Page 5: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/5.jpg)
fast, responsive applications
![Page 6: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/6.jpg)
adaptive interfaces
![Page 7: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/7.jpg)
smooth update of data
![Page 8: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/8.jpg)
no page reloads
![Page 9: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/9.jpg)
how it works
![Page 10: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/10.jpg)
AJAX used to be called DHTML
dynamic (JavaScript)
HTML
![Page 11: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/11.jpg)
modern AJAX addsa new dimension to DHTML
![Page 12: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/12.jpg)
AJAXasynchronous
JavaScript
XML
![Page 13: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/13.jpg)
“asynchronous events are those occurring independently of the main
program flow.“
![Page 14: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/14.jpg)
how traditional web sites work
![Page 15: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/15.jpg)
3. The server sends backa whole new page which includes the comments
2. A request is sent to the server
Server
1. The user clicksto view comments
4. The new page loads.The user can now see the comments.
![Page 16: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/16.jpg)
how AJAX sites work
![Page 17: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/17.jpg)
1. The user clicksto view comments.
3. The server (only) sends the comments back (in XML,
HTML or JSON format).
Server
2. A request is sent to the server.
4. JavaScript is used to update only the parts of the page
that need to change.AJAXscripts
![Page 18: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/18.jpg)
is that it?
![Page 19: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/19.jpg)
not completely....
![Page 20: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/20.jpg)
not all events and updates requireinteraction with the server
![Page 21: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/21.jpg)
JavaScript can also be used toadd, remove and/or manipulate
previously loaded content
![Page 22: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/22.jpg)
like this...
![Page 23: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/23.jpg)
1. The user clicksto close the comments.
2. A message is sent to the AJAX code telling it what
the user wants to do.
3. JavaScript is used to update the parts of the page that
need to change.
Interaction with the server isn’t needed this time becauseall the user wants to do is hide the comments.
AJAXscripts
![Page 24: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/24.jpg)
how is mobile AJAX different?
![Page 25: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/25.jpg)
in principle, AJAX on mobileis the same as AJAX on the desktop
![Page 26: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/26.jpg)
but...on mobile, AJAX functionalityand interactions are constrained
by the device
![Page 27: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/27.jpg)
different manipulation
models
smaller screen
![Page 28: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/28.jpg)
limited text input
![Page 29: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/29.jpg)
resource constraints
memory andprocessing speed
unreliable bandwidth
device andnetwork latency
![Page 30: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/30.jpg)
£££high data costs
![Page 31: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/31.jpg)
but...these constraintsalso present opportunities to
improve the user experience using AJAX
![Page 32: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/32.jpg)
![Page 33: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/33.jpg)
where is AJAX found on mobile?
![Page 34: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/34.jpg)
1. the mobile web
![Page 35: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/35.jpg)
AJAX is used throughout web sitesin a similar manner to the desktop web
![Page 36: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/36.jpg)
2. widgets
![Page 37: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/37.jpg)
widgets are applicationscreated using web technologies
(HTML, CSS, JavaScript)
![Page 38: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/38.jpg)
widgets are not new
Apple Dashboard widgets
Yahoo widgets
![Page 39: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/39.jpg)
on mobile, they are typicallyimplemented as....
![Page 40: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/40.jpg)
idle/home screen widgets
![Page 41: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/41.jpg)
standalone apps
bespoke icon multi-view standalone application
![Page 42: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/42.jpg)
3. hybrid apps
![Page 43: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/43.jpg)
hybrid apps do not use AJAX per se
![Page 44: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/44.jpg)
hybrid applications combine features ofnative applications and web pages
e.g. JAVA, C++, Objective C
i.e. HTML, JavaScript, CSS
![Page 45: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/45.jpg)
next generation platforms are alsoincreasingly incorporating web technologies
and approaches into UI frameworks
![Page 46: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/46.jpg)
these enable the creation of apps that make use of fast, flexible web
technologies for layout and design...
![Page 47: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/47.jpg)
...but can also take advantageof the native platform to access
device capabilities such as the camera, accelerometer, and hardware acceleration.
![Page 48: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/48.jpg)
Palm PRE web OS iPhone Hybrid apps (using PhoneGap and
other frameworks)
Nokia QT application and UI framework
![Page 49: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/49.jpg)
advantages
![Page 50: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/50.jpg)
updating the display and accessing the network have a high impact on battery life
![Page 51: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/51.jpg)
a well designed AJAX applicationcan be highly responsive withminimal impact on battery life
![Page 52: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/52.jpg)
once data is loaded, refreshing portionsof the view can be more bandwidth efficient
than reloading the entire page
![Page 53: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/53.jpg)
well built AJAX applications are faster,more responsive and can provide superior
feedback and functionality
![Page 54: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/54.jpg)
this makes users happy :-)
![Page 55: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/55.jpg)
disadvantages
![Page 56: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/56.jpg)
executing logic using JavaScriptalso has an impact on battery life
![Page 57: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/57.jpg)
AJAX is not yet pervasive on mobile
![Page 58: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/58.jpg)
popular AJAX and JavaScript toolkitsare not yet optimized for mobile, so may be
resource intensive or unsupported
![Page 59: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/59.jpg)
On some devices, JavaScript may be supported, but disabled as default.
![Page 60: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/60.jpg)
common use cases
![Page 61: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/61.jpg)
showing and hiding content• Optimizing content to the small screen by only
showing what is initially necessary, then enabling the user to progressively reveal additional content if and when it’s required.
e.g. showing only the top news categories but enabling the user to expand the list if needed
![Page 62: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/62.jpg)
near-immediate feedback• Providing near-immediate feedback for a user
action.
e.g. immediately verifying a text input then displaying success or error messages as soon as the validity of the input has been confirmed
![Page 63: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/63.jpg)
• Prefetching content based on user behaviour,or favourable network conditions (e.g. when an active WIFI connection is detected).
• Using JavaScript permits the smooth reveal of information once the user requests it.
preloading media or content
![Page 64: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/64.jpg)
• Visually (and/or functionally) disabling content or controls which are unavailable due to login status, loss of connectivity, or an ongoing process.
e.g. disabling access to account preferences if a user is not logged in to an online store
visually disabling content or controls
![Page 65: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/65.jpg)
• Enabling the user to input certain information while offline or not logged in, and saving it for upload at a later time.
e.g. enabling the user to add items to their shopping cart while not yet logged in
enabling a subset of behaviour
![Page 66: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/66.jpg)
managing risk of data loss• Automatically (and unobtrusively) saving to
minimize data loss due to unreliable network.• Smoothly and unobtrusively updating the display
to periodically notify the user that data has been saved.
![Page 67: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/67.jpg)
examples
![Page 68: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/68.jpg)
m.wikipedia.org
![Page 69: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/69.jpg)
expand/collapse article sections
![Page 70: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/70.jpg)
m.flickr.com
![Page 71: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/71.jpg)
multiple actions without page refresh
view next/previous image
expand to reveal commenting FAQ
mark favourites
lightwieghtwait animation
![Page 72: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/72.jpg)
mobile wordpress
![Page 73: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/73.jpg)
expand to load and reveal comments
loading animation is displayed
![Page 74: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/74.jpg)
google mobile: search
![Page 75: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/75.jpg)
predictive search and history
1. first use 2. predictive - suggestions 3. predictive - history
suggestions appear with input
history is nowdisplayed on focus
field has focusbut no suggestions
![Page 76: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/76.jpg)
reveal related products expand search details
show/hide
![Page 77: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/77.jpg)
loads next imagewithout page refresh
a quantity of previous and next images are
always preloaded
anticipating behaviour
![Page 78: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/78.jpg)
google mobile: reader
![Page 79: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/79.jpg)
user interface adaptation
![Page 80: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/80.jpg)
google mobile: mail
![Page 81: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/81.jpg)
more contextual actions available
multi-layered interface
contextual menu appearsmark message
![Page 82: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/82.jpg)
fine-tune layout and information design
user initiated progressive reveal
of information
![Page 83: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/83.jpg)
informationarchitects.jp
![Page 84: Mobile Ajax Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c7f17a4a795916268b46ef/html5/thumbnails/84.jpg)
modal drop-down menus
view is dimmed and disabled while menu has focus