All Collections
The Pop-Up
Best Practices for Designing Popups for Desktop
Best Practices for Designing Popups for Desktop

Recommendations for Full-Screen, Banner/Bar, and Modal/Dialog Popups

Mads Lyse Nielsen avatar
Written by Mads Lyse Nielsen
Updated over a week ago

Full-screen popups:

When it comes to the aspect ratio and size of a big popup for desktop, there is no one-size-There is no one-size-fits-all solution when it comes to the size of a large popup for desktop since it relies on a variety of factors such as the unique design needs, the material being displayed, and the general architecture of the website. However, I can provide some broad advice:

The optimal size for a large popup on a desktop may vary, although a width of 600-800 pixels is frequently advised. The height might vary based on the type and quantity of information displayed. A height of 400-600 pixels is typically used for large desktop popups.

This also implies that there is no perfect aspect ratio; it all depends on the material you wish to display. Here are three sizes to experiment with;

MIN: 600 x 400px

MID: 700 x 500px

UP TO: 800 x 600px


* If you want to create a popup with a game inside it, this is usually the option you choose.

If you want to have a less intrusive interaction with the user when they reach your website, we propose utilizing a popup teaser, which is a button or banner that the user must engage with before they can view the game.

If you need sizes to see how such a banner will look, you may find them below.

Popups with a banner or a bar:

These tend to be placed at the top or bottom of the screen, occupying a smaller portion of the screen. They are less invasive and can be used for promotional or non-essential communications.

The minimum dimension for banner or bar popups should be 320 x 50-200px.

However, if the objective is to place a bar at the top or bottom of the display view, the dimension can be 100% x 50-200px.

As with any design, the overall aesthetic and balance of the popup with the rest of the website must be considered.

Modal or dialog popups:

These popups appear in the center of the mobile screen, overlaying the content but not covering the entire screen.

They are often used for important notifications, prompts, or actions.

The recommended dimensions for modal or dialog popups are approximately 300-350 x 300-400px.

Remember that these are broad recommendations that should be adjusted based on your own particular design and content needs. In addition, it is critical to test your popups on a variety of mobile devices and screen sizes to verify that they show and perform properly across all devices and orientations.

When discussing popovers, it's also relevant noticing the users' escape options: Allow users to easily ignore or close the popup if they are not interested or prepared to engage with it. Make clear and visible close buttons or gestures that are easy for mobile users to find and interact with.

If the user tries to engage with the material behind the popup, either a clear escape button or the option to leave simply by clicking on the overlay might be used.

Did this answer your question?