With mobile devices accounting for nearly 80% of retail website visits, designing mobile-friendly widgets and boxes is important. Here are some best practices for creating beautiful mobile-friendly popups and forms.
Recommended Dimensions for Mobile
Screen sizes vary across mobile devices, but we recommend making your mobile designs around 360px wide and 660px tall.
For popups, we recommend turning on responsive settings to ensure your design fits any screen size or device.
For more information, see our Recommended Widget Dimensions help doc.
Mobile Breakpoint Settings
If your popup design has an aspect ratio that doesn’t scale well on a mobile device, we recommend creating a mobile breakpoint design. While a 16:9 aspect ratio works great on desktop designs, mobile popups should be optimized for 9:16.
In this example, the original popup design is 800px wide x 600px tall and is too difficult to read when scaled down to fit on a mobile screen.
By creating a mobile breakpoint you can create a design with an aspect ratio that works better on a mobile device.
The mobile breakpoint design in this example is 360px x 600px, which doesn’t have to be scaled on mobile devices and is easier to read.
Recommended Mobile Breakpoint Width
When creating am mobile breakpoint you must set the Max-Width of that breakpoint. This isn’t how wide your design is, but the widest screen or window width that will show your breakpoint before switching back to the desktop version.
- If your design is Responsive: 515px or larger
- If your design is Edge to Edge: The same width as your desktop design or larger
- For example, if you are using Edge to Edge and your desktop design is 800px wide, your breakpoint’s max-width should be 800px or larger
- If your design is Full Screen
For more information on how to create breakpoints, read How to Use Responsive Width Breakpoints.
Large, Easy to Tap Buttons and Fields
Since mobile users see your website on a smaller screen, the design must be easy-to-read, and forms should be easy to complete on a touch screen.
Create large buttons and fields that are easy to tap. Try not to make any elements too close together or too small so they are easier to tap.
Give Your Design Room to Breathe
Be mindful of placing your text too close to the edge of the popup. It might cut off on some devices, especially on newer phone mobiles with curved screen edges.
Keep Form Input Text 16px or Larger
If you want to avoid auto-zooming on iPhone when you tap on an input field, your form’s input font needs to be set to 16px or larger.
Zooming can cause some elements of your popups to appear off-screen, including close buttons or important text.
Easy-to-Tap Close Buttons
Close buttons are notorious for being too small or hard-to-find on mobile. Making a box slightly narrower than your screen size is a good place to start.
But the most reliable way to make sure your widget can be closed is to also add a “no thanks” button in the center of your widget, under the form. Even if your close button gets cut off, there’s still another way for users to close the popup.
Responsive Mobile Designs
While it’s important to account for common screen sizes and device types, the guaranteed way to make sure your popup fits on every device is to make it responsive. With responsive settings turned on, your popup will resize to fit any window or screen size.
In the Digioh editor, under the Layout tab, turn Responsive “ON” and configure the Responsive Window Settings. Note: Make sure the Thank You page, or any other steps in your popup have Responsive settings turn on as well.
We recommend using “Absolute Pixel Values” which will let you set the maximum height and width of your design. If the screen resolution goes below that size, your popup will scale down and adjust to fit. However, if the screen resolution is larger than the Absolute Pixel values, your design won’t scale up any larger.
For more information on Responsive settings, read our Responsive Settings help doc.
Preview and Test
Always double-check what your popups look like in a preview window and make sure you resize the window to simulate a mobile screen’s height and width.
But keep in mind that just previewing a popup in a desktop window won’t give you the full mobile experience. We recommend adding a “Current URL Query String” condition with a test query string.
Once the popup is Published and marked as “Live” in your account, you’ll be able to preview that popup by adding the query string to the end of your web page’s URL. (Example: mysite.com/?digioh_test_popup) Load that link on your mobile device to see the popup live on your device.
