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

The good, the bad, and the squishy

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Steve Barnett Steve Barnett
September 19, 2014
Technology
1
610

The good, the bad, and the squishy

A talk about thinking and designing squishy, covering Progressive Enhancement, Responsive Web Design, and deliverables that can help.

Avatar for Steve Barnett

Steve Barnett

September 19, 2014
Tweet

More Decks by Steve Barnett

See All by Steve Barnett
D&D and Accessibility
Avatar for Steve Barnett stevebarnett
0
150
How to get the most (accessibility) out of a design system
Avatar for Steve Barnett stevebarnett
0
160
Introduction to accessibility
Avatar for Steve Barnett stevebarnett
0
350
Introduction to accessibility
Avatar for Steve Barnett stevebarnett
0
91
Getting the most out of jest-axe
Avatar for Steve Barnett stevebarnett
0
230
Oh my GAAD! (The wide world of accessibility)
Avatar for Steve Barnett stevebarnett
0
160
From myth-busting to "but/and"-ing: Persuading people to do accessibility work
Avatar for Steve Barnett stevebarnett
0
82
Love in the Time of Coronavirus: what the pandemic can teach us about creating a more caring, inclusive, and equitable world.
Avatar for Steve Barnett stevebarnett
1
110
The WebAIM Million and making our stuff more accessible
Avatar for Steve Barnett stevebarnett
0
140

Other Decks in Technology

See All in Technology
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
340
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
Avatar for hiro-torii hiro_torii
0
130
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
180
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
620
今日から始める Amazon Bedrock AgentCore
Avatar for Har1101 har1101
4
420
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
470
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
220
コンテナセキュリティの最新事情 ~ 2026年版 ~
Avatar for Kyohei Mizumoto kyohmizu
5
920
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
700
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.7k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
250
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
220
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
98

Transcript

  1. The good, the bad, and the squishy Steve Barnett

  2. naga.co.za/squishy @maxbarners Front-end developer at Praekelt

  3. BED — FED — Des

  4. Squishy

  5. What we'll cover Progressive Enhancement Responsive Web Design Deliverables

  6. Progressive Enhancement

  7. None

  8. Progressive Enhancement

  9. None
  10. None
  11. None
  12. None

  13. HTML

  14. CSS HTML

  15. JS CSS HTML

  16. JS fails CSS HTML

  17. None

  18. Levels of Optimisation Cutting the mustard

  19. Access regardless of Device, Connection, Disability

  20. Squishy

  21. Responsive Web Design

  22. @RWD

  23. Not about resizing your browser

  24. None

  25. Mobile First

  26. * First (* = All The Things)

  27. Squishy

  28. Deliverables

  29. Mockup

  30. Style Tiles

  31. Front-end Style Guide

  32. None
  33. None

  34. Style-Guide Driven Development

  35. Squishy

  36. What we've covered Progressive Enhancement Responsive Web Design Deliverables

  37. Thanks! Questions?  Steve Barnett naga.co.za/squishy @maxbarners

  38. It depends ¯\_()_/¯

  39. 4 flickr.com/photos/brad_frost/ 7387759388 4 flickr.com/photos/p_valdivieso/ 11825680466 4 flickr.com/photos/w4nd3rl0st/ 6676987847 4

    behance.net/gallery/Cinemagraphs- Escalators/12202611 4 flickr.com/photos/psd/2731067095/ 4 flaticon.com