Mobile Websites for Dummies

568 views

Published on

Presentation from the NYLA 2012 Conference

Published in: Real Estate
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
568
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Redesigned in Joomla a few years before we considered our mobile presence.
  • Mobile Websites for Dummies

    1. 1. Karrie McLellanEast Greenbush Community LibraryJuan DenzerBinghamton University Libraries
    2. 2. Get to Know Karrie• East Greenbush Community Library• Reference Librarian to Techbrarian• Tech skills mostly self-taught• DISCLAIMER: Your library’s needs may vary greatly!
    3. 3. Our Website
    4. 4. Our Website – cont’dPros:Nicely organizedPrettyLots of informationCons:Not at all fun on a small screenToo dense for mobileLots of pictures use lots of data
    5. 5. Challenges http://www.flickr.com/photos/anktsunamunh/3273101807
    6. 6. Choices 1. Do nothing 2. CSS 3. Separate Mobile Site 4. Mobile App(s)
    7. 7. Choice #1 – Do NothingWe could have pretended the mobile revolution isn’t happening. But that wouldn’t help our mobile patrons at all.
    8. 8. 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.
    9. 9. Worked for Our WordPress Blogs
    10. 10. 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
    11. 11. Choice #3 – Separate Mobile Site
    12. 12. How Do They Find the Mobile Site?m.eastgreenbushlibrary.orgeastgreenbushlibrary.org/mobile > Conventions – could be guessedLink in the top left corner of our desktop websiteRedirection prompt
    13. 13. To Redirect or Not To Redirect
    14. 14. What We Did
    15. 15. Pitfall Alert!
    16. 16. 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.
    17. 17. Choice #4 – Mobile App We did this, too. Sort of.
    18. 18. Why Not Just an App? Feature Phones / “Dumbphones” may have access to the web, but no apps
    19. 19. Another App OptionCreate an app using a wizard – low to no cost optionFree (iPhone only) - $100
    20. 20. 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!
    21. 21. Tips
    22. 22. General – Keep It SimpleMinimize clicks and scrollingMake 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 typingLink from desktop to mobile and from mobile to desktop sitesPut formatting in CSS, not in HTML
    23. 23. 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.
    24. 24. Geek Alert!
    25. 25. 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.
    26. 26. 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
    27. 27. Resources - ValidatorsW3C Mobile OK Checker - http://validator.w3.org/mobile/Unicorn – http://validator.w3.org/unicornMobiReady – http://mobiready.com
    28. 28. Resources – Mobile Device EmulatorsiPhone/iPad – http://iphone-emulator.org http://www.testiphone.com/Android – http://developer.android.com/sdk/index.htmlWindows Phone – http://dev.windowsphone.com/en-us/downloadsdkBlackberry – https://bdsc.webapps.blackberry.com/html5/downloadSymbian (Nokia) – http://tinyurl.com/33rxvl5Opera – http://www.opera.com/developer/tools/mobile/Model-specific - http://www.mobilephoneemulator.com/Keynote – ($) http://www.keynote.com/
    29. 29. 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!
    30. 30. Resources - WordPress Plugins• WordPress Mobile Pack• MobilePress• WP Touch• WP Mobile Detector
    31. 31. 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
    32. 32. • Juan Denzer• Binghamton University Libraries• Library Systems Specialist• Library Skills taught by librarians
    33. 33. Responsive Web Design• Optimal viewing experience• Easy reading and navigation with a minimum of resizing, panning, and scrolling• Extends to Desktops as well
    34. 34. 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.
    35. 35. http://www.bostonglobe.com/
    36. 36. http://ipadpeek.com/
    37. 37. GoMo By Google
    38. 38. http://www.appsbar.com/
    39. 39. • 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)
    40. 40. Contact Info: Karrie McLellan Head of Digital Services East Greenbush Community Library mclelk@eastgreenbushlibrary.org Juan Denzer Library Systems Specialist Binghamton University jdenzer@binghamton.eduSlides: http://www.slideshare.net/techbrarian

    ×