Mobile Web App Design …Getting Started Michael Doran, Systems Librarian [email_address]
Okay, we get it! … now what? … iPhone statistics, library services,  WorldCat mobile, Android, Millennials, charts and gra...
buy? build? Hmm.  Is it too late to join buy4lib? … now what? www.boopsie.com/ www.blackboard.com/Mobile/
build web app? native app? e.g. iPhone app written in Cocoa requiring download via the App Store “ Most of the folks I kno...
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 <ul><li>standards compliance </li></ul><ul><li>web usability design </li></ul><ul><li>m...
a good mobile web app typical single-interface that-does-everything library web app 1
1
4
Simple is as  simple does.
<ul><li>Three categories: </li></ul><ul><ul><li>compatible with Safari on iPhone </li></ul></ul><ul><ul><li>optimized for ...
<ul><li>iUI : iPhone User Interface Framework </li></ul><ul><ul><li>http://code.google.com/p/iui/ </li></ul></ul><ul><ul><...
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 ...
[11:45]  <jkeck> jquery++ [11:45] <mjgiarlo> @fight bacon jquery [11:45]  <zoia> jquery: 2090000, bacon: 106 [11:45]  <mdo...
Handheld emulators/simulators <ul><li>Generally come with handheld OS SDKs </li></ul><ul><ul><li>webOS  (Palm) </li></ul><...
Oooohh
 
 
 
 
 
 
Handheld emulators/simulators Palm iPhone Android Opera Mini
Browser compatibility – don’t skip this Internet Explorer Firefox Chrome
XHTML/HTML/CSS validation <ul><li>XHTML/HTML </li></ul><ul><li>CSS </li></ul><ul><li>Accessibility </li></ul>Get right wit...
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… ...
Don’t forget the documentation! <ul><li>Mobile/handheld developer sites have useful information on how to “design for smal...
Example docs and websites <ul><li>iPhone </li></ul><ul><ul><li>Principles and Guidelines for Creating Great iPhone Content...
“ Deliver relevance -- expectations are high and you can only dazzle once.” Cindy Cunningham, OCLC LITA 2009 National Foru...
Hmmm, a staff app… … easier to do a needs assessment … easier to get UI feedback … library has WiFi, so we can use mobile ...
ShelfLister version 2.0 End barcode Start barcode 3 http://vts.uta.edu/sl.htm
ShelfLister version 2.0 6
UTA hereby grants USER permission to use, copy, modify, and distribute  this software and its documentation for any purpos...
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.
Upcoming SlideShare
Loading in...5
×

Mobile Web App Design : Getting Started

2,366

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,366
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Branch in the decision tree Ko-ko Jason Casden NCSU WolfWalk app =&gt; native-to-web
  • Unix philosophy With apologies to Albert Einstein
  • Crockford: “Which I think puts even more pressure on getting JavaScript to go fast. Particularly as we’re now going into mobile. Moore’s law doesn’t apply to batteries. So how much time we’re wasting in interpreting stuff really matters there. The cycles count. So I think that’s going to put more pressure on improving the quality of the runtime.” Ref Jesse Keck Quoted in “Coders at Work” by Peter Seibel, pg. 100
  • Browser detection
  • Code4lib picture by Ray Schwartz. Used by permission (and by permission of Katherine Lynch).
  • Mobile Web App Design : Getting Started

    1. 1. Mobile Web App Design …Getting Started Michael Doran, Systems Librarian [email_address]
    2. 2. Okay, we get it! … now what? … iPhone statistics, library services, WorldCat mobile, Android, Millennials, charts and graphs, yada, yada, yada…
    3. 3. buy? build? Hmm. Is it too late to join buy4lib? … now what? www.boopsie.com/ www.blackboard.com/Mobile/
    4. 4. build web app? native app? e.g. iPhone app written in Cocoa requiring download via the App Store “ 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
    5. 5. This just out… an iPhone OPAC. Download it from the App Store. What? Uhhh. I just bought a Nexus One. Loser!
    6. 6. The Tao of mobile web (app) design <ul><li>standards compliance </li></ul><ul><li>web usability design </li></ul><ul><li>minimalist design </li></ul><ul><li>design and testing </li></ul><ul><ul><li>cross-browser </li></ul></ul><ul><ul><li>cross-platform </li></ul></ul>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.
    7. 7. a good mobile web app typical single-interface that-does-everything library web app 1
    8. 8. 1
    9. 9. 4
    10. 10. Simple is as simple does.
    11. 11. <ul><li>Three categories: </li></ul><ul><ul><li>compatible with Safari on iPhone </li></ul></ul><ul><ul><li>optimized for Safari on iPhone </li></ul></ul><ul><ul><li>iPhone web application </li></ul></ul>iPhone web apps (according to Apple*) 2 <ul><li>W3C standards compliant </li></ul><ul><li>no framesets or </li></ul><ul><li>unsupported technologies </li></ul><ul><li>(cough, Flash) </li></ul>If it doesn’t look exactly like an iPhone app it can’t be any good! * Content on iPhone: Is It a Webpage or an Application?
    12. 12. <ul><li>iUI : iPhone User Interface Framework </li></ul><ul><ul><li>http://code.google.com/p/iui/ </li></ul></ul><ul><ul><li>License: BSD </li></ul></ul><ul><li>iWebKit : ditto </li></ul><ul><ul><li>http://iwebkit.net/ </li></ul></ul><ul><ul><li>License: GNU LGPL </li></ul></ul><ul><li>jQTouch (jQuery plugin) </li></ul><ul><ul><li>http://www.jqtouch.com/ </li></ul></ul><ul><ul><li>License: MIT </li></ul></ul>iPhone web application tool kits JavaScript libraries, CSS code, images… I didn’t have to start from scratch.
    13. 13. iUI iWebKit jQTouch
    14. 14. “ 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
    15. 15. [11:45] <jkeck> jquery++ [11:45] <mjgiarlo> @fight bacon jquery [11:45] <zoia> jquery: 2090000, bacon: 106 [11:45] <mdoran> whatever
    16. 16. Handheld emulators/simulators <ul><li>Generally come with handheld OS SDKs </li></ul><ul><ul><li>webOS (Palm) </li></ul></ul><ul><ul><ul><li>http://developer.palm.com/ </li></ul></ul></ul><ul><ul><li>iPhone (Apple) </li></ul></ul><ul><ul><ul><li>http://developer.apple.com/iphone/ </li></ul></ul></ul><ul><ul><li>Android (Google & Open Handset Alliance) </li></ul></ul><ul><ul><ul><li>http://developer.android.com/ </li></ul></ul></ul><ul><li>Web-based simulators (be leery) </li></ul><ul><ul><li>Opera Mini Simulator – good </li></ul></ul><ul><ul><ul><li>http://www.opera.com/mini/demo/ </li></ul></ul></ul><ul><ul><li>TestiPhone.com – absolutely worthless </li></ul></ul>Operating System Software Development Kit
    17. 17. Oooohh
    18. 24. Handheld emulators/simulators Palm iPhone Android Opera Mini
    19. 25. Browser compatibility – don’t skip this Internet Explorer Firefox Chrome
    20. 26. XHTML/HTML/CSS validation <ul><li>XHTML/HTML </li></ul><ul><li>CSS </li></ul><ul><li>Accessibility </li></ul>Get right with these before you move on to platform compatibility.
    21. 27. Mobile design – platform compatibility viewport
    22. 28. Mobile design – platform compatibility Larger buttons for finger tapping
    23. 29. Mobile design – platform compatibility 2
    24. 30. 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
    25. 31. Don’t forget the documentation! <ul><li>Mobile/handheld developer sites have useful information on how to “design for small” </li></ul><ul><li>Read it </li></ul><ul><li>Seriously. Read it. </li></ul>A viewport? Who knew? It’s a small world after all.
    26. 32. Example docs and websites <ul><li>iPhone </li></ul><ul><ul><li>Principles and Guidelines for Creating Great iPhone Content </li></ul></ul><ul><ul><li>iPhone Human Interface Guidelines for Web Applications </li></ul></ul><ul><ul><li>Google Groups: iPhoneWebDev </li></ul></ul><ul><li>Others </li></ul><ul><ul><li>Opera Mini Developer resources </li></ul></ul><ul><ul><li>many, many, more… </li></ul></ul><ul><ul><li>still more… </li></ul></ul>Reading? I just want to code!
    27. 33. “ 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.
    28. 34. 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?
    29. 35. ShelfLister version 2.0 End barcode Start barcode 3 http://vts.uta.edu/sl.htm
    30. 36. ShelfLister version 2.0 6
    31. 37. UTA hereby grants USER permission to use, copy, modify, and distribute this software and its documentation for any purpose and without fee […] Consider releasing your mobile app as free open source. It’s better than free beer!
    32. 38. If that imbecile up there can do it… How hard could it be? Getting something to beta would only take me a week.
    33. 39. That’s it! Any questions? @dchud: Thanks for giving up your presentation slot.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×