Recommended Sizes for Widgets on Desktop and Mobile

Whether you want a subtle sidebar or a full-screen takeover, you can design that with Digioh’s form builder.

There’s no exact “right” size for Lightbox design. But as a starting point for a basic lightbox or sidebar email capture widget, we recommend these dimensions:

  • Desktop Lightbox: 500×400
    (Recommended max height: 650)
  • Desktop Sidebar: 340×200
  • Mobile Lightbox/Sidebar: 300×400
    (Recommended max width: 400)

Below, we share some more detailed size guidelines

Desktop Lightbox Sizes

Digioh makes designing a lightbox for desktop users easy with our responsive design settings. Choose any dimensions, then turn on responsive design, and your lightbox pop-ups will automatically resize to fit any window.

Around 500×400 looks good!

Lightbox design varies, but for a pop-up centered on your website, a lightbox around 500×400 looks pretty good.

Here’s a preview of a 500×400 lightbox on a 1366×768 window:
newsletter signup lightbox on a desktop screen

Recommended Max Size: 900×650

To design something that looks good at most resolutions, it’s a good idea to stay under 900×650.

1366×768 is a common screen resolution, and some people still even use 1024×768. So 768 seems like a good number to stay under for height. To account for the address bar, bookmarks bar and taskbar, etc., staying under 650 pixels for the height is probably your best bet.

Still, this isn’t a hard rule. For a full-screen design, you may choose to go larger and use responsive design.

Here’s a preview of a 900×650 lightbox on a 1024×768 window:
large email capture lightbox in a desktop window

Responsive Design on Desktop

There’s no way to predict every screen resolution or whether your visitors will view your website in a full-screen window. To guarantee that your pop-up fits any window, you can turn on responsive design. This automatically resizes your lightbox based on the size of the window.

To learn more about responsive settings, see our help doc here.

Here is an example of a 900×650 lightbox with the max width and height set to 75%, viewed in a 1024×768 window:
responsively designed website lightbox in a desktop window

Desktop Sidebar Sizes

Sidebar widgets appear next to your content, so generally, these should be slightly smaller than a lightbox.

We recommend starting with a sidebar between 300×200 or 375×250. Experiment with sizes and layouts that look good on your website.

Smaller sidebar designs look good with the position set to Center Left or Center Right. They appear relatively high on the page, so they grab attention without covering your content.

Here is an example of a 340×200 sidebar with the position Center Left, viewed in a 1024×768 window:
sliding sidebar signup form in a desktop window

If you want to add more details or images and make a slightly larger sidebar, we recommend using a Bottom position.

Here is an example of a 375×250 sidebar with the position Bottom Left, viewed in a 1024×768 window:
sliding email capture widget in a desktop window

Mobile Lightbox Sizes

Every mobile device is a little different, but 300×400 is a good size for mobile lightboxes. We recommend staying under 400 wide.

Here is a preview of a 300×400 mobile lightbox design:
mobile friendly signup form example

Responsive Design on Mobile

Since some devices have a view port under 400 pixels wide, you can turn on responsive design and set your max pixels to the dimensions of your lightbox.

The lightbox will resize down in smaller resolutions but won’t exceed that size in larger ones.

Mobile Sidebar Sizes

If you use the recommended sizes for desktop, your sidebars will probably also work on mobile devices. But to be on the safe side, make sure you turn on responsive design.

Here is a preview of a mobile sidebar:
small sidebar email capture widget in a mobile sized window

For more help designing your mobile lightboxes, please see our Mobile Design Best Practices.

Tagged: