doran-c4l2010
TRANSCRIPT
Mobile Web App DesignMobile Web App Design…Getting Started…Getting Started
Michael Doran, Systems Librarian
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…
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/
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
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!
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.
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
1
4
Simple is as simple does.
Simple is as simple does.
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?
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.
iUI iWebKit jQTouch
“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
[11:45] <jkeck> jquery++[11:45] <mjgiarlo> @fight bacon jquery
[11:45] <zoia> jquery: 2090000, bacon: 106[11:45] <mdoran> whatever
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
OooohhOooohh
Handheld emulators/simulators
Palm iPhoneAndroid Opera Mini
Browser compatibility – don’t skip this
Internet Explorer Firefox Chrome
XHTML/HTML/CSS validation
XHTML/HTML CSS Accessibility
Get right with these before you move on to platform compatibility.
Mobile design – platform compatibility
viewport
Mobile design – platform compatibility
Larger buttons for finger tapping
Mobile design – platform compatibility
2
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
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.
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!
“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.
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?
ShelfLister version 2.0
End barcode
Start barcode
3
http://vts.uta.edu/sl.htmhttp://vts.uta.edu/sl.htm
ShelfLister version 2.0
6
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!
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.
That’s it!Any questions?
That’s it!Any questions?
@dchud: Thanksfor giving up yourpresentation slot.
@dchud: Thanksfor giving up yourpresentation slot.