Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Mobile Solution for #TheUnderdog

412 views

Published on

This is the story of how a small college with a department of 4 and a zero-based budget, developed a mobile solution that is affordable and provides vital information to future and current students, faculty, and staff.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

A Mobile Solution for #TheUnderdog

  1. 1. A Mobile Solution for #TheUnderdog by Sylvia Nicosia Director of Web Programming and Development @synicosia #TheUnderdog
  2. 2. Growing use of mobile devices
  3. 3. 2010 – Time for a change
  4. 4. Needed a centralized solution Uniform look Keep track of content Workflow = CMS
  5. 5. Unforeseen obstacles emerged…
  6. 6. February 2012, official launch.
  7. 7. Then a new dilemma emerged…
  8. 8. Something needed to be done and a new search began for a solution An app for one device or an app for all of them?? Better yet, a mobile site :) http://www.hammer.net/template.asp?nav_id=438 Responsive Web Design - RWD?
  9. 9. Inventory of existing resources What we had:  CMS with RSS Feeds  Athletics Website with XML feeds  Calendar with iCal feeds  Analytics information  Downloadable PDF Campus Map What we wanted:  Affordable solution  Robust and efficient system  Technical support  To work perfectly with what we had  Better map for mobile devices
  10. 10. There’s no need to fear, Underdog is here!
  11. 11. Open-source mobile framework Kurogo to the rescue  Data integration  Cross-platform user experience  Customization = Image source: http://kurogo.org/home/
  12. 12. Well documented set-up and installation * Based on Version 1.5 installation: http://kurogo.org/guide/setup.html
  13. 13. No complicated coding for theme customization
  14. 14. Out-of-the-box modules fetch content from CMS to mobile site
  15. 15. A mobile framework that allows you integrate your data sources with customized modules Emergency Module: Content from XML feed.
  16. 16. And a very powerful Map module. Google Earth map Map rendered on mobile KML File
  17. 17. If RWD is not an immediate option, a mobile framework can be a temporary solution. But wait… Isn’t it better just to have a RWD site? Are there any advantages/disadvantages for RWD and separate mobile sites?
  18. 18. Responsive Web Design - RWD Advantages  One design fits all  Optimized Web experience  Website updates done in one place  No need to URL redirect
  19. 19. Responsive Web Design - RWD Disadvantages  Images/content are hidden in smaller devices. Images still load causing bandwidth issues.  Scrolling involved  Takes 30% extra time to implement
  20. 20. Separate Mobile Site Advantages  Specific content geared to mobile situations  Download time is faster  Takes advantage of mobile devices features: Geo-location, click-to-call, touch events  Faster to implement
  21. 21. Separate Mobile Site Disadvantages  Only certain content from full site is available on mobile site  Two separate places to update code and content  URL redirect does not always work right from mobile to desktop and vice versa
  22. 22. Advantage of mobile frameworks: they come with out-of-the-box modules ready to use. Image source: https://www.modolabs.com/platform
  23. 23. We worked mobile disadvantages to our advantage:
  24. 24. No URL redirect. Provide options and let user decide.
  25. 25. Provide cross-links on both sites to allow users to make choices.
  26. 26. According to Brad Frost’s article, “Separate Mobile Website Vs. Responsive Website”… Responsive sites avoid “disparate experiences” that “deprive certain users of valuable information and features”; while mobile dedicated websites include “only a fraction of the full website’s features.” Frost, B. (2012). Smashing Magazine. Separate mobile website vs. responsive website. Retrieved from http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/ Image source: http://www.rspmarketing.com/trending-topics/responsive-design-vs-mobile-optimized
  27. 27. Ethan Marcotte, on the other hand, states the following: “Responsive Web Design isn’t intended to serve as a replacement for mobile sites.” It should be viewed as part design philosophy and part-end development strategy. “Research how your audiences access your site: not only the devices and browsers they use, but how, where, and why they use them.” Marcotte, E. (2011). Responsive web design. Page 108. New York: A Book Apart.
  28. 28. Wrap up…  Nothing is impossible  Know your audience and provide them with what will serve them best.  Make an inventory of your web assets.  Follow your analytics like your sixth sense.  Do your homework when researching open-source. Yes, you want support with that.  For URL redirects, always provide a choice for both full and mobile site.  Provide a link on your full site to your mobile site.  Always provide cross- links from both platforms.
  29. 29. Useful resources for open-source mobile frameworks for Higher Education… Name Link By Documentation Support Molly http://mollyproject .org/ University of Oxford http://molly.readthedocs .org/en/latest/index.html http://mollyproject.org/c ommunity.html UCLA Mobile Web Framework http://mwf.ucla.ed u/ UCLA https://github.com/ucla/ mwf/wiki http://mwf.ucla.edu/?go/ develop MIT Mobile Web https://github.com /MIT-Mobile/MIT- Mobile-Web MIT ------- A better README is forthcoming… Mobile Web OSP https://github.com /dmolsen/MIT- Mobile-Web A fork from MIT Mobile Web http://mobilewebosp.pb works.com/w/page/2792 3975/FrontPage --------- Kurogo http://kurogo.org/h ome/ Modo Labs http://kurogo.org/docs/ https://groups.google.c om/forum/#!forum/kurog o-dev
  30. 30. Useful resources for RWD frameworks… Name Link Documentation Support Gumby http://gumbyframewo rk.com/ http://gumbyframew ork.com/docs https://plus.google.c om/communities/108 760896951473344451 Bootstrap http://twitter.github.io /bootstrap/ http://twitter.github.i o/bootstrap/getting- started.html https://github.com/tw itter/bootstrap/issue s?state=open Susy http://susy.oddbird.n et/ http://susy.oddbird.n et/guides/getting- started/ http://stackoverflow. com/questions/tagge d/susy-compass Foundation http://foundation.zur b.com/ http://foundation.zur b.com/docs/ https://groups.googl e.com/forum/#!forum /foundation- framework-
  31. 31. More good stuff…  More Responsive Web Design - RWD frameworks: http://stunningfeed.com/25-best-css-frameworks-for- responsive-webdesign/  Adaptive Images (yes, you will need that too): http://adaptive-images.com/  Sebarmeli – JS Redirection Mobile Site: https://github.com/sebarmeli/JS-Redirection-Mobile-Site  Tutorials to get you started in Google Analytics: http://blog.kissmetrics.com/50-resources-for-getting-the- most-out-of-google-analytics/  Good book to read about GA: Web Analytics 2.0 by Avinash Kaushik
  32. 32. Two great classes by Higher Ed Experts  Responsive Web Design for Higher Ed (RWD) http://higheredexperts.com/studyrwd/  Web Analytics for Higher Ed (WAHE) http://higheredexperts.com/studywahe/
  33. 33. Thank you all. Last year this conference helped us tremendously. This presentation is our way for us to give back to you. Enjoy the rest of the conference. PowerPoint presentation available at: sylvianavarronicosia.com/portfolio/eduweb-2013
  34. 34. Q & A *Slide presentation available at: sylvianavarronicosia.com

×