Building a Simple Mobile-optimized Web

App/Site Using the jQuery Mobile Framework

pinboard.in tag

http://pinboard.in/u:jasonclark/t:cil2013-mobile/
 Agenda
● Learn what a mobile framework is.
● Understand the various technologies (HTML, CSS, JavaScript)
and how they work together to build mobile Web apps/sites.
● Recognize the differences between native and web apps/sites.
● Explore jQuery Mobile basics.
● Acquire best practices in mobile Web development.
● Create an opportunity to continue to work with us after the
webinar to demonstrate what you learned.
● Gain access after the webinar to a free Web server so you can
see your mobile Web app/site live.
 Quick Poll
Does your library have:

Mobile-optimized Website

Native App (iOS, Android etc.)

Nothing yet, but considering an app

Nothing yet, but considering a website.

No plans; it is too expensive/complex!

A framework resembles scaffolding. It is a
temporary platform used as a supportive
guide to help build something. Mobile
frameworks work similarly in that they
provide libraries etc. that allow
one to build something quickly.
Source: http://http://goo.gl/y8CFb
 Native Apps vs. Web/Browser Apps
Issues Native apps Web apps

Internet access Not required Required, except for apps written in

HTML5 (offline capabilities)

Shareable content (Twitter etc.) Only if it is built in to the app Web links can be shared. Social API’s
allow 1-click posting

Access to hardware sensors Yes: camera, gyroscope, microphone, Access thru browser is limited.
compass, accelerometer, GPS Geolocation works!

Development Build app for target platform (Android, Write/publish once using standard Web
iOS [Objective-C] etc.) technologies, view it anywhere with
URL. Speedy debugging and
development.
Distribution Most app stores require approval. No hassles.

Source: http://goo.gl/zSeDU
 jQuery Mobile is …

a unified, HTML5-based user interface system

for all popular mobile device platforms.

Source: http://jquerymobile.com/
 jQuery Mobile is well-documented and
there are great demos to get you started
Mobile Development - Demos
Demos:

Responsive Design Template (custom)

www.lib.montana.edu/~jason/files/responsive-design/

Mobile Template (jQuery Mobile)

www.lib.montana.edu/~jason/files/touch-jquery/

Code Samples and Downloads:

www.lib.montana.edu/~jason/files.php
 Your Live Site
To test your work use this URL, but change it to
your user number.

Example: http://marcomponline.
com/chadtest/Class/cil1/jquery-mobile-
template/index.html
 Getting Started!
Let’s build something.

Handout: http://goo.gl/xMGp0
Rapid Prototyping for jQuery Mobile

Try it at http://codiqa.com/
Try it at http://jquerymobile.com/themeroller/
Exercise
● Pick a web site
● Define primary mobile actions
● Choose mobile entry points (links)

● What do library patrons want to do with library

services in the mobile setting?
Small Screen Rendering (260 px) using the
Web Developer add-on in Firefox
Desktop Small Screen
 In-page Analytics

Note: you can determine how your user’s

are accessing your Web site (e.g., mobile
devices, carriers, browsers , OS’s, screen
resolution etc.)
Mobile Screen Resolutions

Android (Motorola Droid) 480x854

Android (MyTouch) 320x480
Android (Nexus One) 480x800
Apple iPhone 320x480
Apple iPad 1024x768
Palm Pre 320 x 480
Source: http://goo.gl/zEDoi
 Some Best Practices
● Follow the "m" convention (m.novarelibrary.com OR lifeonterra.
com/m/)

● Keep categories (directories) short. Remember that you are creating a

page that people touch without much typing

● Limit image and markup sizes

● Limit HTML pages to 25KB to allow for caching

● "Minify" your scripts and CSS (JSLint, CleanCSS)

● Link to Full Site

● Sniff for User Agent – Detection (allow the user to decide where to go)

● One Column Layout with some whitespace

● Mobile refers to the user!

Learn and borrow from sites you like.

http://m.novarelibrary.com/
Sketch ideas
Testing and validation

Test Page Speed in Firebug

http://getfirebug.com/
 W3C mobileOK Checker
http://validator.w3.org/mobile/
http://ready.mobi
"All sizes | Enough of this silliness | Flickr - Photo Sharing!." Last modified 10/15/2012 12:45:55. http://www.flickr.
com/photos/philhawksworth/7562460356/sizes/l/in/photostream/ (accessed 10/15/2012).
Mobile Optimization
● Minify scripts, html, css …
● Reduce HTTP requests
● Compress files with gzip
● Cache static resources

“Speed matters.”
https://developers.google.com/speed/pagespeed/insights
Mobile Analytics
● Web metrics and statistics
● Mobile search logs

“Data is your friend. Take out the guesswork.”

 Editors and Tools
● You can use a simple text editor (e.g., Notepad) or a more sophisticated application
(e.g., Dreamweaver).

● Adobe Device Central is part of Adobe’s CS.

● iUI: http://code.google.com/p/iui/ for iPhone.

● MIT Mobile Web Open Source Project http://sourceforge.

net/projects/mitmobileweb/

● Device detection? http://detectmobilebrowsers.mobi/

● To see your browser's HTTP Headers. Works on mobile browsers. http://rabin.

mobi/http

● Web Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen

Rendering (260 px) >>> the layout will be reformatted to simulate rendering by a
 Emulators/Simulators:

● Cowemo Mobile Emulator: http://www.mobilephoneemulator.com/

● dotMobi Emulator - http://mtld.mobi/emulator.php

● Opera Mini Simulator - http://www.opera.com/mobile/demo/

● Mimic - emulates European and Japanese models: N400i and N505i. http://pukupi.com/post/2059

● Android Emulator - http://developer.android.com/guide/developing/tools/emulator.html

● BlackBerry Device Simulators - https://www.blackberry.com/Downloads/entry.do?

code=060AD92489947D410D897474079C1477

● iPhone Dev Center: http://developer.apple.com/iphone/

● Palm Pre - http://developer.palm.com/

Take an emulated look at your desktop site.
Mobile Site Desktop Site
Other mobile development tools/frameworks
The Future of Mobile Web App/Site Development? Responsive Web Design?
jQuery Mobile Templates at: http://goo.gl/1FdO0

Handout: http://goo.gl/xMGp0
 Want to
Hangout?

gplus.to/chadmairn
 Jason Clark
Head of Digital Access & Web Services
Associate Professor
Montana State University Library

@jaclark - twitter.com/jaclark
[email protected]