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

The good, the bad, and the squishy

Avatar for Steve Barnett Steve Barnett
September 19, 2014
Technology
1
590

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
120
How to get the most (accessibility) out of a design system
Avatar for Steve Barnett stevebarnett
0
140
Introduction to accessibility
Avatar for Steve Barnett stevebarnett
0
310
Introduction to accessibility
Avatar for Steve Barnett stevebarnett
0
75
Getting the most out of jest-axe
Avatar for Steve Barnett stevebarnett
0
190
Oh my GAAD! (The wide world of accessibility)
Avatar for Steve Barnett stevebarnett
0
130
From myth-busting to "but/and"-ing: Persuading people to do accessibility work
Avatar for Steve Barnett stevebarnett
0
68
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
90
The WebAIM Million and making our stuff more accessible
Avatar for Steve Barnett stevebarnett
0
120

Other Decks in Technology

See All in Technology
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
Avatar for kubell kubell_hr
1
150
Claude Code Actionを使ったコード品質改善の取り組み
Avatar for Katsunori Kanda potix2
PRO
6
2.2k
AIエージェント最前線！ Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
Avatar for みのるん minorun365
PRO
14
5.1k
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
Avatar for Spatial AI Network spatial_ai_network
0
110
Oracle Cloud Infrastructure：2025年6月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
2
240
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
Avatar for Hiroshi Ito itohiro73
0
150
Javaで作る RAGを活用した Q＆Aアプリケーション
Avatar for Recruit recruitengineers
PRO
1
110
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
Avatar for Yoichi Satake (Yoh) yoh
1
140
2年でここまで成長！AWSで育てたAI Slack botの軌跡
Avatar for iwamot iwamot
PRO
4
700
～宇宙最速～ 2025年AWS Summit レポート
Avatar for sleepingsato satodesu
1
1.8k
AIの最新技術＆テーマをつまんで紹介＆フリートークするシリーズ #1 量子機械学習の入門
Avatar for Takahiro Esaki tkhresk
0
140
How Community Opened Global Doors
Avatar for hiroramos hiroramos4
PRO
1
120

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
370
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k

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