$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Nick DeNardis

Other Decks in Technology

Transcript

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

    View Slide

  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/

    View Slide

  3. Mobile Truths

    View Slide

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

    View Slide

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

    View Slide

  6. Already behind

    View Slide

  7. Already behind
    180%

    View Slide

  8. Not a fluke

    View Slide

  9. Choices

    View Slide

  10. Bored Local Microtask

    View Slide

  11. Web approach
    Make existing pages mobile friendly
    Create a completely separate mobile
    presence
    App approach
    Single codebase, multiple builds
    Completely native, multiple codebases

    View Slide

  12. Separate Mobile
    Advantage Disadvantage
    Start from scratch
    Focus on important elements
    Doesn’t impact current site
    Duplicate Information
    Missing content
    Missing features

    View Slide

  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

    View Slide

  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?

    View Slide

  15. View Slide

  16. Your choice
    • Time
    • Cost
    • Staff skill/availability
    • Web publishing environment
    • What can you directly edit?
    Let’s ignore apps for the moment.

    View Slide

  17. Media Queries
    Separate style sheets
    Inherited
    http://www.w3.org/TR/css3-mediaqueries/
    media="screen and (max-device-width: 480px)"
    href="mobile.css" />


    @media screen and (max-device-width: 480px) {
    .column {
    float: none;
    }
    }

    View Slide

  18. Things to consider
    Text size
    Element positioning
    Image size
    Touch
    HTTP optimization

    View Slide

  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

    View Slide

  20. Separate Mobile
    Presence

    View Slide

  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

    View Slide

  22. http://www.markus-falk.com/mobile-frameworks-comparison-chart/

    View Slide

  23. jQTouch
    • Created in 2009
    • UI looks like iOS
    • Works best with Webkit
    • Based on jQuery or
    Zepto.js
    • Easiest to setup
    • Free

    View Slide

  24. jQuery Mobile
    • Created in 2010
    • UI is consistent
    • Cross-browser support is
    great
    • Performance is “good”
    • Easiest after jQTouch
    • ThemeRoller
    • Free

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  28. Kurogo

    View Slide

  29. Clean slate in
    15 mins

    View Slide

  30. m.institution.edu

    View Slide

  31. Customization

    View Slide

  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)

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  36. Authentication
    • Make it optional
    • Added value
    • “Exclusive” content
    • Actions tie to CRM
    • Ensure security

    View Slide

  37. Edge cases
    • Single data source
    • Data access for mobile
    • API
    • Low Bandwidth
    • No Bandwidth
    • Plan for resumability
    • State checking is a must

    View Slide

  38. The API runs the
    show

    View Slide

  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

    View Slide

  40. API Resources
    • RESTful
    • MVC
    • CakePHP
    • Rudy on Rails
    • Integrates in to existing data structures
    Output: JSON not XML

    View Slide

  41. Think context

    View Slide

  42. Landing pages

    View Slide

  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/

    View Slide

  44. ua-parser-php

    View Slide

  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

    View Slide

  46. Visitor Flow

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  50. Questions?
    Don’t be shy.

    View Slide

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

    View Slide