It’s important to design mobile-friendly widgets and lightboxes. There are 3 ways to create mobile-friendly designs. Which choice you make depends on your goals and needs.
- Responsive Settings, great for simple designs.
- Breakpoints, a good idea if your desktop version is wide and has lots of small text or details that wouldn’t resize well.
- Separate mobile design, perfect for separate stat tracking for mobile and desktop users, and suggested if you’re using a lot of custom CSS in your design.
Recommended Dimensions for Mobile
Screen sizes vary across mobile devices, but we recommend making your mobile designs around 300 x 400. The recommended max width is 400px, but there’s more wiggle room on height.
For more information, see our Recommended Widget Dimensions help doc.
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 to tap easily.
Room to Breathe
Be mindful of text that is too close to the edge of the design. It might cut off on some devices.
For touch screen users, we recommend making your mobile buttons the full width of your form.
Easy-to-Tap Close Buttons
Close buttons are notorious for being too small or hard-to-find on mobile. Some devices zoom in when you tap forms, making the mobile button impossible to reach. While the zoom is useful for filling out forms, you don’t want to block visitors from seeing your site.
In the example below, the close “x” in the top-right corner cuts on some devices.
Making a box slightly narrower than your screen size helps. But the most reliable way to make sure your widget can be closed is to add a “no thanks” button in the center of your widget, under the form. That way, there’s no missing it.
Responsive Mobile Designs
Even if you create a separate box for mobile visitors, it’s a good idea to make that box responsive.
Since every device is different, the best way to guarantee that your mobile designs will work is responsive design. That way, no matter the screen size, your box will fit.
For more information on Responsive settings, read our Responsive Settings help doc.
Lastly, we highly recommend testing your mobile boxes on a mobile device, not just a resized browser window. This provides the most accurate results.