Copy of some Draft Web Development Guidelines

Layouts work across devices and requirements

Visitors approach our products and services on a wide variety of devices these days. Ensuring that your device works on the widest range of devices and differing screen resolutions ensures that you will have a compatible website or application. A Device-Adaptable approach goal is to provide a consistent, adaptable experience across a full range of devices by considering all screen sizes and resolutions from the start, rather than primarily focusing on mobile scaling upward.

Criteria: Device-adaptable

Machine-testable

Allow a website or app to work and adapt seamlessly across a variety of devices and screen sizes, including mobile, desktop, smart TVs, and other emerging platforms. Ensures that content and functionality are accessible and optimized on both smaller mobile screens and larger displays without limiting accessibility, usability or design on any specific device type. It is essential to implement robust fallback strategies to ensure that the website or application will not fail if it encounters unsupported technologies.

Resources

Criteria: Progressive enhancement

Machine-testable

Regardless of the approach or combination of approaches used, such as Adaptive Design, Mobile-First Design, or Dynamic Serving, it's essential to ensure overall sustainability through progressive enhancement.

Resources

Criteria: Carbon aware design

Machine-testable

To maximize the use of renewable energy, adapt your website or service to electricity availability using carbon-aware design techniques. This should include using situational design to reduce the codebase disable non-essential functionality during high-intensity periods or adapting the user-interface to perform better in situations where scaling hardware resources can be avoided to reduce emissions. It can also include designing algorithms that can auto-disable features based on set thresholds.

Resources

Criteria: Alternative browsing

Machine-testable

Support other indirect methods of interaction such as voice (speech), code (QR, etc), reader view (browser, application, or RSS), or connected technology (watch, appliance, transport, etc).

Resources

Impact: Medium, Effort: Low

GRI Impact of Layouts work across devices and requirements
GRI Impact
materials Medium
energy Low
water Medium
emissions Low
Benefits of this guideline
  • Environment: Image optimization, minification, and efficient resource loading can improve performance and provide a streamlined experience for visitors. Additionally, smaller devices are often more underpowered than larger devices, so any hardware optimization could benefit both the user and the environment. Using less energy to power screens, for example, by adopting "Dark Mode or Dark Background," can also offer many benefits.
  • Social Equity: Low-powered devices are frequently used in developing nations, but ensuring that content works for older devices is paramount.
  • Accessibility: Mobile websites usually incorporate large, touch-friendly buttons, simplified navigation menus, and clear readable fonts. This often makes it easier for individuals with visual or motor impairments to interact with than a traditional desktop layout and could prove to be beneficial for certain visitors to take advantage of. A device-adaptable strategy (considering approach limitations) maximizes accessibility and usability across all devices, enhancing accessibility and ensuring an optimized experience by reducing the need for users to adapt their experience to device-specific limitations.
  • Performance: Using lazy-loading and other delayed rendering techniques can boost website speed for small visual capacity devices.
  • Economic: Ensuring that your website or application works across not only desktop devices but also smartphones and other unique screen resolutions can benefit you financially as it allows individuals to make purchases while on the move (which can be more convenient), while potentially using little or no screen.
  • Conversion: Products and services that work well across a wider range of platforms and devices can encourage a wider audience to use your website or application not only in one situation but in many you might not have envisaged.

Example

Tags: