Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embracing Progressive Enhancement

Embracing Progressive Enhancement

We are perpetually on our toes to absorb the latest technologies that power the web and make use of them in our projects. However, in doing so, we often overlook and break the principles that the web has been built on over the past two decades. Even if we choose to turn blind towards philosophies, standards or doing things the right way, we simply cannot ignore the proliferation and diversity of devices and user agents today.

These slides were used to conduct a workshop that revisited the spirit of the web — understanding what makes the web special and how to embrace the principle of progressive enhancement to build robust websites.

“The best way to be future-proof is to be backwards compatible.”

Souvik Das Gupta

February 13, 2014
Tweet

More Decks by Souvik Das Gupta

Other Decks in Programming

Transcript

  1. Objectives • Revisit the design of web and how it

    works • Progressive enhancement and its importance • Write code keeping progressive enhancement in mind • Peer review and learn form each other’s experience
  2. Agenda • Zone in (25 mins) • Understand our project

    (15 mins) • Develop the project • HTML (40 mins) • CSS (20 mins) • JS (50 mins) • Zone out (15 mins) break
  3. Conduct • Ask, don’t be shy • Contribute, don’t withhold

    knowledge • Code, or at the very least assist • Give feedback, take feedback, keep it constructive • Mutual respect
  4. Test of Independent Invention “If someone else had already invented

    your system, would theirs work with yours?”
  5. An essay on W3C’s design principles • Introduction • Maintainability

    • Modularity • Minimum redundancy • Accessibility • Device-independency • Internationality • Extensibility • Learnability • Readability • E ciency • Binary or text format • Implementability • Simplicity • Longevity • Backwards compatibility • Interoperability • Repurposing of content • Timeliness • Use what is there • Design by committee • Expertise • Brevity • Stability • Robustness http://www.w3.org/People/Bos/DesignGuide/toc.html
  6. W3C Mission • Web for All • Web on Everything

    • Web for Rich Interaction • Web of Data and Services • Web of Trust http://www.w3.org/Consortium/mission.html
  7. And oh! • Text mode browsers. • Screen readers. •

    Read it later services. • Flipboard • Bots, spiders. • …
  8. Goals? • Consumable • Functional • Aesthetic • Fast •

    Accessible • Reachable/Locatable • …
  9. CSS

  10. Media Queries • width • height • device-width • device-height

    • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan • grid
  11. “Any application that can be written in JavaScript, will eventually

    be written in JavaScript” http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
  12. Hatred for browser bugs is di erent than hatred for

    old (or less featured) browsers
  13. Supporting the latter does not mean that you have to

    make them look or work the same way