progressive enhancement

Progressive Enhancement Patryk Jar

2014

Agenda

�  What is progressive enhancement?

�  Why do I care?

�  When should I do it?

�  Where must I do it? (DVSA)

�  What else can I do?

�  Questions

Progressive enhancement � uses web technologies in a layered

fashion that allows everyone to access the basic content

wikipedia

Definition / Why / When / MUST / Alternatives / Qs

Why should I care? � We create products for users. All users, not

only the group we like the most

� All content must be usable and all functionality must work


When should I do it? � Relevant number of users cannot (must

not / do not want to) enable javascript (flash, CSS, any other technology we rely on)

� Slow network � Mobile devices


Where must I do it? � Public websites (e.g. applications) that

must be fully available for everybody

� Digital services must be available �  https://www.gov.uk/design-principles


Progressive enhancement - example 1. <a id="print-link” href="/generate-pdf"> 2. Print this page 3. </a> 4. <script> 5. $("#print-link") 6. .attr("href", "javascript:window.print()"); 7. </script>


Progressive enhancement – examples


Progressive enhancement – example – JavaScript works


Progressive enhancement – example – no JavaScript


What else can I do?


Nothing � You don’t support anyone who has

disabled javascript / css / flash / any other technology you use


Very simple pages � Welcome to ’90!


Many versions of page � One for modern browsers (HTML5, CSS3) � One for IE6 (spaghetti HTML) � One for iOS (Objective C) � One for Android (Java) � … � One not to rule them all


Many versions of page � One for modern browsers (HTML5, CSS3) � One for IE6 (spaghetti HTML) � One for iOS (Objective C) � One for Android (Java) � … � One not to rule them all

trochewolniej.pl/2007/programista/


Many versions of page – Gmail examples


Many versions of page – Gmail example


Graceful degradation

accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/


Graceful degradation - example 1. <a href="javascript:window.print()"> 2. Print this page 3. </a> 4. <noscript> 5. <p class="script-warning"> 6. Printing the page requires JavaScript to be 7. enabled. Please turn it on in your browser.

8. </p> 9. </noscript>


Graceful degradation - examples


Graceful degradation – example – JavaScript works


Graceful degradation – example – no JavaScript


Questions?


Thank You � [email protected] � yarpo.pl

progressive enhancement

Technology

alternatives qs questions

javascript definition

pl2007programista definition

javascript css

javascript flash

ios objective c

ie6 spaghetti html

modern browsers html5