Building a Mobile Website: One Block at a Time

Building a Mobile Website: One Block at a Time
Chad Haefele
Emerging Technologies Librarian
UNC Chapel Hill
chad.haefele@gmail.com

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 Browser

The New Browser

Even Better

http://bit.ly/MobileLandscape

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

Android
HTC Evo
Droid X

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?
Mobile web use
(August 2010)
Market share – devices sold
(July 2010)
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

UNC Mobile site walkthrough
www.lib.unc.edu/m
www.lib.unc.edu/m/plain
+ ‘View full site link’

Catalog

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?
App
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

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/orhttp://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

Mobile site generator
www.hiddenpeanuts.com/msg

Device testing
iPhone/iPod Touch

Device testing
Android

Device testing
Text only

Block #4: Data sources & Outside systems
RSS feeds
XML
Other systems
Computer availability
eResources
Hours
IM / text a librarian services

Block #5: Custom code

http://dclibrarylabs.org/
iPhone app code
(app)

iUI code (webapp)
http://code.google.com/p/iui/

Block #6: Catalog
Catalog options
Do it yourself
ILS vendor-provided solution
3rd party product

Catalog: DIY
Priority 1: Get a clean data feed
XML feeds from ILS
Yaz / 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

Rough stats: Catalog info, 2010
Block #8: Evaluate & Iterate

Blocks (review)
Survey
Platform
Framework
Data sources
Custom code
Catalog
Promotion
Evaluate & Iterate

Mobile site generator
www.hiddenpeanuts.com/msg

iUI code (webapp)
http://code.google.com/p/iui/

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
Download the iUI code: http://code.google.com/p/iui/
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

Building a Mobile Website: One Block at a Time

by chaefele on Sep 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 80

Statistics

Building a Mobile Website: One Block at a Time — Presentation Transcript

http://www.hiddenpeanuts.com	78
http://translate.googleusercontent.com	2