Progressive Enhancement

jQuery Mobile will render the most elegant user experience possible for a device. For example, look at the jQuery Mobile switch control in Figure 1–7. This is the switch control on an A-Grade browser.1

__________

1 An A-Grade browser supports media queries and will render the best experience possible from jQuery Mobile CSS3 styling.

images

Figure 1–7. A-Grade Experience

images

Figure 1–8. C-Grade Experience

jQuery Mobile renders the control with full CSS3 styling applied. Alternatively, Figure 1–8 is the same switch control rendered on a much older C-Grade browser.2 The C-grade browser does not render the full CSS3 styling.

IMPORTANT: Although the C-Grade experience is not the most visual appealing it demonstrates the usefulness of graceful degradation. As users upgrade to newer devices, the C-Grade browser market will eventually diminish. Until this crossover takes place, C-Grade browsers will still receive a functional user experience when running a jQuery Mobile app.

Native applications do not always degrade as gracefully. In most cases, if your device does not support a native app feature you will not even be allowed to download the app. For instance, a new feature in iOS 5 is iCloud persistence. This new feature simplifies data synchronization across multiple devices. For compatibility, if we create a new iOS app that incorporates this new feature we will be required to set the “minimum allowed SDK” for our app to 5.0. Now our app will only be visible in the App Store to users running iOS 5.0 or greater. jQuery Mobile applications are more flexible in this regard.

__________

2 A C-Grade browser does not support media queries and will not receive styling enhancements from jQuery Mobile.CopycopyHighlighthighlightAdd NotenoteGet Linklink


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *