Download - Mobile Web App Design : Getting Started
![Page 1: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/1.jpg)
Mobile Web App DesignMobile Web App Design…Getting Started…Getting Started
Michael Doran, Systems Librarian
![Page 2: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/2.jpg)
Okay, we get it!Okay, we get it!
…now what?…now what?
…iPhone statistics,library services, WorldCat mobile,
Android, Millennials,charts and graphs,yada, yada, yada…
…iPhone statistics,library services, WorldCat mobile,
Android, Millennials,charts and graphs,yada, yada, yada…
![Page 3: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/3.jpg)
buy?buy? build? build?
Hmm. Is it too late to join
buy4lib?
Hmm. Is it too late to join
buy4lib?
…now what?…now what?
www.boopsie.com/
www.blackboard.com/Mobile/
![Page 4: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/4.jpg)
buildbuild
web app?web app?native app?native app?
e.g. iPhone appwritten in Cocoa
requiring downloadvia the App Store
e.g. iPhone appwritten in Cocoa
requiring downloadvia the App Store
“Most of the folks I know in app development are moving to
standardization on web versusdevice specific development.”
“Most of the folks I know in app development are moving to
standardization on web versusdevice specific development.”
Linda WoodsAT&T Education AdvocateIndustry & Mobility Application Solutions2009 Handheld Librarian Online Conference
![Page 5: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/5.jpg)
This just out… an iPhone OPAC.
Download it from the App Store.
This just out… an iPhone OPAC.
Download it from the App Store.
What? Uhhh. I just bought a Nexus
One.
What? Uhhh. I just bought a Nexus
One.
Loser!Loser!
![Page 6: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/6.jpg)
The Tao of mobile web (app) design
standards compliance web usability design minimalist design design and testing
cross-browser cross-platform
A mobile web appshould do one thing
and do it well.
A mobile web appshould do one thing
and do it well.A mobile web app should be as simple
as possible, but no simpler.
A mobile web app should be as simpleas possible, but no simpler.
![Page 7: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/7.jpg)
a good mobile web app
a good mobile web app
typical single-interfacethat-does-everything
library web app
typical single-interfacethat-does-everything
library web app
1
![Page 8: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/8.jpg)
1
![Page 9: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/9.jpg)
4
![Page 10: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/10.jpg)
Simple is as simple does.
Simple is as simple does.
![Page 11: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/11.jpg)
Three categories: compatible with Safari on iPhone optimized for Safari on iPhone iPhone web application
iPhone web apps (according to Apple*)
2
W3C standards compliant- no framesets or- unsupported technologies (cough, Flash)
If it doesn’t look exactlylike an iPhone app
it can’t be any good!
If it doesn’t look exactlylike an iPhone app
it can’t be any good!
* Content on iPhone: Is It a Webpage or an Application?
![Page 12: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/12.jpg)
iUI: iPhone User Interface Framework http://code.google.com/p/iui/ License: BSD
iWebKit: ditto http://iwebkit.net/ License: GNU LGPL
jQTouch (jQuery plugin) http://www.jqtouch.com/ License: MIT
iPhone web application tool kits
JavaScript libraries, CSS code, images… I didn’t
have to start from scratch.
JavaScript libraries, CSS code, images… I didn’t
have to start from scratch.
![Page 13: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/13.jpg)
iUI iWebKit jQTouch
![Page 14: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/14.jpg)
“Moore’s Law doesn’t apply to batteries…as we’re now going into mobile…the cycles count.” Douglas Crockford*
“Moore’s Law doesn’t apply to batteries…as we’re now going into mobile…the cycles count.” Douglas Crockford*
Gee, I love what jQuery can do, butmaybe server-sideprocessing is the
way to go.
Gee, I love what jQuery can do, butmaybe server-sideprocessing is the
way to go.
* Quoted in “Coders at Work” by Peter Seibel, pg. 100
![Page 15: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/15.jpg)
[11:45] <jkeck> jquery++[11:45] <mjgiarlo> @fight bacon jquery
[11:45] <zoia> jquery: 2090000, bacon: 106[11:45] <mdoran> whatever
![Page 16: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/16.jpg)
Handheld emulators/simulators
Generally come with handheld OS SDKs webOS (Palm)
http://developer.palm.com/ iPhone (Apple)
http://developer.apple.com/iphone/ Android (Google & Open Handset Alliance)
http://developer.android.com/
Web-based simulators (be leery) Opera Mini Simulator – good
http://www.opera.com/mini/demo/ TestiPhone.com – absolutely worthless
Operating SystemOperating System
Software Development KitSoftware Development Kit
![Page 17: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/17.jpg)
OooohhOooohh
![Page 18: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/18.jpg)
![Page 19: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/19.jpg)
![Page 20: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/20.jpg)
![Page 21: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/21.jpg)
![Page 22: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/22.jpg)
![Page 23: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/23.jpg)
![Page 24: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/24.jpg)
Handheld emulators/simulators
Palm iPhoneAndroid Opera Mini
![Page 25: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/25.jpg)
Browser compatibility – don’t skip this
Internet Explorer Firefox Chrome
![Page 26: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/26.jpg)
XHTML/HTML/CSS validation
XHTML/HTML CSS Accessibility
Get right with these before you move on to platform compatibility.
![Page 27: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/27.jpg)
Mobile design – platform compatibility
viewport
![Page 28: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/28.jpg)
Mobile design – platform compatibility
Larger buttons for finger tapping
![Page 29: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/29.jpg)
Mobile design – platform compatibility
2
![Page 30: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/30.jpg)
Test it on the real thing (handset), too!
Borrow from colleagues
Or, as a last resort…
Just need to…test… my app….one… more time
Just need to…test… my app….one… more time
![Page 31: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/31.jpg)
Don’t forget the documentation!
Mobile/handheld developer sites have useful information on how to “design for small”
Read it Seriously. Read it.
A viewport?Who knew?
A viewport?Who knew?
It’s a smallworld after all.
It’s a smallworld after all.
![Page 32: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/32.jpg)
Example docs and websites
iPhone Principles and Guidelines for
Creating Great iPhone Content iPhone Human Interface
Guidelines for Web Applications Google Groups: iPhoneWebDev
Others Opera Mini Developer resources many, many, more… still more…
Reading?I just wantto code!
Reading?I just wantto code!
![Page 33: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/33.jpg)
“Deliver relevance -- expectations are high and you can only dazzle
once.”Cindy Cunningham, OCLCLITA 2009 National Forum
“Deliver relevance -- expectations are high and you can only dazzle
once.”Cindy Cunningham, OCLCLITA 2009 National Forum
Patrons can be persnickety. Maybe I should practice on the
Library staff, first.
Patrons can be persnickety. Maybe I should practice on the
Library staff, first.
![Page 34: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/34.jpg)
Hmmm, a staff app……easier to do a needs assessment…easier to get UI feedback…library has WiFi, so we can use mobile devices without a data plan
Hmmm, a staff app……easier to do a needs assessment…easier to get UI feedback…library has WiFi, so we can use mobile devices without a data plan
What would help staffworking in the stacks?
What would help staffworking in the stacks?
![Page 35: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/35.jpg)
ShelfLister version 2.0
End barcode
Start barcode
3
http://vts.uta.edu/sl.htmhttp://vts.uta.edu/sl.htm
![Page 36: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/36.jpg)
ShelfLister version 2.0
6
![Page 37: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/37.jpg)
UTA hereby grants USER permissionto use, copy, modify, and distribute this software and its documentationfor any purpose and without fee […]
Consider releasingyour mobile app as
free open source. It’sbetter than free beer!
Consider releasingyour mobile app as
free open source. It’sbetter than free beer!
![Page 38: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/38.jpg)
If that imbecile up there can do it…
If that imbecile up there can do it… How hard
could it be?
How hardcould it be?
Getting somethingto beta would onlytake me a week.
Getting somethingto beta would onlytake me a week.
![Page 39: Mobile Web App Design : Getting Started](https://reader035.vdocuments.us/reader035/viewer/2022062220/555c23ead8b42a09438b4b14/html5/thumbnails/39.jpg)
That’s it!Any questions?
That’s it!Any questions?
@dchud: Thanksfor giving up yourpresentation slot.
@dchud: Thanksfor giving up yourpresentation slot.