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 full-size slide

  2. Ola Gasidlo
    - Javascript & Frontend Developer for 10 years
    - Core Member of Team Hood.ie
    - Organizer of OpenTechSchool Dortmund
    twitter@misprintedtype

    View full-size slide

  3. The internet turned 25 this year!

    View full-size slide

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

    View full-size slide

  5. “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 full-size slide

  6. ...work offline...

    View full-size slide

  7. ...MANIFEST...

    View full-size slide

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

    View full-size slide

  9. ...MANIFEST…

    ...

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. offline > error handling

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. organize data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. hoodie <3 you
    @misprintedtype / @hoodiehq

    View full-size slide