Mobile Lightbox Design Best Practices

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.

  1. Responsive Settings, great for simple designs.
  2. Breakpoints, a good idea if your desktop version is wide and has lots of small text or details that wouldn’t resize well.
  3. 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.

Think Big

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.

Testing

Lastly, we highly recommend testing your mobile boxes on a mobile device, not just a resized browser window. This provides the most accurate results.

How do I test boxes on my site?