Designing device-agnosticly

In How a device-agnostic approach could improve your design, Miller suggests viewing device-agnostic approach as a three step progressive enhancement process.

Progressive enhancement means that you start with a basic version of the content that can be accessed on all devices, and then add advanced features for devices with more capabilities. This approach can ensure that the content is accessible and usable on all devices, while still providing advanced features for devices with more capabilities.

In effect, first, one should design for the lowest common denominator, finding the absolute necessary core features that need to run on all devices. Second, one should figure out the most resource efficient way of implementing the service, also using available native components and re-using code whenever possible. Third, one should maximize the user experience by identifying key user flows, and work around limitations making use of the innate benefits of each device (e.g., a mobile phone is always with the user, while a desktop has more pixels).

It is important to note that the goal of device-agnostic design is not to create a single design that works on all devices. Instead, the goal is to create a design that is flexible and adaptable, so that it can be optimized for different devices and platforms, while still providing a consistent user experience. For consistency, one could follow a design system (discussed later in the course), while still designing content-first, i.e. identifying the key content that needs to be presented and explore how it can be structured in a way that is easy to read and navigate on any device. This includes considering how the content will be presented on different screen sizes and input methods.

Presenting the content on different screen sizes and allowing different input methods could be realized through using a flexible layout that can adapt to different screen sizes and resolutions, while still remembering to also use a touch-friendly design to accommodate for the vast body of mobile users. One potential starting point would be touch-friendly design that uses elements such as larger buttons and simplified forms to make it easier to interact with the content with mobile devices and tablets.

Finally, as a part of the design process, it would also be important to test the design across devices. This could be done by using a variety of devices, including smartphones, tablets, laptops, and desktops, to ensure that the design is accessible and usable on all devices. Here, emulators that were briefly discussed in the chapter on local development environment are highly useful.