惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
PCI Perspectives
PCI Perspectives
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Google Online Security Blog
Google Online Security Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
The GitHub Blog
The GitHub Blog
S
Secure Thoughts
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
WordPress大学
WordPress大学
SecWiki News
SecWiki News
B
Blog
小众软件
小众软件
Hacker News - Newest:
Hacker News - Newest: "LLM"
Webroot Blog
Webroot Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
L
LINUX DO - 热门话题
Recent Commits to openclaw:main
Recent Commits to openclaw:main
酷 壳 – CoolShell
酷 壳 – CoolShell
IT之家
IT之家
The Cloudflare Blog
Google DeepMind News
Google DeepMind News
Know Your Adversary
Know Your Adversary
Y
Y Combinator Blog
F
Fortinet All Blogs
W
WeLiveSecurity
博客园 - Franky
MongoDB | Blog
MongoDB | Blog
Last Week in AI
Last Week in AI
The Last Watchdog
The Last Watchdog
S
Schneier on Security
爱范儿
爱范儿
V
V2EX - 技术
L
LINUX DO - 最新话题
月光博客
月光博客
博客园 - 【当耐特】
Latest news
Latest news
阮一峰的网络日志
阮一峰的网络日志
博客园 - 司徒正美
U
Unit 42
Schneier on Security
Schneier on Security
E
Exploit-DB.com RSS Feed
J
Java Code Geeks
Cyberwarzone
Cyberwarzone
T
The Blog of Author Tim Ferriss
TaoSecurity Blog
TaoSecurity Blog
博客园 - 叶小钗
T
Troy Hunt's Blog
大猫的无限游戏
大猫的无限游戏
AI
AI
Security Latest
Security Latest

Matthias Ott

Hello Again, World This, Still Not for Everyone The Shape of Friction WeissKlang L1 – Punching Above Its Weight Continvoucly Morged Value Webspace Invaders To Affinity and Beyond The Mystery of Storytelling Amateurs! Echoes of Connection Linear() Is Not (That) Linear View Transitions: The Smooth Parts Adding AVIF and WebP Support to My Craft CMS Site Challenge Acoustic Room Treatment and Building Sound Panels, Part 1: Planning Play On Overshoot The HTML Output Element Listening Closely Compressed Fluid Typography The Lifeblood of the Web What Could Go Wrong? That’s My Rank Making Space CSS :is() :where() the Magic Happens Visual Regression Testing for External URLs With Playwright Jane Goodall’s Famous Last Words European Tech Alternatives 🇪🇺 Independent Type Foundry Advent Calendar – Day 24: NaN Independent Type Foundry Advent Calendar – Day 23: Typotheque Independent Type Foundry Advent Calendar – Day 22: 205TF Independent Type Foundry Advent Calendar – Day 21: HvD Fonts Independent Type Foundry Advent Calendar – Day 20: Frere-Jones Type Independent Type Foundry Advent Calendar – Day 19: Fontwerk Independent Type Foundry Advent Calendar – Day 18: Vectro Independent Type Foundry Advent Calendar – Day 17: Studio René Bieder Independent Type Foundry Advent Calendar – Day 16: R-Typography Independent Type Foundry Advent Calendar – Day 15: David Jonathan Ross Independent Type Foundry Advent Calendar – Day 14: Interval Type Independent Type Foundry Advent Calendar – Day 13: Newglyph Independent Type Foundry Advent Calendar – Day 12: Swiss Typefaces Independent Type Foundry Advent Calendar – Day 11: Sharp Type Independent Type Foundry Advent Calendar – Day 10: Colophon Foundry Independent Type Foundry Advent Calendar – Day 9: Commercial Type Independent Type Foundry Advent Calendar – Day 8: Letters from Sweden Independent Type Foundry Advent Calendar – Day 7: Lineto Independent Type Foundry Advent Calendar – Day 6: Ohno Type Company Independent Type Foundry Advent Calendar – Day 5: Milieu Grotesque Independent Type Foundry Advent Calendar – Day 4: TypeMates Independent Type Foundry Advent Calendar – Day 3: Klim Type Foundry Independent Type Foundry Advent Calendar – Day 2: Dinamo Independent Type Foundry Advent Calendar – Day 1: Grilli Type The Independent Type Foundry Advent Calendar 2022 A Conversation With ChatGPT ChatGPT, please explain websites in the words of William Shakespeare Transient Frameworks Leaving Twitter Behind Converting Your Twitter Archive to Markdown The Wrong Question It Wasn’t Written Syndicating Posts from Your Personal Website to Twitter and Mastodon Suspension None of Your Business Doing Our Part Patch That Package Brain Dump Generating Accessibility Test Results for a Whole Website With Evaluatory The CSS Cascade, a Deep Dive Updates About Updates How to Delete Your Commit History in Git Unblocking Your Writing Blocks, Part 2: I’m Not an Expert nor a “Thought Leader” Connections No Wrong Notes Better Options Design Debt Finite and Infinite Games Don’t Assume, Validate. Necessity Is the Ultimate Teacher One Egg Go Deep There Is No Secret Code Balancing Risk Blue Eyes, Brown Eyes The Shortcut Boomerang My RSS Feed Collection of Personal Websites Frequency The Illusion of Control The Decisions Journey Write It Down Nownownow Into the Personal-Website-Verse Considering the Opposite What is it for? Unlimited Bowling. Never done. We Are Team Internet. We Need to Save #NetNeutrality. Progressive Search Data loss (also) by JavaScript Books I Will Definitely Maybe Read in 2017 Starting to Write Notes
Progressive
Matthias Ott · 2020-07-21 · via Matthias Ott

Ethan Marcotte wrote this on Twitter on Monday:

Nostalgia for the heyday of web design has to be balanced with the knowledge that much of what we did in the old days” was woefully, thoroughly inaccessible. We should acknowledge what an era did well, sure. But we need to be critical and clear-eyed about what it didn’t do well — and whom it excluded.

Inclusive design has come a long way. Of course, we still need to do much, much better. Even in 2020, the vast majority of websites still isn’t accessible. But at least, there seems to be a raised awareness for the topic within the web community. In the last few years, several books, articles, talks, and even whole conferences around inclusive design have certainly left their mark. Many of us now know that the privilege of building websites comes with the responsibility to build websites for everyone and, in this way, to provide access to technology for everyone.

Access to technology for everyone doesn’t come easy, though. As Ethan points out, “in the old days”, websites were highly inaccessible. The Flash era didn’t do much to improve accessibility on the Web either. Screens readers can scan linear, static HTML, but the dynamic, constantly changing nature of Flash sites made it almost impossible to optimize a Flash site so that a screen reader user would have a valuable experience. Besides that, Flash websites often also needed a lot of bandwidth and at least a decent CPU to run smoothly. And because you basically could do anything in a Flash movie, people did everything: There were no rules, no standards, no patterns, no fallbacks.

The progress we have nevertheless seen over the last two decades is the result of an ever-growing number of people pushing hard against the status quo. And this is not only true for accessibility, but also other essential building blocks of a modern, inclusive Web: Web standards, usability, performance, security, interoperability, and robustness. The Web of today is in many ways so much more mature than the Web of the early 2000s. And the progress in all of those areas makes the Web more inclusive already.

Enhance! #

One of the most useful strategies – and philosophies – to build inclusive experiences for the Web is progressive enhancement. Coined in 2003 by Steven Champeon and Nick Finck, it describes the idea that instead of building exclusive websites for latest browsers and devices, it is much smarter to build a basic experience first which is then progressively enhanced (aha!) to provide a richer, more advanced experience as opportunity allows. That way, you make sure that your product is usable by people with any kind of device, on any kind of network connection, and with any kind of assistive technology.

Jeremy Keith likes to break progressive enhancement down into three steps that are as powerful as easy to remember:

  • Identify core functionality.
  • Make that functionality available using the simplest possible technology.
  • Enhance!

Sounds straightforward, right? Yet, wherever I look, I can’t escape the feeling that this approach is still, even after almost 20 years, more of an exception rather than the rule. Yes, I know a lot of people who know what progressive enhancement means and also practice it. They start with structured content, or at least with semantic HTML, add CSS that works well in older browsers, sprinkle in all the new layout goodness for modern browsers, and, in the end, they enhance all of this with JavaScript – including better accessibility support. But I have also worked with even more people who have no idea what progressive enhancement even means. They might have heard of the term but also often mistake it for graceful degradation. And who can blame them? The complexity of the modern Web is breathtaking and the things one could learn and incorporate into their practice endless. But that’s exactly why learning about progressive enhancement would be so valuable for those people: Progressive enhancement is not yet another technology or passing fad. It is a lasting strategy, a principle, to deal with complexity because it lets you build inclusive, resilient experiences that work across different contexts and that will continue to work, once the next fancy JavaScript framework enters the scene – and vanishes again.

But why don’t more people practice progressive enhancement? Is it only because they don’t know better? This might, in fact, be the primary reason. On top of that, especially many JavaScript developers seem to believe that it is not possible or necessary to build modern websites and applications that way. All they know is their hammer and so they just can’t imagine how one could possibly build a product like Hey! without megabytes of client-side logic, hot module replacement, and virtual DOMs. Meanwhile, they introduce huge amounts of technical debt and continue to build exclusive experiences that remind me a lot of the Flash era. Even progress bars are making a comeback. Can you tell which way the wind is blowing?

In my experience, it is also quite hard to change the culture and processes of agencies and web development studios. Many designers don’t know about progressive enhancement either and modern design tools also don’t support the layered approach of progressive enhancement. Imagine what a difference it would make if a designer could turn off a web font in her design tool or even switch off all the styles to see nothing but the underlying semantic structure of her layout. For now, the only design tool that can do such things, is the browser. And this is why I will continue to advocate for more interdisciplinary collaboration within teams and more prototyping. Because in order to practice progressive enhancement well, every member of the team has to be able to make well-informed decisions. If a designer never sees a design in its most basic form, how can she possibly improve this state of the system?

Some look at progressive enhancement like a thing from the past of which the old guard just can’t let go. But to me, progressive enhancement is the future of the Web. It is the basis for building resilient, performant, interoperable, secure, usable, accessible, and thus inclusive experiences. Not only for the Web of today but for the ever-growing complexity of an ever-changing and ever-evolving Web.

If you want to learn more about progressive enhancement, read those two books to get started:

Aaron Gustafson’s Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement in invaluable and explains the core idea as well as many examples very well. You can even read the first edition for free – and then buy the second edition!

Resilient Web Design by Jeremy Keith is a delightful journey through the history of the Web that brilliantly explains what it means to build for the Web and why progressive enhancement is at the core of creating resilient, future-proof experiences. It is a free online book.

-

This is the 43rd post of my 100 days of writing series. You can find a list of all posts here.

~

12 Webmentions

2 Likes

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.