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

The good, the bad, and the squishy

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Steve Barnett Steve Barnett
September 19, 2014
Technology
610
1

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

More Decks by Steve Barnett

See All by Steve Barnett
D&D and Accessibility
Avatar for Steve Barnett stevebarnett
0
160
How to get the most (accessibility) out of a design system
Avatar for Steve Barnett stevebarnett
0
180
Introduction to accessibility
Avatar for Steve Barnett stevebarnett
0
360
Introduction to accessibility
Avatar for Steve Barnett stevebarnett
0
100
Getting the most out of jest-axe
Avatar for Steve Barnett stevebarnett
0
240
Oh my GAAD! (The wide world of accessibility)
Avatar for Steve Barnett stevebarnett
0
170
From myth-busting to "but/and"-ing: Persuading people to do accessibility work
Avatar for Steve Barnett stevebarnett
0
88
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
120
The WebAIM Million and making our stuff more accessible
Avatar for Steve Barnett stevebarnett
0
150

Other Decks in Technology

See All in Technology
Oracle Cloud Infrastructure(OCI)：Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
Avatar for oracle4engineer oracle4engineer
PRO
2
17k
レガシーシステムをどう次世代に受け継ぐか
Avatar for 立入 tachiiri
0
330
バックオフィスPJのPjMをコーポレートITが担うとうまくいく3つの理由
Avatar for chama yueda256
1
290
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
16
410k
AgentCore RuntimeからS3 Filesをマウントしてみる
Avatar for Har1101 har1101
3
390
New CBs New Challenges
Avatar for Yosuke Suzuki ysuzuki
1
170
デシリアライゼーションを理解する / Inside Deserialization
Avatar for HASEGAWA Tomoki tomzoh
0
220
3つのボトルネックを解消し、リリースエンジニアリングを再定義した話
Avatar for Nealle nealle
0
330
仕様通り動くの先へ。Claude Codeで「使える」を検証する
Avatar for Gota gotalab555
8
3.1k
制約を設計する - 非決定性との境界線 / Designing constraints
Avatar for soudai sone soudai
PRO
6
2.4k
ふりかえりを 「あそび」にしたら、 学習が勝手に進んだ / Playful Retros Drive Learning
Avatar for katoaz katoaz
0
430
AIを活用したアクセシビリティ改善フロー
Avatar for 出口 裕貴 degudegu2510
1
160

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
6.4k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
160
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
430
Design in an AI World
Avatar for tapps tapps
0
190
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
170
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
290
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k

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