Recommended Sizes for Widgets on Desktop and Mobile

There’s no exact “right” size for Lightbox design. That’s why we offer so many themes! Whether you want a subtle sidebar widgets all the way to full screen takeover, you can design that in Digioh.

But as a starting point for a basic lightbox or sidebar email capture we recommend these dimensions:

Desktop Lightbox: 500×400
(Recommend max height: 650)

Desktop Sidebar: 340×200

Mobile Lightbox/Sidebar: 300×400
(Recommend max width: 400)

But if you want some more detailed examples, we got you covered!

Desktop Lightbox Sizes

Designing a lightbox for desktop users is really easy with Digioh, thanks to our responsive settings. You can choose any dimensions, turn on responsive design, and your lightbox will be resized automatically to fit any window size.

Around 500×400 looks good!

Lightbox design can vary a lot, but if you want a good looking pop-up that’s 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:

Recommended Max Size: 900×650

If you want to design something that will look good on most screens, regardless of resolution, 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.

This isn’t a hard rule, just a recommendation. If you’re going for a full screen design, you might even choose to go larger and use responsive design.

Here’s a preview of a 900×650 lightbox on a 1024×768 window:

Responsive Design on Desktop

Of course there’s no way to predict every single screen resolution or whether or not your visitors are even viewing your website in full screen mode. So if you want to guarantee that your lightbox fits in any browser you can turn on responsive design. This will automatically resize your lightbox based on the size of the window.

To learn more about responsive settings, check out 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:

Desktop Sidebar Sizes

Sidebar widgets appear next to your content, so generally you want those to be a little smaller than a lightbox. Feel free to experiment with sizes and layouts that look good on your website.

But to start out, we recommend a sidebar between 300×200 or 375×250.

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

Here is an example of a 340×200 sidebar with the position Center Left, viewed in a 1024×768 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:

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:

Responsive Design on Mobile

Since some devices might have a view port that’s even less than 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 stick to the recommended sizes for desktop, your sidebars will probably also look good on mobile devices. But to be on the safe side, just make sure you turn on responsive design and they’re definitely fit.

Here is a preview of a mobile sidebar:

If you want to get even more ideas about what kind of designs can work, take a look at our huge selection of themes!

Tagged: