HTML and CSS are holding the web back

Sorry if this sounds inflammatory. I do have a point.

Sir Tim Berners-Lee said in 1995:

The weirdest thing for me, if you can imagine, is to see an advertisement in the "help wanted" of the Boston Globe, saying they want HTML writers, HTML programmers. I mean, give me a break! That's like asking somebody to come along with the skills to write a Microsoft Word file in binary. The whole thing is totally inappropriate.

He really did say it, it’s on video, listen for yourself.

Twenty years have gone by and you could think that the quote has been proven wrong.

The open ended nature and modularity of web tools are nice in principle, you have choice and flexibility. But with choice comes complexity and confusion. Massive JS libraries are imported with scarce understanding of reasons and consequences. CSS can’t cope with projects that grow and evolve over time. The optimizations required for higher performance are usually rather complex and rarely implemented or properly tested if not with higher budgets. Not to mention the geniuses who think reinventing scrolling is a good idea.

The web is littered on one hand with incomplete amateurish weekend projects that perform poorly and break apart, and on the other with overengineered monster content management systems that rely on ruthless advertisers. Speaking of which, “filler” advertisers have no incentive to optimize the download size of their ad and media, like the recent iMore report revealed.

When’s the last time a website redesign didn’t feel like a chore?

The web is mostly a terrible browsing experience, particularly from mobile devices, slow and bloated.

I believe the main culprit is the illusion that a web page can be hand crafted, that since HTML and CSS are text-based and browsers are abuse-tolerant, anybody can do it.

This isn’t an elitist argument, the unfortunate truth is there are many factors that contribute to a web site holding up, there are stability and performance landmines at every level, the path for high performance is very narrow and you need a lot of experience and time/budget to set it all up correctly.

You’ve been told for years that you need to design for the medium, and the web medium is… HTML? CSS? Well, it is not, not any more than Postscript is print, or silicon, metal and glass are smartphones. That argument was mainly about not using print tools for web work. But HTML? I don’t think so.

As much as it might sound like a paradox, HTML and CSS are holding the web back, not because they’re badly designed or managed (though I believe they are), rather because they project the perception that web development is easy and approachable even with a half hour online course and frantically searching stackoverflow when you need to work around a browser bug.

Just so you don’t think I’m kidding you, here’s a rundown of the performance optimizations that, when handcrafting a website, a web developer is most likely pushing off to “when it’s done”:

• picking the right image format given the constraints
• resizing and recompressing images to high dpi, device sizes
• writing responsive image markup and fallback code
• producing a layout that is true to the design (and not viceversa)
• setting the appropriate lazy-load for images
• generating sprite sheets when appropriate
• using CSS animations or JS when necessary
• moving critical CSS into HTML to reduce first render latency
• optimizing dynamic content changes for rendering performance
• removing unused CSS classes and JS code
• coalescing and minifying the JS and CSS files
• subsetting and caching web fonts
• setting up and testing viewport widths
• testing layout and animation on all major browsers
• testing on the mobile browser billions of users will never upgrade
• optimizing server caching for different file types
• deploying to a content delivery network

There’s no stronger proof that these issues are a problem than Facebook and Apple both launching their own “article reader” initiative, with the main promise of improving the load performance.

The “high performance website” path is narrow, and most of the web is off the path, failing.

Hand coding HTML/CSS is like shaping sheet metal with a hammer. High performance HTML/CSS dev is like 1 micron tolerance CNC machining.

I do believe the details of how content and layout is communicated between a designer and the browser should definitely be a web standard and be governed by a web standards body, but they should disappear below a level of awareness and everyday use, like Postscript has for print.

And finally, what if you didn’t need to understand three different symbolic codes and “33 Odd Tricks To Make Your Site Faster” to design for the web?

This is what would be truly liberating, what would unleash creativity.