Languages
Pages
Legal
Building a Mobile Website: One Block at a TimeChad HaefeleEmerging Technologies LibrarianUNC Chapel Hill
What I’ll be showing you
An overview of the mobile/smartphone landscape
A tour through our development process
The building blocks you’ll need to do it yourself, and the decisions you’ll need to make along the way
A mobile site generator
Why now?
The
Old
Bro
wse
r
The
New
Bro
wse
r
Eve
n B
ette
r
iPhone 4
iOS devices
iPhone, iPad, iPod Touch Available only through AT&T Debuted in 2007 Apps developed in Objective C More than 250,000 apps
HTC Evo Droid X
Android
Android devices
Too many to list Available on all major carriers Debuted in 2008 Apps developed in Java More than 80,000 apps
BlackBerry Torch
Blackberry details
Too many to list Available on all major
carriers Debuted in 1996 (sort of) More modern devices: 2005 About 10000 apps
Which platform?
Market share – devices sold(July 2010)
Mobile web use(August 2010)
BlackBerry44%
Android19%
iPhone26%
Other11%
BlackBerry9%
Android25%
iPhone56%
Other10%
Anon. 2010. August 2010 Mobile OS Share. Quantcast Blog. September 3. http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html.
Anon. 2010. comScore Reports July 2010 U.S. Mobile Subscriber Market Share -- RESTON, Va., Sept. 15 /PRNewswire/ --. http://www.prnewswire.com/news-releases/comscore-reports-july-2010-us-mobile-subscriber-market-share-102969094.html.
Source: http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html
VS
UNC Mobile site walkthrough
+ ‘View full site link’
www.lib.unc.edu/m
www.lib.unc.edu/m/plain
UNC Mobile site walkthrough
Catalog
UNC Mobile site walkthrough
UNC Mobile site walkthrough
http://www.flickr.com/photos/gullevek/155604654/
Block #1: Survey your users
Plus 44 ‘other’ responses
Data from Spring, 2009
Sample ‘Other’ responses:
Cell phone Cheap free phone Braille Note Carrier pigeon Lame old phone :( My cheap phone that always has at least 2
bars
Block #2: Platform
Vs.
Platform: App or Webapp?
Java, Objective C
Single platform
Full hardware access(GPS, camera, etc)
Can be used offline
Tricky to get stats
HTML, CSS, Javascript
Multi-platform (maybe)
Limited hardware access (GPS only)
Requires web connection
Standard webstats
App Webapp
Android’s App Inventor
Other app development options
Phonegap Flash Sencha Touch Appcelerator Others:
http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework
Block #3: Framework
Jason Clark’s:
http://diginit.wordpress.com/2009/11/13/mobile-web-design-working-code-tips-best-practices/
or
http://bit.ly/cXlnlS www.lib.utc.edu/m
Block #3: Framework
iUI: code.google.com/p/iui/
Mobile site generator:www.hiddenpeanuts.com/msg
www.lib.unc.edu/m
Device testing
iPhone/iPod Touch
Device testing
Android
Device testing Text only
Block #4: Data sources & Outside systems RSS feeds XML Other systems
Computer availabilityeResourcesHours IM / text a librarian services
Block #5: Custom code
Block #6: Catalog
Catalog optionsDo it yourself ILS vendor-provided solution3rd party product
Catalog: DIY
Priority 1: Get a clean data feedXML feeds from ILSYaz / Z39.50 (http://www.indexdata.com/yaz)Other solution – tap into DB directly somehow
Harass your vendors!
Catalog: DIY (at UNC)
Endeca makes it all possible XML + php + Syndetics + iUI
Catalog: ILS solutions Airpac, from Innovative
Catalog: 3rd party product
Library Anywhere “Works with 90% of
current OPACs.” http://www.librarything.com/
LibraryAnywhere
Block #7: Promotion
Rough stats: Hits, 2010
Block #8: Evaluate & Iterate
April May June July August Sept(extrapolated)0
200
400
600
800
1000
1200
1400
1600
iPhone/iPod
Android
BlackBerry
April May June July August Sept. (extrapolated)0
50
100
150
200
250
300
350
400
450
Mobile Catalog Searches
Mobile Records Viewed
Rough stats: Catalog info, 2010
Block #8: Evaluate & Iterate
Blocks (review)
Survey Platform Framework Data sources Custom code Catalog Promotion Evaluate & Iterate
Examples
INSERT SAMPLE HERE www.cranstonlibrary.org/m http://library.boisestate.edu/m/ http://mobile-library.mhcc.edu/
Main Page
40 possible pages
Getting started
1. Download the iUI code: http://code.google.com/p/iui/
2. Unzip it, put the iUI folder on your server where you want the mobile site
Custom code
Webapps play well with others
HTML5 & more on the horizon
APIs – camera, GPS, mic, accelerometer, video
Youtube: m.youtube.com Flickr: m.flickr.com Google Reader: google.com/reader/i Geolocation: hiddenpeanuts.com/ala
This is not the end
Slides online: http://bit.ly/LILRCmobile
http://www.slideshare.net/cHaefele
Top Related