Â鶹ԼÅÄ

Lower end and older mobile devices may have poor support for the latest software and hardware features, or a device may be experiencing network issues. Additionally, users may have some features disabled, including users of assistive technology and those on secured networks.

Building apps and websites in a progressive manner means dynamically changing a basic experience when new features are detected that can enhance the experience. For some content, such as video or games that require Javascript, it may be necessary to provide a message explaining to the user what is required and linking to alternative content.

---

iOS

Use the available attribute to provide a fallback approach for older versions of iOS. For example, the UIStackView is only available from iOS 9.0. If the application is also targeted at older versions of iOS, use an ¾±´Ú…e±ô²õ±ð routine to provide a fallback.

iOS Example (Objective-C)

Example 1

Checking a class is available

if (NSClassFromString(@"UIPopoverController")) {
    // Do something
}

Example 2

OS version detection

if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion:(NSOperatingSystemVersion){10, 0, 0}]) {
  // Cool new feature that iOS 10 supports
 } else {
  // Fallback to something less cool, but that will work on iOS 9 and below
}

---

Android

Use the SDK_INT variable for feature detection.

Android Pass Example

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
  // Code for a feature that only works in Honeycomb and above
} else {
  // Fallback for users of Honeycomb and below
}

---

HTML

Avoid the use of browser sniffing. Instead, take a progressive enhancement approach by concentrating a basic structure and content first, and then add more features on top. Consequently, users of older devices will still be able to access the basic features, content, and functionality of the application, while users of more up-to-date devices will receive advanced features associated with their operating system.

A further advantage of the progressive enhancement approach is that it allows for support across different operating systems - i.e. content and functionality that work on iOS will also work on Android devices.

For further details, refer to Responsive News: Cutting the Mustard for techniques to determine browser capabilities. ()

HTML Pass Example

Example 1

HTML content that does not rely on JavaScript or CSS enhancement to function

<a href="page2.html"> Next Page </a>

Example 2

Content that is displayed with or without JavaScript

<script>
    // embed game or media player
</script>
<noscript>This content requires Javascript to be enabled.</noscript>

Example 3

Check if a Javascript method or property is available

if("geolocation" in navigator) { ... }

Example 4

Check if CSS rules are supported

@supports (display: flex) and (transition: .5s) {
  .box { display: flex; transition: .5s; }
}

---

Testing

Procedures

1. Identify content and functionality that may be dependent on JavaScript.
2. Run the app or site on a device or mobile browser, or assistive technology that does not support JavaScript, or has Javascript disabled.
3. Verify that content is available, or information is provided about why it isn’t available.
4. Verify that functionality is available.

Outcome

The following check is true:

• All content is available on each device and operating system.
• All functionality is available on each device, or equivalent functionality is provided where certain features are not supported by the device or operating system.

---