Submit or Manage Extensions

User Experience Guidelines for Mobile Extensions

Make your extension seamlessly integrate with Firefox for Android.

Introduction

To make sure your users have a great experience with your extension on Firefox for Android, you want to ensure 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

Use the Acorn Design System’s color palette.

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 caption context
  • Metropolis for headlines, subtitles, and buttons

Iconography

Use either Acorn Android icons or Material icons.

Components

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

The last mile

If you’d like your extension to behave as though it is integrated into 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-optimized Material Web Components:

Seldom used elements that could be mobile-optimized include Card, Chips, Data table, Dialog, Drawer, Image list, and Snackbar.