Lightbox or not

The other day a client told me that he hates lightboxes. ”You can never find the X to close them,” he explained. While I think lightboxes in general are OK, my concern with them is that it’s so hard to find a good mobile counterpart.

Let’s first look at the purposes a lightbox in the most classic sense fulfills on a layout conceived for desktop use. Imagine a page with multiple images and text on it. When the layout raises the need for a lightbox, the images are typically small, in a sidebar, or surrounded by layout elements that are believed to distract the eye from the image. Here’s why you would add a lightbox to your website then:

  1. It shows a single image as large as possible.
  2. It removes all other elements around images, perhaps leaving a caption.
  3. It allows to flip through multiple images in a slideshow like manner.

Now, let’s consider how the very same page would translate to a mobile layout, that means: a smaller screen. Any multi column layout will likely fold into one column. Images in that case are likely tospan span the full width of the single column that remains. As a result, they’re showing very large already, certainly they cannot get any wider. That’s exactly reason 1. for the lightbox on desktop layouts from the list above. Images that large are also likely to get your eye’s full attraction, which is reason 2. from the list above. And last, thereby ruling out reason 3. from above, many mobile designs will convert multiple images into a slideshow that you can flip through. So all the three objections of a lightbox are already fulfilled on the particular mobile design we’re speaking about, which omits the need for a lightbox on mobile. In fact, I have seen lightboxes making the images smaller by adding margins.

The tricky thing is that a responsive design means that the everything should adopt to the browser window size somehow. So if there is a lightbox on desktop, it has to be there on mobile, and yes: even though it’s providing no additional functionality. Taking the responsive paradigm strictly, you can’t do lightboxes on desktop and “something else” on mobile. Of course nobody says you can’t work around that self-applied restriction, for instance by hiding any lightboxes on smaller display sizes. This is something that actually would work well in image-only lightboxes as discussed so far.

Yet, in many scenarios, lightboxes serve the purpose of providing a (pre)view of some other content. Imagine a portfolio website with lots of project thumbnails on an overview page, where clicking a thumbnail would open the project in the lightbox. In these, it won’t be possible to simply hide lightboxes. Instead, the site had to function differently on desktop and mobile: On desktop, it had to open a lightbox, while on mobile, it had to go to the actual page. Sure, there’s again a way to work around that, by switching URLs with the History API and making the item lightbox look like a regular page on mobile ... but isn’t that a sledgehammer to crack the nut?

Summarizing, here’s what I think it comes down to:

  • If you feel the need for a lightbox on desktop, you will (and will have to) find a way to deal with them on mobile.
  • If you design with “mobile first” in mind, you probably won’t come up with lightboxes at all.
Desktop: 1025px and above

12 column responsive grid
Tablet: from 768px to 1024px

4 column responsive grid
Mobile: up to 767px

4 column responsive grid