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

Pragmatic Approaches to the Mobile Web

Avatar for Matthew Buchanan Matthew Buchanan
November 17, 2012
Technology
0
100

Pragmatic Approaches to the Mobile Web

Slides from a short presentation I gave at DevMob last November about how we approached the responsive mobile version of Letterboxd.
Avatar for Matthew Buchanan

Matthew Buchanan

November 17, 2012
Tweet

More Decks by Matthew Buchanan

See All by Matthew Buchanan
Better Letters
Avatar for Matthew Buchanan matthewbuchanan
2
140
Zero to Hero, a jQuery Primer
Avatar for Matthew Buchanan matthewbuchanan
8
390
Map Local and other works of Staggering Genius
Avatar for Matthew Buchanan matthewbuchanan
1
130
The State of Web Type
Avatar for Matthew Buchanan matthewbuchanan
5
290
Web Bites
Avatar for Matthew Buchanan matthewbuchanan
2
130
Tumblr 20x20
Avatar for Matthew Buchanan matthewbuchanan
3
170
Web Typography
Avatar for Matthew Buchanan matthewbuchanan
5
330

Other Decks in Technology

See All in Technology
いまさら聞けない Git 超入門 〜Gitって結局なに？から始める第一歩〜
Avatar for とことんDevOps devops_vtj
0
170
KMP導⼊において、マネジャーとして考えた事
Avatar for SansanTech sansantech
PRO
1
210
JNation 2025 - Quarkus for Spring Developers
Avatar for Eric Deandrea edeandrea
PRO
0
110
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
Avatar for yamamoto-yuta yamamotoyuta
0
240
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
Avatar for 高玉 広和 / TAKATAMA Hirokazu takatama
4
1.5k
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
Avatar for きむそん kimuson
2
1.3k
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
Avatar for uutan1108 ohmori_yusuke
2
120
GigaViewerにおけるMackerel APM導入の裏側
Avatar for koudenpa 7474
0
460
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
Avatar for tetsuzawa tetsuzawa
0
470
AIのための
オンボーディングドキュメントを整備する - hirotea
Avatar for hirotea hirotea
9
2.3k
継続戦闘能⼒
Avatar for SansanTech sansantech
PRO
0
220
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.7k

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
620
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.6k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
Navigating Team Friction
Avatar for Lara Hogan lara
186
15k

Transcript

  1. Pragmatic Approaches to MOBILE WEB Matthew Buchanan • @mrb

  2. The Old Way m.nzherald.co.nz

  3. The New Way MEDIA QUERIES FLUID GRIDS FLUID IMAGES

  4. The New Way SAME URL SAME MARKUP <> ALL DEVICES

  5. But… JAVASCRIPT HEAVY? DIFFERENT MARKUP? <>

  6. Wishlist SAME TEMPLATES SMART DEFAULT SOME MARKUP DIFFERENCES USER CAN

    OVERRIDE RESPONSIVE ON MOBILES
  7. None

  8. Solution

  9. Solution CHECK COOKIE FOR USER SELECTION

  10. Solution CHECK COOKIE IF SET, RENDER USER’S CHOICE

  11. Solution CHECK COOKIE IF SET… IF NOT SET, CHECK DEVICE

    WIDTH

  12. Solution CHECK COOKIE IF SET… IF NOT SET… SET &

    CHECK COOKIE, RELOAD PAGE

  13. Solution CHECK COOKIE IF SET… IF NOT SET… SET COOKIE

    GOTO 10

  14. Wishlist SAME TEMPLATES RESPONSIVE ON MOBILES SMART DEFAULT USER CAN

    OVERRIDE SOME MARKUP DIFFERENCES