User Experience Guidelines for Mobile Extensions
Make your extension seamlessly integrate with Firefox for Android
Make your extension seamlessly integrate with Firefox for Android
In August 2020, Mozilla launched a new, reimagined Firefox for Android experience (codenamed "Fenix"). The browser for Android has been rebuilt from the ground up using GeckoView, Mozilla's mobile browsing engine.
Currently, only a limited number of Recommended Extensions are supported. However, we are continuously working on increasing support, taking into account usage and feedback to ensure we are making the most of our available resources. We will post updates to the Add-ons Blog as plans solidify each quarter.
To make sure your users have a great experience with your extension on Firefox for Android, you’ll want to make sure your extension’s user interface integrates well with the browser.
This article provides guidelines for optimizing your extension’s user experience on mobile. We’ve broken these guidelines up into three segments: the basics, which lists the minimum requirements needed for your extension to work well on a variety of devices; the extra mile, which details how you can make your extension look and feel like Firefox for Android; and the last mile, which describes how you can make your extension feel mobile-native or mobile-first.
Make your extension’s stylesheet responsive and follow these key guidelines to ensure that your extension works well for as many people as possible on a variety of devices.
Pass your colors through WebAIM’s Color Contrast Checker. They should pass WCAG AA level.
Optimise for a 360 × 640 dp layout.
Follow Material Design's touch targets guidelines.
Use Roboto, the standard Android font family.
Follow Material Design's recommendations for type scale.
To provide a seamless experience between your extension and the browser, use the guidelines in this section to make your extension match Firefox for Android’s look and feel.
Use the Protocol Design System's color palette.
Match Firefox for Android's color usage for light and dark themes.
Pass your colors through WebAIM’s Color Contrast Checker. They should pass WCAG AAA level.
Match the font families used in Firefox for Android:
Follow the Firefox for Android typographic scale.
Use either Photon Android icons or Material icons.
Frequently used elements in your extension should use mobile-optimised Material Web Components. They may include:
If you’d like your extension to behave as though it is integrated in the browser, use these guidelines to design your extension to be mobile-native.
Rebuild your extension's layout using the Material Web Components Layout Grid.
Most if not all elements in your extension should use mobile-optimised Material Web Components:
Seldom used elements that could be mobile-optimised include Card, Chips, Data table, Dialog, Drawer, Image list, and Snackbar.
Components should match Firefox for Android color usage for light and dark themes.
Develop
Develop
Develop