Device Independence for Web application developers

On this page

When developing an application, it is easy to miss aspects of that application that won't work well on devices beyond the ones we as developers use on a day to day basis. Developers' devices are, on average, more powerful and more advanced than what most end-users would have, especially in emerging markets.

What is Device Independence?

Device independence is a design principle that aims to make Web sites and applications work on as many devices as possible, ensuring as broad a potential adoption as possible.

A Wide Range of Devices

Web technologies are designed so that application developers can adapt to a wide range of variations in how end-users access their apps. These variable factors include:

  • Hardware capabilities, including screen size, input mechanisms, access to sensors.
  • Processing performance, including number and power of CPUs, but also access to other dedicated processors, such as GPUs.
  • Networking performance, including how fast available networks are, how stable, and how much their usage cost – not everyone has an unlimited 5G data plan with wide coverage!
  • OS capabilities, e.g. whether the operating system has pre-defined mechanisms to share content or receive push notifications, and how user's consent to these capabilities are managed and exposed in browsers.

That's a lot of variation to take into account! Nowadays, Web usage across all users globally is roughly an equal split between computers & mobile devices, however that distribution varies considerably across different countries. Beyond computer and mobile devices, many other types of connected devices have Web capabilities, including ebook readers, game consoles, smart watches, connected cars, etc.

Adaptation Strategies

Two broad strategies have emerged to deal with the huge spectrum of devices your application may need to run on:

  • Progressive enhancement involves designing the core of your app so that it works on as many devices as possible, and building in optional features that support additional capabilities.
  • Graceful degradation takes the opposite approach and ensures that a reasonable fallback is available for any feature that is not supported by a given device.

While the two approaches suggest opposite perspectives on the same problem space, they can be used to complement one another in a given project.

Adaptation Techniques

Responsive images allow to provide different resolution and different cropping of pictures based on the device capabilities

In very practical terms, making your application device-independent will entail:

  • using responsive design for CSS layout and responsive images, or using a server-side component that deals with device adaptation, using for instance Client Hints;
  • using feature detection and polyfills when relying on JavaScript APIs that are only available on some hardware or in the latest versions of browsers;
  • defining and keeping a performance budget that ensures that your application will run smoothly on a wide variety of hardware and networks;
  • building your app so that it can continue to work offline and in poor network conditions – Service Workers are a key component to any strategy in this space;
  • if your app features media (and especially video) content, make sure to provide it with adaptive streaming to cater for a wide variety of network characteristics;
  • testing your app on a broad range of devices – using a combination of manual testing and automated testing (several services are available that allow you to run tests on a variety of devices).

Plenty of Web technologies have been developed and are in development to make it easier to adapt to the capabilities of the devices on which your app will be operating on: check out the Web Device Adaptation technology landscape to find those that will fit your app the best.

Web Monetization-specific Considerations

In the specific context of Web Monetization, where there will often be the need to tie an application to a Web Monetization wallet, you also need to take into account the relationships between users and devices. These may be more complex and varied than a simple rule of "one device = one user". For instance, some users may use your app on multiple devices, but only some of those might be configured with Web Monetization; some users may use shared devices, where multiple Web Monetization wallets may need to be used in parallel.

Design for all

When you design your app with consideration for device independence you make it more usable, universal, powerful, safe and you help to ensure that both it and the web work for everyone.