Submit or Manage Extensions

User Experience Guidelines for Mobile Extensions

Make your extension seamlessly integrate with Firefox for Android

Introduction

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.

The basics

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.

Color contrast

Pass your colors through WebAIM’s Color Contrast Checker. They should pass WCAG AA level.

Layout

Typography

  • Use Roboto, the standard Android font family.

  • Follow Material Design's recommendations for type scale.

The extra mile

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.

Themes

Color contrast

Pass your colors through WebAIM’s Color Contrast Checker. They should pass WCAG AAA level.

Typography

Font family

Match the font families used in Firefox for Android:

  • Inter for body and capition context
  • Metropolis for headlines, subtitles, and buttons

Type scale

Follow the Firefox for Android typographic scale.

Iconography

Use either Photon Android icons or Material icons.

Components

Frequently used elements in your extension should use mobile-optimised Material Web Components. They may include:

The last mile

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.

Layout and typography

Rebuild your extension's layout using the Material Web Components Layout Grid.

Components

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.