New Article on the Continuing Problems with Progressive Enhancement


This article on the venerable A List Apart, highlights the ongoing problems for progressive enhancement strategy. Apparently, the adoption of ‘web standards’ has cratered in the ballooning number of JavaScript APIs that older browsers can’t use (and can’t be polyfilled for).

https://alistapart.com/article/the-slow-death-of-internet-explorer-and-future-of-progressive-enhancement

Fast download speeds in the US have led to monster, to some extent self-serving “frameworks” that “blow up real good” if you are in, say, Asia and are still using something like Opera Mini

Jeffrey Zeldman, the original ‘web standards’ guy, also has a great article on the tendency to over-complexification for its own sake in JavaScript frameworks:

https://alistapart.com/article/cult-of-the-complex 

My favorite quote “the message messes up the medium”. The problem? Newer devs don’t even understand the basics of HTML and CSS, so the need 2 megabytes of JavaScript to make something like an image slider – which really only requires a few hundred lines of JS, tops.

CSS Grid to the Rescue?

One of the places where the problem emerged was with CSS. The CSS rendering engine in modern browsers is incredibly powerful, but CSS styles are out of sync. This has, to some extent, been fixed in the new CSS grid styles, which re-enable making modern layouts simple to write directly (instead of using the robot arm of a massive JavaScript +CSS framework). To handle those obsolete browsers, some design groups are splitting users into two groups, those ‘enabled’ and those who aren’t. If you aren’t on a modern browser you get a single-column, ultra-simple layout. Otherwise, you get CSS grid.

 

Now, I’m not completely sure this is “innovative”. If done as “design theory” it reduces access – in other words, you have created two drinking fountains for two different kinds of users. If your target market is the USA, fine. But so many websites are international that one wonders if these designers are retreating back into their “graphic design” bubble and ignoring users – or more nastily, expecting their users to meet them halfway.

How to prevent layout from taking over from Ux? (again)

Originally, Progressive Enhancement prevented the hunger for “print design layouts” from taking over the web. In the above, I see a pretty clear collision between Ux and Ui designers happening once again. CSS Grid simplifies things away from messy JS frameworks, but it also enables Ui crawling up into Ux and reducing the latter’s effectiveness.

One problem may be that Uxers are doing too much Ui – the standard wireframes that are often the end product of the Ux team have some Ui baked in, invariably dictating Ui decisions directly. One way to get around this is to change the Ux deliverables. An interesting example is “priority guides”, discussed (again) on A List Apart. A Priority Guide is the equivalent of a “Style Tile” for Art Direction. After the Information Architecture is determined, the Uxer’s job is to prioritize, not lay it out for the screen.

http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes

 

 

This method avoids the Ux decisions being converted to 2D visual design. In fact, it harks back to the original goals of Progressive Enhancement, which was to make sure everyone got content in the appropriate sequence (rather than trying to faithfully build “pixel perfect” layouts on obsolete browsers).

Priority Guides and Web VR / Web XR

The other advantage of a Priority Guide for web sustainability is that it isn’t 2D. Right now, most Ux designers are still cranking out flat 2D design, while the rising tide of Virtual Reality and Augmented Reality applications threatens to make them obsolete in a few years. Current “Ux in VR” work looks very different than traditional, graphic-design oriented 2D Ux workflow. The industry risks being made irrelevant by VR and AR replacing standard web interfaces.

In the future, the “obsolete browser” will be flat 2D layouts!

A priority guide, while its default is 2D/one-column, can also be used as a guide to Progressive Enhancement strategies for WebVR, where some users get a 2D screen, while others get a “magic window” into a 3D world, and yet others get a real virtual world via their headsets. Great examples on Unboring.net by WebVR/WebXR designer Arturo Paracuellos of this!

https://unboring.net/workflows/progressive-enhancement/

And here’s a more recent example, showing Progressive Enhancement for the new era (and CSS grid need not apply)

This kind of Progressive Enhancement IS the future of web design. Web sustainability requires that we begin thinking beyond the confines of old browsers, as well as workflows that keep us from designing using new interfaces.

 

 

 

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.