The document discusses creating mobile web applications using jqtouch, a jQuery plugin aimed at enhancing user experience on mobile devices. It highlights the importance of libraries having a mobile presence due to the significant increase in mobile phone usage, providing challenges and opportunities in mobile web development. Additionally, it outlines methods for optimizing mobile websites, tools for testing, and offers various resources for further learning.

1. Creating a Slick Web App Using jQTouch

2. http://www.slideshare.net/chadmairnTimeline:http://bitly.com/u/chadmairn at twitter.com/cmairnfor automated tweets during today’s presentation! #MSULibCon

3. jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.”Source: jqtouch.com,

5. http://net.educause.edu/ir/library/pdf/HR2011.pdf

6. Why libraries should have a mobile presence.“Mobile phones create new kinds of bounded places that merge the infrastructures of geography and technology, as well as techno-social practices thatmerge technical standards and social norms." (Moll, 2007, p.12)The mobile web is connecting people to information while they are on the go, so this is a great space for libraries!Plus mobile phones have surpassed PCsand landline phones combined, so your potential audience is huge!

8. Quick PollDon’t forget: You can copy-paste this slide into other presentations, and move or resize the poll.

9. “Fundamentally, 'mobile' refers to the user, not the device or application.”Barbara Ballard Designing the Mobile User Experience

10. On the Go!

11. Challenges and OpportunitiesChallenges: small screen size difficulty of data input user agent (browser) inconsistencies markup renderingOpportunities: location specific data on-the-go messaging voice communicationSource: (Moll, 2007, p.21)

12. Four Methods 1. Do nothing and hope the site is rendered okay. 2.Reduce images and styling. (Mowser.com and Skweezer.net - reformat sites for mobile.) 3.Use handheld style sheets. <link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />CSS can remove unnecessary styling and content. For example: /* Handheld styles */ body {background-image:none;} #sidebar-ads {display: none;} 4. Create Mobile-optimized content. If your mobile site can’t be used while on the go, then you may want to consider removing it. Source: http://www.cameronmoll.com/archives/000428.html

13. Important: ask your users what they want and watch them using your mobile site.

14. Small Screen Rendering (260 px)Small ScreenDesktop

15. Emulated WebsiteMobile SiteDesktop Site

16. Emulators/Simulators: dotMobi Emulator Opera Mini Simulator Mimic - emulates European and Japanese models: N400i and N505i.Android Emulator BlackBerry Device Simulators iPhone DevCenterPalm Pre Windows Mobile JAVA ME - Java Platform Micro Edition was termed J2ME. It is considered one of the most ubiquitous application platform for mobile devices.

17. Editors and ToolsYou 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 program and helps test web applications/sites on many mobile devices.iUIfor iPhone and other comparable devices.MIT Mobile Web Open Source ProjectDevice detection with http://detectmobilebrowsers.mobi/ or use a variety of scripts.To see your browser's HTTP Headers. Works on mobile browsers. http://rabin.mobi/httpWeb Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen Rendering (260 px) >>> the layout will be reformatted to simulate rendering by a mobile browser.

18. A simple mobile-optimized Website created using HTML and CSS can work on all devices!<p><a class="call" href="tel:17273417177" accesskey="0">Call the Library</a> | (727) 341-7177<br /> <a href="wtai://wp/ap;+17273417177; SPC%20Library">[Add to Phone Book]</a><br />

20. Or you can build something using HTML, CSS, and JavaScript that acts like a native app!Built using jQTouchBuilt using jQuery Mobile

21. Native Apps vs. Web AppsSource:http://www.webmonkey.com/2010/08/how-do-native-apps-and-web-apps-compare/

22. jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.”Source: jqtouch.com,

23. jQTouchUser interface panelsThemesNavigationAnimationsEvents (e.g., tap)Supports WebKit Browsers

24. Getting Started with jQTouch1. Visit www.jqtouch.com and download the archive (.zip) file.2. Extract the 116 files from the archive (.zip) file to a folder on your computer.

25. Free Mobile Templates at:http://goo.gl/biPJj

26. Demos Included with jQTouch

27. How does jQTouch Work?Basically, there is 1 HTML file and <div> tags are setup for each panel. It reminds me of a really large Web page connected by anchor tags. And themes can easily be changed thanks to CSS.

28. jQTouch is using jQuery 1.4.2 and it can be loaded dynamically from Google Code, so you’d insert the following within the <head> tag.Or you can add the .js files locally.

30. Change Themes

31. Testing and validationTest Page Speed in Firebug

32. W3C mobileOK Checker http://validator.w3.org/mobile/

33. Ready.mobi http://ready.mobi

34. Other jQTouch/jQuery ExamplesFlorida Library Association’s Mobile-optimized Conference Program was built using jQTouch. Florida’s Ask-a-Librarian Mobile is using jQTouch. Montana State University Library built their mobile-optimized website using jQuery Mobile. m.untappd.com, a powerful social beer web site, is using jQuery Mobile.

35. Free Mobile Templates at:http://goo.gl/biPJj

36. Other Mobile Development OptionsjQTouch - http://jqtouch.comjQuery Mobile - http://jquerymobile.comSencha Touch - http://www.sencha.comTitanium - http://www.appcelerator.com

37. Select ResourcesMehta, N. (2008). Mobile web development: Building mobile websites, SMS and MMS messaging, mobile payments, and automated voice call systems with XHTML MP, WCSS, and mobile AJAX. Birmingham [England: Packt Pub.]Moll, Cameron. Mobile Web Design: A Web Standards Approach for Delivering Content to Mobile Devices. Salt Lake City, UT: Cameron Moll, 2007. Print. Stark, J. (2010). Building iPhone apps with HTML, CSS, and JavaScript. Farnham: O'Reilly.Ting, R., & Cartman, J. (2009). Strategic mobile design: Creating engaging experiences. Berkeley, CA: New Riders.Mobile Friendly Library Websites by Fleur Helsingorhttp://www.lib.berkeley.edu/digicoll/libraryweb/mobile-websites.pdfDeveloping the MIT Mobile Web: http://www.nercomp.org/data/media/3.%20Developing%20the%20MIT%20Mobile%20Web.pdf2010 Horizon Report: http://wp.nmc.org/horizon2010/Mobile User Experience (MEX) Conference (Manifesto: http://www.mobileuserexperience.com/?p=326XHTML Mobile Profile / XHTML MP Tutorial http://www.developershome.com/wap/xhtmlmp/Comparison of CSS 2.1, CSS MP, WCSS and CSS Level 1 http://mobiforge.com/designing/story/comparison-css-21-css-mp-wcss-and-css-level-1Mobile Browser ID (User-Agent) Strings http://zytrax.com/tech/web/mobile_ids.html User Agent Switcher extension for Firefox http://addons.mozilla.org/en-US/firefox/addon/59/Page Speed works in Firebug http://code.google.com/speed/page-speed/APIs and Mashups For The Rest Of Us http://www.digital-web.com/articles/apis_and_mashups/Mobile Marketing Association http://mmaglobal.com/main

38. http://www.slideshare.net/chadmairnTimeline:http://bitly.com/u/chadmairn HangoutWe can also meet later via Skype or a