Lately, I’ve had an internal struggle on this topic. It revolves around certain features of the web like web fonts and JavaScript. The struggle can be summed up in this basic question:
Where does the line of ‘enhancement’ start?
A several months ago, I changed the way I thought about web fonts. Generally, they are supported everywhere, but they can add a lot of technical debt to a project and cause your content to look unstyled or even altogether invisible. I resolved to stop using them as a general rule, and layer them in for special elements when warranted. Recently, this decision has been reconfirmed by GitHub’s decision to use system fonts:
New @github font day! pic.twitter.com/oKE7DLPfPJ — Mark Otto (@mdo) July 11, 2016
This web font issue was just the tip of the iceberg for me. My mind began spinning down a rabbit hole of where to draw the line when considering what an ‘enhancement’ is.
Micah Godbolt has been working on redesigning and rebuilding his site. When you first arrive, you might think something is ‘broken’, but you are wrong. That’s just the way it is. Actually, it looks more advanced than a few months ago when it had even less styling. Times font and no width constraints made you feel even more like you like you had traveled back to the dawn of the web.
Here’s the thing about sites like this: They work everywhere. There’s no questioning, “Can we do this?” There’s no time spent browsing the compatibility of a feature on caniuse.com. It just works...as expected. Even better, it works everywhere. Now, Micah's not done yet, but his progress triggered something in me.
When I began to mull over this issue day after day, one thought kept arising. It became the source of the issue (pun intended). What are the basic elements required to display in a browser? HTML. The document itself was all that was needed to get the content and features to the user.
“What about CSS” you ask? It’s an enhancement. "How about JavaScript?" Yeah, that’s an enhancement too.
As the web evolves, it’s easy to rely on the flash(y) elements that we need to draw our users in. This path of seeking the nth-degree of interactivity is a dangerous one if we forget to maintain fundamental support for everyone as a baseline.
My goal is to be able to remove all of the CSS, JS and any other non-HTML dependent code and still be able to use it. Not only should it be usable, but it should retain as much of the ‘full’ functionality as possible. Essentially, I want to plan that all of my scripts and styles break, the web apocalypse happens and my projects are left standing.
As I program forward, I am always looking backward. Essentially, I’m arguing for a sort of ‘Regressive Enhancement’. I’m not advocating for the abandonment of things like web fonts or ReactJS. Instead, build with your HTML (and CSS) and make it work as a baseline. Then, layer on other treats and goodies with the traditional ‘Progressive Enhancement’.
I love HTML. It’s the foundation of the web. When I look back through all of my years of development, HTML sticks out as the most reliable element of the web. Every house and every building ever built has it’s foundation laid on solid ground. HTML is a solid ground to lay the foundation for a web that accessible for everyone. It gives us the ability to reach everyone and that’s one of the things I love about the web.
Need help, advice or a speaker for your event? I’d love to connect and help you build novel solutions with design.
