How to not break the web

· 508 words · Tweet this

Nicolas Bevacqua urges us to stop breaking the web:

We are crushing the web. Dedicated client-side rendering sucks. Polyfills are used for all the wrong reasons. Those hideous-looking hash routers are bad and we should feel bad. We have been telling each other for years that progressive enhancement is great, and yet we’re doing very little about it!

He outlines a sensible strategy:

  • HTML first, get meaningful markup to the human being as soon as possible
  • Deliver some CSS, inline critical path CSS
  • Defer the rest of the CSS until onload through JavaScript, but provide a fallback using <noscript>
  • Defer below the fold images
  • Defer font loading
  • Defer all the JavaScript
  • Never again rely on client-side rendering alone
  • Prioritize content delivery
  • Cache static assets
  • Experiment with caching dynamic assets
  • Cache database queries
  • Cache all the things

which reads like a summary of his previous foray into optimizing the critical path.

Guillermo Rauch has a set of his own. His 7 Principles of Rich Web Applications:

  1. Server rendered pages are not optional
  2. Act immediately on user input
  3. React to data changes
  4. Control the data exchange with the server
  5. Don’t break history, enhance it
  6. Push code updates
  7. Predict behavior

The article’s conclusion nails it (emphasis mine):

The web remains one of the most versatile mediums [sic] for the transmission of information. As we continue to add more dynamism to our pages, we must ensure that we retain some of its great historical benefits while we incorporate new ones.

Pages interconnected by hyperlinks are a great building block for any type of application. Progressive loading of code, style and markup as the user navigates through them will ensure great performance without sacrificing interactivity.

New unique opportunities have been enabled by JavaScript that, once universally adopted, will ensure the best possible user experience for the broadest and freest platform in existence.

It’s as much about progressive enhancement as it is about not breaking built-in functionality. Case in point: the JavaScript “enhanced” movie links on Rotten Tomatoes hijack the click and they cannot be opened in a new tab the usual way through ⌘-Click. Or: me trying to figure out how to breathe the scroll memory Guillermo talks about back into a Ractive.js component I’m working on.

Mike Bostock explains how to handle scroll to build interactive storytelling that responds to user actions in predictable ways and is mindful of all the ways the user can scroll a page: through the touchpad or scrollwheel, by pressing the arrow keys or by dragging the scroll thumb.

These all go well with my small recent epiphany. It’s worth periodically reminding yourself that HTML is by definition responsive, accessible and, in general, pretty damn well thought out and that if we want to reinvent any part of the web we ought to be respectful of all the thought and care that went into the default experience everyone gets when they fire up the browser.

Earlier: Finding your top Pinboard web sites

Later: Recently: Oldies