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

Say hello to offline first!

Say hello to offline first!

// slidedeck with speakernotes
https://docs.google.com/presentation/d/1kGKyvw6BsQMFcQYDagCHzBjYoqvBnSg6NDRzEyQ-edM/edit?usp=sharing

Re-Imagining Web Design and Development for the Real World

We live in a disconnected & battery-powered world. Devices and user interactions have changed enormously over the years. What hasn't changed is the internet itself and the way how we concept and build applications in it.

Offline First does not only mean reverting our design processes and creating apps for offline use first. In this new world where "online" is just a feature and not default state, we have to find new approaches and patterns for our thoughts and processes in app design and development.

This talk will cover the philosophy behind and current state of offline support on the web, the starting points and the design challenges posed by developing a first-class offline experience, and it will also give you first insights in the technical parts.

How can we change the way the web is built?

Ola Gasidlo

May 19, 2014
Tweet

More Decks by Ola Gasidlo

Other Decks in Programming

Transcript

  1. Say Hello To Offline First
    Re-Imagining Web Design and
    Development for the Real World
    we <3 beyondtellerrand

    View Slide

  2. Ola Gasidlo
    - Javascript & Frontend Developer for 10 years
    - Core Member of Team Hood.ie
    - Organizer of OpenTechSchool Dortmund
    [email protected]

    View Slide

  3. The internet turned 25 this year!

    View Slide

  4. We grew up.

    View Slide

  5. View Slide

  6. amount of mobile-only web users is out of reach

    View Slide

  7. View Slide

  8. Tell me...

    View Slide

  9. View Slide

  10. View Slide

  11. “WE CAN’T KEEP BUILDING APPS WITH
    THE DESKTOP MINDSET OF PERMANENT,
    FAST CONNECTIVITY, WHERE A
    TEMPORARY DISCONNECTION OR SLOW
    SERVICE IS REGARDED AS A PROBLEM
    AND COMMUNICATED AS AN ERROR.”

    View Slide

  12. View Slide

  13. ...work offline...

    View Slide

  14. ...MANIFEST...

    View Slide

  15. ...MANIFEST…
    ++ use app offline
    ++ loading is fast
    ++ users get the full experience

    View Slide

  16. ...MANIFEST…

    ...

    IE8+ / FF 3.5+ / Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+

    View Slide

  17. ...MANIFEST…
    AddType text/cache-manifest .appcache

    View Slide

  18. ...MANIFEST…
    CACHE MANIFEST
    # 2013-11-13:v3
    CACHE
    index.html
    NETWORK:
    *
    FALLBACK:
    /online.html /offline.html

    View Slide

  19. ...MANIFEST…
    http://appcache.rawkes.com/
    (generate it!)
    or read the tutorial: http://www.html5rocks.com/en/tutorials/appcache/beginner/

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. offline > error handling

    View Slide

  25. inform user

    View Slide

  26. View Slide

  27. build trust

    View Slide

  28. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

    View Slide

  29. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

    View Slide

  30. organize data

    View Slide

  31. View Slide

  32. decide

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. Do not harm human!
    (first law of robotic)

    View Slide

  45. Do not lose data!
    (first law of offline first)

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. http://hood.ie / http://offlinefirst.org/

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. hoodie <3 you
    @misprintedtype / @hoodiehq

    View Slide