When designing popups for a mobile audience, it's important to consider the limited screen space available on mobile devices.
Here are some recommended sizes to work within for mobile popups:
Full-screen popups:
These popups take up the whole mobile screen, maximizing visibility.
They should, however, be used rarely and only for vital messages or exchanges.
Full-screen popups should have dimensions of 360 x 560px in size, which corresponds to a typical mobile viewport size.
This is due to the fact that most older phones, such as the iPhone 6, Samsung Galaxy S6, or phones from this time period, have an aspect ratio and viewport that allow for this design.
However, if you wish to support even older phones, you will need to adapt your design to meet your individual requirements.
* If you want to create a popup with a game inside it, this is usually the option you choose.
Popups with a banner or a bar:
These tend to be placed at the top or bottom of the mobile screen, occupying a smaller portion of the screen. They are less invasive and can be used for promotional or non-essential communications.
The size for banner or bar popups should be roughly 320 x 50-100px.
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.
Overall, building responsive and mobile-friendly mobile popups will help to ensure a great user experience and engagement with your mobile audience.