📝 This Week in Web Design and Development

View this newsletter on the web.

A couple of weeks ago, Chris jotted down his thoughts about whether web design has gotten easier in the past 10 years. Are the languages improving? Is front-end development becoming more specialized and is it getting easier for new folks to join the field? Well, on that front he had the following to say about the CSS language:

CSS has gotten easier. We use way fewer “hacks” all the time. I can literally feel it. The CSS we write today feels so intentional and direct. 10 years ago I feel like every other element had some kind of weird hack on it, and today, almost none. If CSS feels any harder, I’d wager it’s because the sites we’re building are bigger and more complex so the styling systems for them need to be all the more robust and the dangers of getting it wrong more stark.

I was talking to a front-end developer a year ago and I realized that they didn’t know what the float property was or how it worked… and they didn’t need to know! They didn’t know what a clearfix was or why it was useful, they didn’t have to know about all these whacky browser bugs that have been neatly catalogued in my brain after a decade of working in the field. Now they can start a project with flexbox and CSS Grid and make much more powerful, flexible, and user-friendly designs.

This is absolutely worthy of celebration, as Robin Sloan mentioned just this week:

For all that is Bad with web development in 2020, the steady stream of powerful new CSS capabilities is Very Good

But! The one area of front-end development that I would argue has been almost entirely ignored since 2008 is the HTML language itself. Chris writes:

HTML5 was the only big HTML change in the last decade, and it wasn’t particularly dramatic. It’s cool it’s the looser variant (instead of getting XHTML3 or something). More compatible this way. Maybe I’ll close my <br /> and maybe I <br> won’t. Having better semantic tags (e.g.<article>) is great. Input types are wonderful. But none of this pushes HTML to be significantly easier or harder.

I would argue that, yes, HTML has not gotten any easier or harder since then — and that leads into some unforeseen difficulty for us developers. Although sure, we’ve had some big improvements, like the support for responsive images, but besides that, I can’t think of anything that improves my daily life as a web developer.

I have a hunch that because HTML hasn’t been developed much over the last decade it means that we’ve had to rely on complex frameworks and libraries to do the work the browsers should be doing for us. Dave Rupert wrote about this very thing recently when it comes to accordions and the details element:

At the risk of being a broken record; HTML really needs <accordion>, <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements. A new set of accessible controls for a modern era… except that these things have been in-use on nearly every major website and application for the last two decades and exist in every major design system.

I couldn’t agree with this more and I’m pretty sure this is why it’s so hard to make websites accessible these days. We’re asking browsers to do something that they just don’t want to do and that requires a ton of JavaScript and framework magic or npm install react-accordion or whatever.

So here’s what I would like to see in 2020: I want our community to take all these react-whatever libraries and to use that as the beginning of a new set of standards for us to build into HTML itself, and with accessibility in mind from the ground up. And then we need to collect a bunch of these new elements under a single umbrella to get everyone — browser makers, developers, and users — enthusiastic about it all.

We could call it 2 Fast 2 HTML. Or HTML: Next Generation. Or perhaps HTML: Reloaded. Or maybe we could just call it HTML6? That would be fine too, I guess.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s