Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Producing a mobile presence. Timeline: Yesterday...

Producing a mobile presence. Timeline: Yesterday...

Having a comprehensive mobile strategy is great but your users aren’t waiting around till you have have a pixel perfect solution. Your users are on their mobile devices right now waiting to access your content, having something up is better than nothing. This talk is a look at creating a practical, agile and ever evolving mobile Web presence. A mobile presence can be created on a small budget and without a lot of time. An introduction to the tools, frameworks and testing strategies needed to get a mobile website up quickly and moving in a more useful and usable direction each day.

Nick DeNardis

June 11, 2012

More Decks by Nick DeNardis

Other Decks in Technology


  1. Producing a mobile presence. @nickdenardis / #psuweb12 http://www.flickr.com/photos/whisperwolf/4487009765/ Timeline: Yesterday.

  2. Nick DeNardis Associate Director of Web Communications at Wayne State

    University http://wayne.edu/ Host of EDU Checkup http://educheckup.com/ Curator of EDU Snippits http://edusnippits.com/ Writer for .eduGuru http://doteduguru.com/
  3. Mobile Truths

  4. Not going anywhere 1,450,000 devices per day 371,000 births per

  5. Not going anywhere 1,450,000 devices per day 371,000 births per

    day 4x
  6. Already behind

  7. Already behind 180%

  8. Not a fluke

  9. Choices

  10. Bored Local Microtask

  11. Web approach Make existing pages mobile friendly Create a completely

    separate mobile presence App approach Single codebase, multiple builds Completely native, multiple codebases
  12. Separate Mobile Advantage Disadvantage Start from scratch Focus on important

    elements Doesn’t impact current site Duplicate Information Missing content Missing features
  13. Integrated Mobile Advantage Disadvantage Publish once model Single URL for

    all content All features/content still available Overabundance of content More difficult/time consuming to setup Stuck with existing architecture
  14. Apps Do you need hardware access? Camera support Image/file upload

    Access to things the browser can’t? Precise GPS High memory need? Who is the audience? Do you have time/resources?
  15. None
  16. Your choice • Time • Cost • Staff skill/availability •

    Web publishing environment • What can you directly edit? Let’s ignore apps for the moment.
  17. Media Queries Separate style sheets Inherited http://www.w3.org/TR/css3-mediaqueries/ <link rel="stylesheet" type="text/css"

    media="screen and (max-device-width: 480px)" href="mobile.css" /> <link rel="stylesheet" type="text/css" media="screen” href="desktop.css" /> <link rel="stylesheet" type="text/css" media="screen” href="main.css" /> @media screen and (max-device-width: 480px) { .column { float: none; } }
  18. Things to consider Text size Element positioning Image size Touch

    HTTP optimization
  19. Media Queries • Requires a lot of planning • HTML/CSS

    Bloat • Image resizing • Large amounts of extra bandwidth • CPU & Memory usage on resizing • “Hiding” images waste bandwidth • No way to get to “desktop” version • More code = more maintenance time
  20. Separate Mobile Presence

  21. • jQTouch http://jqtouch.com/ • jQuery Mobile http://jquerymobile.com/ • Sencha Touch

    http://www.sencha.com/products/touch • Molly Project http://mollyproject.org/ • Mobile Web OSP http://mobilewebosp.pbworks.com • Kurogo http://modolabs.com/kurogo-mobile-platform.php
  22. http://www.markus-falk.com/mobile-frameworks-comparison-chart/

  23. jQTouch • Created in 2009 • UI looks like iOS

    • Works best with Webkit • Based on jQuery or Zepto.js • Easiest to setup • Free
  24. jQuery Mobile • Created in 2010 • UI is consistent

    • Cross-browser support is great • Performance is “good” • Easiest after jQTouch • ThemeRoller • Free
  25. Sencha Touch • Custom API framework • Pure Javascript API

    • UI is more native • Great cross-browser • Even better performance • Steep learning curve • Free, but paid support
  26. Molly Project • Custom API framework • Built in functions

    out of the box • UI is custom • Works on any mobile device • Has specific server requirements to setup • Free
  27. Mobile OSP • Created by Dave Olsen • Hybrid approach

    • Great cross browser support • Good performance • Built in functionality out of the box • Highered focused • Free
  28. Kurogo

  29. Clean slate in 15 mins

  30. m.institution.edu

  31. Customization

  32. Mobile OSP • Download from GitHub https://github.com/dmolsen/MIT-Mobile-Web • Unzip to

    m.institution.edu • Requirements: • Apache 2+ • PHP 5.1+ • MySQL (optional)
  33. Mobile OSP Config • Open the root folder of your

    install • Copy 'config.gen.copy.inc.php' to 'config.gen.inc.php’ • Open 'config.gen.inc.php' and start customizing • Complete Documentation: http://mobilewebosp.pbworks.com/
  34. Low hanging fruit • Useful on the go • Phone

    numbers • Directory information • Today’s events • Today’s news • Weather • Emergency messaging • Useful in general • Degree List • Request for Information form • Social Links • Recent photos
  35. The tough stuff (but worth it) • These will keep

    them coming back • Campus map • Bus/Shuttle routes (real time) • Parking availability • Computer/Lab availability • Grades • Class Schedule • Athletics
  36. Authentication • Make it optional • Added value • “Exclusive”

    content • Actions tie to CRM • Ensure security
  37. Edge cases • Single data source • Data access for

    mobile • API • Low Bandwidth • No Bandwidth • Plan for resumability • State checking is a must
  38. The API runs the show

  39. REST and CRUD GET request to /api/news – List all

    news GET request to /api/news/1 – Info for news with ID of 1 POST request to /api/news – Create new news PUT request to /api/news/1 – Update news with ID of 1 DELETE request to /api/news/1 – Delete news with ID of 1
  40. API Resources • RESTful • MVC • CakePHP • Rudy

    on Rails • Integrates in to existing data structures Output: JSON not XML
  41. Think context

  42. Landing pages

  43. Mobile/desktop detection • Detector http://detector.dmolsen.com/ • Detect Mobile http://detectmobilebrowsers.mobi/ •

    PHP Mobile Detect http://code.google.com/p/php-mobile- detect/
  44. ua-parser-php

  45. Analytics • Track more than page hits • Use the

    same analytics account for app • Create the filter right away to segment • Pay attention • Time on site/app • Visitor flow • Exit pages
  46. Visitor Flow

  47. Making it an app • http://phonegap.com

  48. • Determine how your users currently access your website •

    Determine what you can change on a consistent basis • What low hanging fruit can you offer immediately? • Is a full app or separate website required? • Use a framework that aligns with your long term strategy
  49. • Create or tap in to a single source API

    • Track users and goals from the beginning with the same account • Create a marketing landing page • Ensure all authentication security is in place • Determine plans for expansion & how to announce new features
  50. Questions? Don’t be shy.

  51. Thank You @nickdenardis [email protected] http://nickdenardis.com/ http://slideshare.net/nickdenardis