creating a mobile library presence

29
Creating a Mobile Library Presence Presented July 13 th by Chad Mairn for Trendy Topics 2010. http://www.slideshare.net/chadmairn

Upload: chad-mairn

Post on 19-May-2015

3.363 views

Category:

Technology


1 download

DESCRIPTION

Mobile devices certainly are evolving beyond simple cell phones and are becoming connections to a world of information. Now that information is literally available at everyone’s fingertips, your library‘s resources and services could also be in your users’ pockets at their point of need. In this session learn:  Why libraries should have a mobile presence.  How to use Google Analytics to decide what to include on your mobile web page.  To code or not to code using WYSIWYG editors and other mobile tools.  To create links to Google mobile maps.  Ways to generate and use QR codes to help promote your mobile presence.  Solutions to common challenges in mobile development. Presented July 13, 2010 at Trendy Topics (http://www.alliancelibrarysystem.com/TrendyTopic)

TRANSCRIPT

Page 1: Creating a Mobile Library Presence

Creating a Mobile Library Presence

Presented July 13th by Chad Mairn for Trendy Topics 2010. http://www.slideshare.net/chadmairn

Page 2: Creating a Mobile Library Presence

In this session learn:• Why libraries should have a mobile presence.

• How to use Google Analytics or some other web analytic tool to decide what to include on your mobile web page.

• To code or not to code using WYSIWYG editors and other mobile tools.

• To create links to Google, Yahoo! and other mobile maps.

• Ways to generate and use QR codes to help promote your mobile presence.

• Solutions to common challenges in mobile development.

Page 3: Creating a Mobile Library Presence

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!

Page 4: Creating a Mobile Library Presence

“Fundamentally, 'mobile' refers to the user, not the

device or application.”

Barbara Ballard Designing the Mobile User Experience

Page 5: Creating a Mobile Library Presence

… can help one decide what to include.

Note: with Google Analytics you can determine how your user’s are accessing your mobile site (e.g., mobile devices, carriers, browsers , OS’s, screen resolution etc.)

Page 6: Creating a Mobile Library Presence

Important: ask your users what they want.

Page 7: Creating a Mobile Library Presence

Example Mobile Library Websites

Page 8: Creating a Mobile Library Presence

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

SPC’s Mobile Web Site was planned for the lowest common denominator. A “touch version” is coming soon (iPhone, Android etc.)

Page 9: Creating a Mobile Library Presence
Page 10: Creating a Mobile Library Presence

To code or not to code using WYSIWYG

editors and other mobile tools.

Page 11: Creating a Mobile Library Presence

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 mobile browser.

Page 12: Creating a Mobile Library Presence

Small Screen Rendering (260 px)Desktop Small Screen

Page 13: Creating a Mobile Library Presence

Emulators/Simulators: • 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/

• Windows Mobile - http://msdn.microsoft.com/en-us/windowsmobile/default.aspx

• JAVA ME - Java Platform Micro Edition was termed J2ME. It is considered one of the most ubiquitous application platform for mobile devices. http://java.sun.com/javame/reference/apis.jsp

Page 14: Creating a Mobile Library Presence

Emulated Website

Mobile Site Desktop Site

Page 15: Creating a Mobile Library Presence

Links to Google mobile maps.Used http://xm.my/ to create short URLs to Google Maps.

Page 16: Creating a Mobile Library Presence

Small Screen Rendering (260 px)

Desktop

Small Screen

Page 17: Creating a Mobile Library Presence

QR (Quick Response) codes quickly guide people from physical objects to something digital.

Photo by CoCreatr

1. Install a QR Reader on your phone.

2. Take a quick photo of the code.

3. Be directed from physical reality to something digital!

Page 18: Creating a Mobile Library Presence

QR codes can help promote your

mobile/digital presence

Handouts

Flyers

Contact Info

Page 19: Creating a Mobile Library Presence

Other QR Code ideas …

ID Badge

Posters

Books

Office Door

Page 20: Creating a Mobile Library Presence

QR Generators and Readers

• BeeTagg QR Generator: http://generator.beetagg.com/

• BeeTagg Multicode Reader: http://www.beetagg.com/downloadreader

• NeoReader http://www.neoreader.com/

• NeoReader Code Generator: http://www.neoreader.com/code.html

• ZXing Project: http://zxing.appspot.com/generator/ [Can generate codes for calendar events, contact information, email address, Geo location, phone number, SMS, text, URL, and Wifi network.]

Page 21: Creating a Mobile Library Presence

Solutions to common challenges in mobile

development.

Page 22: Creating a Mobile Library Presence

Challenges and OpportunitiesChallenges: small screen size difficulty of data input user agent (browser) inconsistencies markup rendering

Opportunities: location specific data on-the-go messaging voice communication

Source: (Moll, 2007, p.21)

Page 23: Creating a Mobile Library Presence

Four Methods (http://www.cameronmoll.com/archives/000428.html)

1. Do nothing and hope the site is rendered okay.

2. Reduce images and styling. (Mowser.com and Skweezer.net - reformats 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.

Page 24: Creating a Mobile Library Presence

Testing and validation

Page Speed in Firebug

Page 25: Creating a Mobile Library Presence

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

Page 26: Creating a Mobile Library Presence

Ready.mobi http://ready.mobi

Page 27: Creating a Mobile Library Presence

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

Page 28: Creating a Mobile Library Presence

Select Resources

Mehta, 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 Helsingor http://www.lib.berkeley.edu/digicoll/libraryweb/mobile-websites.pdf

Developing the MIT Mobile Web: http://www.nercomp.org/data/media/3.%20Developing%20the%20MIT%20Mobile%20Web.pdf

2010 Horizon Report: http://wp.nmc.org/horizon2010/

Mobile User Experience (MEX) Conference (Manifesto: http://www.mobileuserexperience.com/?p=326

XHTML 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-1

Mobile 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

Page 29: Creating a Mobile Library Presence

[email protected]

(727) 341.7181

+ 1 (727) 537.6405

[email protected]

With your phone take a quick photo of this code and you’ll be directed to my mobile contact page. For the software, visit http://www.beetagg.com

Contact Information

@cmairn