3.14 Develop a Mobile-First Layout

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. As such, visitors can actively choose to browse on devices that emit less carbon if they wish.

Criteria

Mobile-First: Allow a website or app to work on mobile devices primarily (testing with various connection speeds), expanding to accommodate larger displays thereafter (mobile-first). It is much more effective to do the hard work to ensure that it works well on a mobile device and then scale it up to larger interfaces.
Responsive Design: Utilize progressive enhancement and responsive web design to ensure that your work accommodates a device’s capabilities, different screen sizes, and will not fail if it meets an unsupported technology.
Carbon Aware Design: 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 or 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.
Alternative Browsing: 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).

Impact

Medium

Effort

Low

Benefits

Environmental:
Mobile-first and responsive design interfaces reduce energy use by improving performance and providing a streamlined experience for visitors. Additionally, smaller devices are often more underpowered than larger devices. Using less energy to power screens (and potentially other hardware).
Social Equity:
Low-powered devices are frequently used in developing nations, but ensuring that content works for older devices is paramount.
Accessibility:
Mobile-first 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.
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.

GRI

materials: Medium
energy: Low
water: Medium
emissions: Low

Example

Code:

@media screen and (min-width: 600px) {
	body {
		color: red;
	}
}

Beginner’s guide to media queries.

Resources

View the Guideline