Download - Progressive enhancement
![Page 1: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/1.jpg)
Progressive Enhancement Patryk Jar
2014
![Page 2: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/2.jpg)
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
![Page 3: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/3.jpg)
Progressive enhancement � uses web technologies in a layered
fashion that allows everyone to access the basic content
wikipedia
Definition / Why / When / MUST / Alternatives / Qs
![Page 4: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/4.jpg)
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
Definition / Why / When / MUST / Alternatives / Qs
![Page 5: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/5.jpg)
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
Definition / Why / When / MUST / Alternatives / Qs
![Page 6: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/6.jpg)
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
Definition / Why / When / MUST / Alternatives / Qs
![Page 7: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/7.jpg)
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>
Definition / Why / When / MUST / Alternatives / Qs
![Page 8: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/8.jpg)
Progressive enhancement – examples
Definition / Why / When / MUST / Alternatives / Qs
![Page 9: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/9.jpg)
Progressive enhancement – example – JavaScript works
Definition / Why / When / MUST / Alternatives / Qs
![Page 10: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/10.jpg)
Progressive enhancement – example – no JavaScript
Definition / Why / When / MUST / Alternatives / Qs
![Page 11: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/11.jpg)
What else can I do?
Definition / Why / When / MUST / Alternatives / Qs
![Page 12: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/12.jpg)
Nothing � You don’t support anyone who has
disabled javascript / css / flash / any other technology you use
Definition / Why / When / MUST / Alternatives / Qs
![Page 13: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/13.jpg)
Very simple pages � Welcome to ’90!
Definition / Why / When / MUST / Alternatives / Qs
![Page 14: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/14.jpg)
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
Definition / Why / When / MUST / Alternatives / Qs
![Page 15: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/15.jpg)
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/
Definition / Why / When / MUST / Alternatives / Qs
![Page 16: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/16.jpg)
Many versions of page – Gmail examples
Definition / Why / When / MUST / Alternatives / Qs
![Page 17: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/17.jpg)
Many versions of page – Gmail example
Definition / Why / When / MUST / Alternatives / Qs
![Page 18: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/18.jpg)
Many versions of page – Gmail example
Definition / Why / When / MUST / Alternatives / Qs
![Page 19: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/19.jpg)
Graceful degradation
accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
Definition / Why / When / MUST / Alternatives / Qs
![Page 20: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/20.jpg)
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>
Definition / Why / When / MUST / Alternatives / Qs
![Page 21: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/21.jpg)
Graceful degradation - examples
Definition / Why / When / MUST / Alternatives / Qs
![Page 22: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/22.jpg)
Graceful degradation – example – JavaScript works
Definition / Why / When / MUST / Alternatives / Qs
![Page 23: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/23.jpg)
Graceful degradation – example – no JavaScript
Definition / Why / When / MUST / Alternatives / Qs
![Page 24: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/24.jpg)
Questions?
Definition / Why / When / MUST / Alternatives / Qs
![Page 25: Progressive enhancement](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a226111a28ab9e168b47aa/html5/thumbnails/25.jpg)
Thank You � [email protected] � yarpo.pl