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

Secrets to Lightning Fast Mobile Design

Avatar for Mike Krieger Mike Krieger
December 06, 2011
Technology
251
170k

Secrets to Lightning Fast Mobile Design

Presentation given at Warm Gun 2011.

Avatar for Mike Krieger

Mike Krieger

December 06, 2011
Tweet

More Decks by Mike Krieger

See All by Mike Krieger
Scaling Instagram at AirBnB OpenAir 2015
Avatar for Mike Krieger mikeyk
15
4.4k
Scaling Instagram
Avatar for Mike Krieger mikeyk
154
49k

Other Decks in Technology

See All in Technology
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
380
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
Avatar for abemii_ abemii
0
150
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
130
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
100
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
130
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
170
AIが実装する時代、人間は仕様と検証を設計する
Avatar for Gota gotalab555
1
190
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
610
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
140
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
270
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
220

Featured

See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
58
50k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
900
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
150
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
690
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
100

Transcript

  1. Secrets to Lightning- Fast Mobile Design Warm Gun 2011 Mike

    Krieger Instagram 1

  2. me - Co-founder, Instagram - Previously: UX & Front-end @

    Meebo - Stanford HCI BS/MS - @mikeyk on everything 2

  3. 3

  4. 12 million users in 12 months 4

  5. 5

  6. 6

  7. 7

  8. 8

  9. “Fast, beautiful photo sharing” 9

  10. “Fast, beautiful photo sharing” 10

  11. making your mobile experiences feel lightning-fast 11

  12. not the code, but the experience 12

  13. mobile design requires the ultimate in design & development collaboration

    13

  14. 14

  15. speed matters 15

  16. mobile experiences fill gaps while we wait 16

  17. no one wants to wait while they wait 17

  18. JSON parsing UITableViewCell HTTP pipelining 18

  19. creative design decisions 19

  20. how speed can be a design feature 20

  21. how design can be a speed feature 21

  22. implementation details 22

  23. details that need to be designed 23

  24. 3 secrets to apps that feel lightning-fast, even on 3G

    24

  25. 1. perform actions optimistically 2. adaptively pre-load content 3. move

    bits when no-one’s watching 25

  26. perform actions optimistically 26

  27. latency is what’ll get ya 27

  28. make the user feel productive 28

  29. 29

  30. 30

  31. request is going, but we register the like 31

  32. 32

  33. 33

  34. request is going, but we register the comment 34

  35. 35

  36. 36

  37. if it fails? 37

  38. 38

  39. 39

  40. why it works 40

  41. @thesarahnator 41

  42. @stayintheshade 42

  43. adaptive pre-loading 43

  44. basic version: load content before it’s needed 44

  45. “let’s load all the images in the feed once the

    user loads the page” 45

  46. fresh feed 30 photos to load 46

  47. pitfall 47

  48. 48

  49. 49

  50. 50

  51. 51

  52. 52

  53. 53

  54. 54

  55. 55

  56. 56

  57. instead... 57

  58. re-prioritize based on interest 58

  59. 59

  60. 60

  61. 61

  62. 62

  63. 63

  64. 64

  65. listen to what their flicks & taps are telling you

    65

  66. why it works 66

  67. @miriamjasmine 67

  68. move bits when no-one’s watching 68

  69. sign-up 69

  70. 70

  71. ? 71

  72. 72

  73. 73

  74. upload 74

  75. 75

  76. 76

  77. 77

  78. 78

  79. 79

  80. 80

  81. 81

  82. most apps upload here we start uploading here 82

  83. non-optimal engineering solution 83

  84. 2 requests, 2 round-trips + latency need to match up

    84

  85. but makes uploads feel really, really quick 85

  86. send data/info as soon as part of it’s ready to

    go; match up later 86

  87. worth it even if you throw out the data on

    cancel 87

  88. why it works 88

  89. where to go from here 89

  90. “it works” isn’t enough 90

  91. design & development collaboration 91

  92. 92

  93. 1. perform actions optimistically 2. adaptively pre-load content 3. move

    bits when no-one’s watching 93

  94. Qs? we’re hiring: [email protected] get in touch: @mikeyk 94