Transcript Mobile Web App Design : Getting Started

Mobile Web App Design
…Getting Started
Michael Doran, Systems Librarian
[email protected]
…iPhone statistics,
library services,
WorldCat mobile,
Android, Millennials,
charts and graphs,
yada, yada, yada…
Okay, we get it!
…now what?
…now what?
buy?
www.boopsie.com/
www.blackboard.com/Mobile/
build?
Hmm. Is it
too late to join
buy4lib?
e.g. iPhone app
written in Cocoa
requiring download
via the App Store
build
web app?
native app?
“Most of the folks I know in app
development are moving to
standardization on web versus
device specific development.”
Linda Woods
AT&T Education Advocate
Industry & Mobility Application Solutions
2009 Handheld Librarian Online Conference
This just out… an iPhone OPAC.
Download it from the App Store.
What? Uhhh. I just
bought a Nexus One.
Loser!
The Tao of mobile web (app) design
A mobile web app
should do one thing
and do it well.
A mobile web app should be as simple
as possible, but no simpler.




standards compliance
web usability design
minimalist design
design and testing


cross-browser
cross-platform
a good mobile
web app
typical single-interface
that-does-everything
library web app
1
1
4
Simple is as
simple does.
iPhone web apps (according to Apple*)
* Content on iPhone: Is It a Webpage or an Application?

Three categories:



compatible with Safari on iPhone
optimized for Safari on iPhone
iPhone web application
W3C standards compliant
- no framesets or
- unsupported technologies
(cough, Flash)
If it doesn’t look exactly
like an iPhone app
it can’t be any good!
2
iPhone web application tool kits

iUI: iPhone User Interface Framework



iWebKit: ditto



http://code.google.com/p/iui/
License: BSD
http://iwebkit.net/
License: GNU LGPL
JavaScript libraries, CSS
code, images… I didn’t
have to start from scratch.
jQTouch (jQuery plugin)


http://www.jqtouch.com/
License: MIT
iUI
iWebKit
jQTouch
“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, but
maybe server-side
processing 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
Operating System

Generally come with handheld OS SDKs

webOS (Palm)


http://developer.apple.com/iphone/
Android (Google & Open Handset Alliance)


http://developer.palm.com/
iPhone (Apple)


Software Development Kit
http://developer.android.com/
Web-based simulators (be leery)

Opera Mini Simulator – good


http://www.opera.com/mini/demo/
TestiPhone.com – absolutely worthless
Oooohh
Handheld emulators/simulators
Android
Palm
iPhone
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!
Just need to…
test… my app….
one… more time
Or, as a last resort…
Borrow from colleagues
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?
It’s a small
world after all.
Example docs and websites

Reading?
I just want
to code!
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…
“Deliver relevance -- expectations are
high and you can only dazzle once.”
Cindy Cunningham, OCLC
LITA 2009 National Forum
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
What would help staff
working in the stacks?
ShelfLister version 2.0
Start barcode
End barcode
http://vts.uta.edu/sl.htm
3
ShelfLister version 2.0
6
Consider releasing
your mobile app as
free open source. It’s
better than free beer!
UTA hereby grants USER permission
to use, copy, modify, and distribute
this software and its documentation
for any purpose and without fee […]
If that imbecile up
there can do it…
How hard
could it be?
Getting something
to beta would only
take me a week.
That’s it!
Any questions?
@dchud: Thanks
for giving up your
presentation slot.