Progressive Enhancement

50 %
50 %
Information about Progressive Enhancement

Published on July 31, 2009

Author: iamtin



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.

Progressive Enhancement Practice

Why PE? Separation of Concerns Data - Structure Presentation - Style Behavior - Event

Why PE? KISS /

PE’s goal / Universal / Usability / Maintain / Communication

Practice Mapping requirement to right layer HTTP Restful, the web way HTML/XHTML Structural data format CSS Visual enhancement Javascript Behavior enhancement

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

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

(x)Html layer Choose tag semantically HTML Tag HTML5 friendly? HTML5 Name Class

(x)Html layer Microformats open protocal markup conventions semantic way easy to parse easy to validate

CSS Layer reset css css selector css class micro formats class id javascript

CSS Layer css selector ( microformats) .project .stage .job .name .article h2 .comment .time

Javascript Layer Javascript JQuery’s PE support API DSL ($(selector).hehavior)

Javascript Layer graceful degradation microformats convension

Conclusion Never re-invent the web (wheel) Discover the beauty of web standard Do right things in right way


Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Progressive enhancement - Wikipedia, the free encyclopedia

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies.
Read more

Progressive Verbesserung – Wikipedia

Progressive Verbesserung (engl. progressive enhancement) beschreibt eine Methode im Webdesign, die Barrierefreiheit, semantische Auszeichnung und Trennung ...
Read more

Understanding Progressive Enhancement · An A List Apart ...

Steven Champeon turned web development upside down, and created an instant best practice of standards-based design, when he introduced the notion of ...
Read more

Progressive Enhancement 101: Overview and Best Practices

With an ever-growing variety of browsing situations and platforms that must be supported, the concept of progressive enhancement has become a hot topic of ...
Read more

Designing with Progressive Enhancement: Building the web ...

Designing with Progressive Enhancement: Building the web that works for everyone. A book by Todd Parker, Patty Toland, Scott Jehl, and Maggie Costello ...
Read more

Progressive Enhancement

Bei Progressive Enhancement handelt es sich um eine Strategie im Webdesign, die es ermöglichen soll, dass die Basisinhalte einer Website unabhängig von ...
Read more

Progressive Enhancement: Die Zeit ist gekommen · molily

Dass eine Website in allen Browser gleich aussehen muss, ist ein Dogma, das schon seit Jahren unter heftigem Beschuss liegt. Es ist nämlich unvermeidlich ...
Read more

Mobile First + Progressive Enhancement | kulturbanause® blog

In diesem Beitrag erfahrt ihr, wie der Webdesign-Workflow mit „Mobile First“ und „Progressive Enhancement“ aussieht.
Read more

A Complete Guide to Progressive Enhancement | Webdesigner ...

A lot of designers think progressive enhancement only benefits those users who are using outdated browsers, but other users benefit, too. Mobile browsers ...
Read more

Progressive Enhancement: eine neue Art zu Denken

Progressive Enhancement erlaubt es, sich auf abstraktere Art und Weise mit der Kernfunktionalität einer Website zu beschäftigen.
Read more