Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Enhancement


Published on

This is a slides about progressive enhancement. It doesn't answer what is progressive enhancement, instead it talks about how to do progressive enhancement in practice. Then you will know why you need to do progressive enhancement. In my mind PE is not a buzz word, actually it's the Web's way. We should rediscover what's right way to build web. If everything is in correct layer, this best practice called progressive enhancement. Then you got a robust system which can work in different environment and can be access by both human and computer.

Published in: Technology
  • Be the first to comment

Progressive Enhancement

  1. 1. Progressive Enhancement Practice
  2. 2. Why PE? Separation of Concerns Data - Structure Presentation - Style Behavior - Event
  3. 3. Why PE? KISS /
  4. 4. PE’s goal / Universal / Usability / Maintain / Communication
  5. 5. Practice Mapping requirement to right layer HTTP Restful, the web way HTML/XHTML Structural data format CSS Visual enhancement Javascript Behavior enhancement
  6. 6. Http layer What’s restful? The web way. Use right request method Use right HTTP response CODE Use the useful HTTP headers Resources centric URL? Form model and Post redirect-back
  7. 7. Http layer Web site should be a restful app Human readable website is also a computer readable API provider (x)HTML is a valid structural ATOM feed format Web page is a composite representation of domain model
  8. 8. (x)Html layer Choose tag semantically HTML Tag HTML5 friendly? HTML5 Name Class
  9. 9. (x)Html layer Microformats open protocal markup conventions semantic way easy to parse easy to validate
  10. 10. CSS Layer reset css css selector css class micro formats class id javascript
  11. 11. CSS Layer css selector ( microformats) .project .stage .job .name .article h2 .comment .time
  12. 12. Javascript Layer Javascript JQuery’s PE support API DSL ($(selector).hehavior)
  13. 13. Javascript Layer graceful degradation microformats convension
  14. 14. Conclusion Never re-invent the web (wheel) Discover the beauty of web standard Do right things in right way
  15. 15. Thanks