Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie Mobile Websites for Dummies
Ähnlich wie Mobile Websites for Dummies (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Mobile Websites for Dummies
- 1. Karrie McLellan East Greenbush Community Library Juan Denzer Binghamton University Libraries
- 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. Our Website
- 4. Our Website – cont’d 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
- 5. Challenges http://www.flickr.com/photos/anktsunamunh/3273101807
- 6. Choices 1. Do nothing 2. CSS 3. Separate Mobile Site 4. Mobile App(s)
- 7. Choice #1 – Do Nothing We could have pretended the mobile revolution isn’t happening. But that wouldn’t help our mobile patrons at all.
- 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 could be as simple as installing a plugin.
- 9. Worked for Our WordPress Blogs
- 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. Choice #3 – Separate Mobile Site
- 12. How Do They Find the Mobile Site? m.eastgreenbushlibrary.org eastgreenbushlibrary.org/mobile > Conventions – could be guessed Link in the top left corner of our desktop website Redirection prompt
- 13. To Redirect or Not To Redirect
- 14. What We Did
- 15. Pitfall Alert!
- 16. What To Include Point-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. Choice #4 – Mobile App We did this, too. Sort of.
- 18. Why Not Just an App? Feature Phones / “Dumbphones” may have access to the web, but no apps
- 19. Another App Option Create an app using a wizard – low to no cost option Free (iPhone only) - $100
- 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. Tips
- 22. General – Keep It Simple 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
- 23. Data Usage 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.
- 24. Geek Alert!
- 25. HTML DO: 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. Resources 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
- 27. Resources - Validators W3C Mobile OK Checker - http://validator.w3.org/mobile/ Unicorn – http://validator.w3.org/unicorn MobiReady – http://mobiready.com
- 28. Resources – Mobile Device Emulators 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/
- 29. Resources - Templates 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!
- 30. Resources - WordPress Plugins • WordPress Mobile Pack • MobilePress • WP Touch • WP Mobile Detector
- 31. Resources - App Development 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
- 32. • Juan Denzer • Binghamton University Libraries • Library Systems Specialist • Library Skills taught by librarians
- 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. 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.
- 37. GoMo By Google
- 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)
- 43. Contact Info: Karrie McLellan Head of Digital Services East Greenbush Community Library mclelk@eastgreenbushlibrary.org Juan Denzer Library Systems Specialist Binghamton University jdenzer@binghamton.edu Slides: http://www.slideshare.net/techbrarian
Hinweis der Redaktion
- Redesigned in Joomla a few years before we considered our mobile presence.