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

Say hello to offline first!

Ola Gasidlo
May 19, 2014
Programming
4
2.2k

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

See All by Ola Gasidlo
AYB14 - offline first <3
zoepage
0
110
AYB14 - offline first <3
zoepage
2
1.1k
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
88

Other Decks in Programming

See All in Programming
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
610
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
Discord Bot with AI -for English learners-
xin9le
1
120
42 best practices for Symfony, a decade later
tucksaun
1
180
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
760
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
Jakarta EE meets AI
ivargrimstad
0
230
Full stack testing :: basic to basic
up1
1
930
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
710
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270

Featured

See All Featured
BBQ
matthewcrist
85
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Cost Of JavaScript in 2023
addyosmani
45
7k
GraphQLとの向き合い方2022年版
quramy
44
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Invisible Side of Design
smashingmag
298
50k
Making the Leap to Tech Lead
cromwellryan
133
9k
Designing for Performance
lara
604
68k
Gamification - CAS2011
davidbonilla
80
5.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
160

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