Progressive Enhancement & Responsive Web Design

Contact Us or call 1-877-932-8228
Progressive Enhancement & Responsive Web Design

Progressive Enhancement & Responsive Web Design

Progressive Enhancement is a web-design strategy in which newer devices/browsers/capabilities receive an enhanced version of our pages, while less capable devices/browsers still receive basic content and functionality. Progressive Enhancement emphasizes semantic markup, controlling presentation with external stylesheets, and use of JavaScript to add functionality.

As the docs state, jQuery Mobile adopts a strategy of "starting with semantic HTML which will work on any device, then unobtrusively layering in advanced CSS and JS only for capable browsers. This provides a solid foundation for the device-level optimizations that RWD provides and is how the jQuery Mobile library is built." High-functioning devices and browsers get the good stuff - Ajax page transitions, native-app-like functionality, the "full enhanced experience" - while older or less capable devices and browsers still work, to the degree available. That's a huge help to us as developers: we can exploit new features and cool device capabilities without alienating users with older, less capable devices.

Responsive web design is an approach that aims to present web pages optimally given that capabilities of the device: a wider design for desktops might be narrower for smartphones with a narrower viewport. As the docs state, "jQuery Mobile has always been designed to work within a responsive context.... All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system...." See http://demos.jquerymobile.com/1.4.5/rwd/ for more information.

Next