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

Say hello to offline first!

Avatar for Ola Gasidlo Ola Gasidlo
May 19, 2014
Programming
4
2.3k

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?
Avatar for Ola Gasidlo

Ola Gasidlo

May 19, 2014
Tweet

More Decks by Ola Gasidlo

See All by Ola Gasidlo
AYB14 - offline first <3
Avatar for Ola Gasidlo zoepage
0
130
AYB14 - offline first <3
Avatar for Ola Gasidlo zoepage
2
1.1k
Coding the dream
Avatar for Ola Gasidlo zoepage
1
1.1k
offline first
Avatar for Ola Gasidlo zoepage
1
93

Other Decks in Programming

See All in Programming
GitHub Copilot for Azureを使い倒したい
Avatar for Kento.Yamada ymd65536
1
340
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
Avatar for Masayuki Izumi izumin5210
6
1.6k
fieldalignmentから見るGoの構造体
Avatar for kuro kuro_kurorrr
0
140
Storybookの情報をMCPサーバー化する
Avatar for Shota Iwamatsu shota_tech
3
1.4k
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
Avatar for hachi (Hayao Kimura) hayaokimura
5
1.2k
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
Avatar for Kotaro Kamashima kotaro666
0
120
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
320
파급효과: From AI to Android Development
Avatar for HyunWoo Lee l2hyunwoo
0
170
インプロセスQAにおいて大事にしていること / In-process QA Meetup
Avatar for MEDLEY, INC. medley
0
190
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
Avatar for chobishiba chobishiba
1
170
UMAPをざっくりと理解 / Overview of UMAP
Avatar for kaityo256 kaityo256
PRO
3
1.6k
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.9k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
187
11k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
179
53k

Transcript

  1. Say Hello To Offline First Re-Imagining Web Design and Development

    for the Real World we <3 beyondtellerrand

  2. Ola Gasidlo - Javascript & Frontend Developer for 10 years

    - Core Member of Team Hood.ie - Organizer of OpenTechSchool Dortmund twitter@misprintedtype

  3. The internet turned 25 this year!

  4. We grew up.

  5. None

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

  7. None

  8. Tell me...

  9. None
  10. None

  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.”
  12. None

  13. ...work offline...

  14. ...MANIFEST...

  15. ...MANIFEST… ++ use app offline ++ loading is fast ++

    users get the full experience

  16. ...MANIFEST… <html manifest="example.appcache"> ... </html> IE8+ / FF 3.5+ /

    Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+

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

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

    /online.html /offline.html

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

  20. None
  21. None
  22. None
  23. None

  24. offline > error handling

  25. inform user

  26. None

  27. build trust

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

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

  30. organize data

  31. None

  32. decide

  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None

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

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

  46. None
  47. None
  48. None

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

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None

  64. hoodie <3 you @misprintedtype / @hoodiehq