Mobile Web App Design …Getting Started

							Mobile Web App Design
  …Getting Started

        Michael Doran, Systems Librarian
                         doran@uta.edu
…iPhone statistics,
 library services,
 WorldCat mobile,
Android, Millennials,
charts and graphs,
yada, yada, yada…




     Okay, we get it!

           …now what?
                        …now what?


           buy?                      build?

     www.boopsie.com/
                                  Hmm. Is it
                                too late to join
                                   buy4lib?
www.blackboard.com/Mobile/
   e.g. iPhone app
   written in Cocoa
 requiring download
                          build
  via the App Store


             native app?                web 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       A mobile web app should be as simple
    and do it well.            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:
                                                       W3C standards compliant
       compatible with Safari on iPhone               - no framesets or
                                                       - unsupported technologies
       optimized for Safari on iPhone                         (cough, Flash)

       iPhone web application



                                     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
       http://code.google.com/p/iui/
       License: BSD
                                JavaScript libraries, CSS
   iWebKit: ditto               code, images… I didn’t
       http://iwebkit.net/     have to start from scratch.
       License: GNU LGPL
   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)                        Software Development Kit
           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
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
                 iPhone
Reading?             Principles and Guidelines for
I just want           Creating Great iPhone Content
  to code!
                     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
                         UTA hereby grants USER permission
                         to use, copy, modify, and distribute
  Consider releasing     this software and its documentation
  your mobile app as     for any purpose and without fee […]
free open source. It’s
better than free beer!
If that imbecile up                   Getting something
 there can do it…      How hard      to beta would only
                      could it be?    take me a week.
   That’s it!
Any questions?


     @dchud: Thanks
     for giving up your
     presentation slot.