mobile websites for dummies
DESCRIPTION
Presentation from the NYLA 2012 ConferenceTRANSCRIPT
Karrie McLellan East Greenbush Community Library
Juan DenzerBinghamton University Libraries
Mobile Websites for Dummies
• East Greenbush Community Library
• Reference Librarian to Techbrarian
• Tech skills mostly self-taught
• DISCLAIMER: Your library’s needs may vary greatly!
Get to Know Karrie
Our Website
Pros:
Nicely organized
Pretty
Lots of information
Cons:
Not at all fun on a small screen
Too dense for mobile
Lots of pictures use lots of data
Our Website – cont’d
Challenges
http://www.flickr.com/photos/anktsunamunh/3273101807
1. Do nothing
2. CSS
3. Separate Mobile Site
4. Mobile App(s)
Choices
Choice #1 – Do Nothing
We could have pretended the mobile revolution isn’t happening.
But that wouldn’t help our mobile patrons at all.
<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 could be as simple as installing a plugin.
Choice #2 – CSS
Worked for Our WordPress Blogs
Not for Our Joomla Site!It stacked top and side menus first, so the patron had to scroll through
AND
On each page before any actual page content
Choice #3 – Separate Mobile Site
m.eastgreenbushlibrary.org
eastgreenbushlibrary.org/mobile
Link in the top left corner of our desktop website
Redirection prompt
How Do They Find the Mobile Site?
> Conventions – could be guessed
To Redirect or Not To Redirect
What We Did
Pitfall Alert!
Point-of-need information – not your whole site. Your patrons’ needs may differ.
What To Include
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
Create an app using a wizard – low to no cost option
Free
Another App Option
(iPhone only) - $100
• iTunes rejection
• Lost ability to link to pdf
• Android developer policy change
• Do you know what that 3rd party is doing with user data collected?
• Limited customization
• Your app could change or become unavailable at any time, without warning!
Unexpected Issues - Appsbar
Tips
Minimize clicks and scrolling
Make links easy to see and click. Consider user finger size.
Put only basic information here. Leave customization for your desktop site.
Remember usability in your design
• Alt tags for screen readers
• Do your users’ phones handle JavaScript, popups, or multiple windows?
• Flash not available on iPhones/iPads
• Use basic fonts and colors (also colorblind-friendly!)
• Minimize typing
Link from desktop to mobile and from mobile to desktop sites
Put formatting in CSS, not in HTML
General – Keep It Simple
Try to avoid PDFs if possible. Create an HTML version instead, or at least warn the user 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 Picture Manager can help.
Even if a patron has an unlimited plan, there may be low bandwidth on the device or network.
Data Usage
Geek Alert!
DO: DON’T:
• Use comment tags or empty spaces
• Use target attribute (to open new window)
• Leave unclosed tags
• Use attributes for styling (inline)
• Use tables (unless very simple)
• Use scripts if you want low-end devices to use your site.
• Use fancy fonts.
• Close all tags
• Use lowercase for tags and attributes
• Put attributes in quotes
• Nest tags correctly
• Use headings, but may only have 1-3
• Use the correct DOCTYPE
• Use CSS for styling
HTML
Website 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.org
Mobile Web Standards - http://en.wikipedia.org/wiki/XHTML_Mobile_Profile
Device Atlas - https://deviceatlas.com/device-data/devices
Resources
W3C Mobile OK Checker - http://validator.w3.org/mobile/
Unicorn – http://validator.w3.org/unicorn
MobiReady – http://mobiready.com
Resources - Validators
iPhone/iPad – http://iphone-emulator.org
http://www.testiphone.com/
Android – http://developer.android.com/sdk/index.html
Windows Phone – http://dev.windowsphone.com/en-us/downloadsdk
Blackberry – https://bdsc.webapps.blackberry.com/html5/download
Symbian (Nokia) – http://tinyurl.com/33rxvl5
Opera – http://www.opera.com/developer/tools/mobile/
Model-specific - http://www.mobilephoneemulator.com/
Keynote – ($) http://www.keynote.com/
Resources – Mobile Device Emulators
Google Sites – http://google.com/sites/help/mobile-landing-pages/mlpb.html
One-Pager – http://influx.us/onepage
Winksite – http://winksite.com
Zinadoo – http://zinadoo.com
dotMobi – http://mtld.mobi
Lots of mobile tools!
Resources - Templates
• WordPress Mobile Pack
• MobilePress
• WP Touch
• WP Mobile Detector
Resources - WordPress Plugins
Appmakr - http://www.appmakr.com/
Appsbar - http://www.appsbar.com/
AppWizard ($ - iPhone only) - http://www.appwizard.com/
Boopsie ($$) – http://boopsie.com
Building Mobile Library Applications, by Jason A. Clark
ISBN: 9781555707835
http://www.neal-schuman.com/bmla
Resources - App Development
• 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
• 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.
Three Core Principles
Rupert, Dave. "Five steps to gettin’ flexy in responsive web design." .net Magazine. September 05, 2012.
GoMo By Google
• 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 McLellanHead of Digital ServicesEast Greenbush Community [email protected]
Juan DenzerLibrary Systems SpecialistBinghamton [email protected]
Slides: http://www.slideshare.net/techbrarian