mobile web app design : getting started

Mobile Web App DesignMobile Web App Design…Getting Started…Getting Started

Michael Doran, Systems Librarian

doran@uta.edu

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.