ThoughtWorksJ A M E S C O O K / G A R E T H R O G E R S / K O R N Y S I E T S M A

Progressive

101Enhancement

Progressive Enhancement !

!

What is it?

Progressive enhancement is a strategy for building web things in a layered fashion that allows everyone to access the basic content and functionality, using any browser or connection, while also providing an enhanced version to those with more

advanced software or greater bandwidth.

Definition

Layer your interface

Layer your interface

Semantic markup HTML

Baseline styles CSS

Modern styles CSS

Behaviour Scripting

Content task or prose

Progressive Enhancement !

!

Why care?

Simplify your solution Reduce development time

Reduce bugs Ease maintenance

Improve performance Support the past

Future-proof Mobile-critical

You’ll build a better product

Think, design, build – iteratively

You don’t always know from where

your stuff will be accessed or by whom or on what

https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement

We didn’t really have any idea how many people are experiencing UK government web services without the enhancement of JavaScript…

GDS JavaScript research

“

Temporary network errors DNS lookup failures

Server response failures Corporate & Government Firewalls

Network Provider filters Browser extensions

Progressive Enhancement !

!

How to do it

Key technology enablers Advanced CSS

Shared client/server view templates Shared client/server code

Nashorn! React / OM / What’s next?

• Aaron Gustafson’s series on A List Apart: Understanding Progressive Enhancement, Progressive Enhancement with CSS, and Progressive Enhancement with JavaScript.

• Progressive enhancement is still important, by Jake Archibald

• Progressive Enhancement: What It Is, And How To Use It? on Smashing Magazine

• Designing with Progressive Enhancement, by Filament Group

• Enough with the JavaScript Already, by Nicholoas Zakas

Further Reading…

http://slideshare.net/ohellojamesS L I D E S AT

Any discussion?