App layout

An integrated app is contained in the iframe on a webpage with the following structure:

• Semrush header
• Semrush app product header
• The app in the iframe that's provided and managed by the app developer
• Semrush footer

While a user interacts with an app, the Semrush page containing the iframe doesn't change or reload. To divide your app from the Semrush header visually, consider a 24px offset from the static section when you set your app layout. Note that there is no Semrush left navigation bar for installed apps.

Double scrollbar

A double scrollbar may cause difficulties when working with the app, especially if the user has a small laptop screen. The double scrollbar can appear for two reasons:

• Misuse of the SDK methods.
• Misuse of the position: fixed; property in CSS.

To avoid issues with iframe resizing, consider switching to the fixed layout.

Check your app in the App Center test environment before requesting approval from the App Center Team.

Spacing

Use a 4px baseline grid and the following spacing and size values:

• 4px
• 8px
• 12px
• 16px for a space between elements inside a group
• 20px
• 24px for a space between groups of elements and columns
• 32px
• 40px for a space between big sections
• 80px

The external offset for an object or a group of objects should be greater than the internal offset.

Adaptivity

Users expect your interface to have a familiar behavior when they change screen orientation, window size, or switch between devices. Make your interface adaptive, providing safe areas, fields, and aligners required by the devices your users are likely to interact with.

For touch screen adaptivity, provide a touch area of at least 40px x 40px for interactive elements.

Element hierarchy

Place the main elements on the upper side of the screen or window, close to the direction of the local writing system. Users usually start with this area. The rest of the elements should be placed by priority of use. To emphasize priorities on certain actions and information, follow the sizing and contrast hierarchy, going from general to specific.

Groups

Element groups can make sections and information in them easier to find. To show related elements or information, use empty spaces, different forms, and colors.

Aligning

To help the user scan elements quickly, use vertical and horizontal alignment and offsets. Alignment makes an app orderly and helps people focus on information while scrolling. Both offsets and alignment are useful for establishing visual hierarchy.

You can use a set of alignment rules as a grid for placing key elements. For example, you can align the input box with the button next to it to group them together visually.

Learn more about fonts, colors, and size of UI elements in the Semrush design system.