Sunday, February 8, 2015

Progressive Enhancement and Graceful Degradation for Web Frontend Design

Web frontend refer to the webpages delivered to web browser.  Web frontend is typically rendered with a mixture of HTML, CSS and Javascript.  Progress enhancement is a concept to functionally separating the frontend into 3 layers.

Layer 1 defines the structure of the web pages .  This is achieved by using HTML.  The web page content is organized into different divisions or frames.  The areas can be tagged with an id.

Layer 2 defines the presentation layer.  Using CSS, the content of the web pages can be rendered according to the design.

Layer 3 defines the behaviour layer.  User interaction is enhanced using Javascipt.

A key point on the progressive enhancement design is to allow graceful degradation.  This means the user experience can degrades gracefully from higher layer to lower layer if the user platform does not support the upper layer feature used such as Javascript is disabled.  A web frontend designed with graceful degradation in mind will ensure the web pages can still be used by user meaningfully without the upper layer.

No comments: