Choices 1. Do nothing 2. CSS 3. Separate Mobile Site 4. Mobile App(s)
Choice #1 – Do NothingWe could have pretended the mobile revolution isn’t happening. But that wouldn’t help our mobile patrons at all.
Choice #2 – CSS <head> <link rel="stylesheet" type="text/css" href="main.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" /> </head>If you use WordPress, Drupal, Joomla, or another CMS for your website, this couldbe as simple as installing a plugin.
What To IncludePoint-of-need information – not your whole site. Your patrons’ needs may differ. Catalog keyword search – mobile-friendly, if possible Added a search page with links to search OverDrive, databases, more mobile resources, etc. FAQ includes not only our most common questions, but also pages where our informational QR codes lead. Contact page is also hours and location page. Included maps of the library. Also links to social media, blogs, and full site.
Choice #4 – Mobile App We did this, too. Sort of.
Why Not Just an App? Feature Phones / “Dumbphones” may have access to the web, but no apps
Another App OptionCreate an app using a wizard – low to no cost optionFree (iPhone only) - $100
Unexpected Issues - Appsbar• iTunes rejection• Lost ability to link to pdf• Android developer policy change• Do you know what that 3 rd party is doing with user data collected?• Limited customization• Your app could change or become unavailable at any time, without warning!
Data UsageTry to avoid PDFs if possible. Create an HTML version instead, or at least warn theuser if you are linking to a PDF.Keep images to a minimum to conserve data use. (jpg, gif, png)Keep the file sizes of the pages and images small. Microsoft Office PictureManager can help.Even if a patron has an unlimited plan, there may be low bandwidth on the deviceor network.
HTMLDO: DON’T:• Close all tags • Use comment tags or empty spaces• Use lowercase for tags and attributes • Use target attribute (to open new window)• Put attributes in quotes • Leave unclosed tags• Nest tags correctly • Use attributes for styling (inline)• Use headings, but may only have 1-3 • Use tables (unless very simple)• Use the correct DOCTYPE • Use scripts if you want low-end devices to use your site.• Use CSS for styling • Use fancy fonts.
ResourcesWebsite Trancoders – show you how your current site might look on “dumbphones”• Skweezer.com - http://skweezer.com/s.aspx?q=http://yoursite.org• Google Transcoder - http://google.com/gwt/n?u=http://yoursite.orgMobile Web Standards - http://en.wikipedia.org/wiki/XHTML_Mobile_ProfileDevice Atlas - https://deviceatlas.com/device-data/devices
Resources - ValidatorsW3C Mobile OK Checker - http://validator.w3.org/mobile/Unicorn – http://validator.w3.org/unicornMobiReady – http://mobiready.com
Resources - TemplatesGoogle Sites – http://google.com/sites/help/mobile-landing-pages/mlpb.htmlOne-Pager – http://influx.us/onepageWinksite – http://winksite.comZinadoo – http://zinadoo.comdotMobi – http://mtld.mobiLots of mobile tools!
Resources - WordPress Plugins• WordPress Mobile Pack• MobilePress• WP Touch• WP Mobile Detector
Resources - App DevelopmentAppmakr - http://www.appmakr.com/Appsbar - http://www.appsbar.com/AppWizard ($ - iPhone only) - http://www.appwizard.com/Boopsie ($$) – http://boopsie.comBuilding Mobile Library Applications, by Jason A. ClarkISBN: 9781555707835http://www.neal-schuman.com/bmla
• Juan Denzer• Binghamton University Libraries• Library Systems Specialist• Library Skills taught by librarians
Responsive Web Design• Optimal viewing experience• Easy reading and navigation with a minimum of resizing, panning, and scrolling• Extends to Desktops as well
Three Core Principles • Flexible/Fluid grids: percentage-based fluid columns of content. • Media queries: CSS3 Module that renders webpages based on the browser’s current state. • Flexible media: content such as images and video should scale with the browser’s dimensions.Rupert, Dave. "Five steps to gettin’ flexy in responsive web design." .net Magazine. September 05, 2012.
• Catalog Search Provides patrons with real-time access to your collection• ILS Integration Gives patrons the ability to manage their accounts• Library Locator GPS-aware technology shares branch locations• Ask A Librarian• Calendar and Events• Additional Content Instantly connects patrons to reading lists• Integration with Easy access to other services to which your library subscribes Boopsie Star Partners including EBSCO Host, AccessMyLibrary, Naxos, RedLaser, Tutor.com, Mango, and more.• Integrated Social Networking Tools• BookCheck™ (Add-on Feature)
Contact Info: Karrie McLellan Head of Digital Services East Greenbush Community Library firstname.lastname@example.org Juan Denzer Library Systems Specialist Binghamton University email@example.comSlides: http://www.slideshare.net/techbrarian