Conditional Lightbox

Lightboxes don’t work for small screens.

Here’s Jordan Moore on the subject:

The purpose of a lightbox is to display a larger image corresponding to the selected thumbnail version while keeping the user on the same page instead of linking directly to a page showing the full image. Again, there are an abundance of solutions for solving this problem but the vast majority of existing patterns translate poorly to smaller displays. In fact you may argue that a lightbox shouldn’t even exist on small displays. — Jordan Moore

I wholeheartedly agree with Jordan, yet I’m seeing more and more lightboxes on responsive sites. There are even plenty of tools and tutorials encouraging designers to continue this flawed pattern (on small screens at least).

A Better Way

So what’s a better alternative to lightboxes for small screens?

In his article Why Separate Mobile & Desktop Web Pages?, Luke Wroblewski discusses treating large and small screens differently when handling certain kinds of interactions:

Interactions that happen through modal dialogs or across modules/panels on large screens often make more sense as separate pages on smaller screens. —Luke Wroblewski

Luke and others often point to Facebook as a good example of when small screens get separate pages while large screen get a lightbox.

Facebook Modal window vs separate screen

While this example demonstrates separate mobile and desktop sites, there’s nothing stopping responsive designs from accomplishing the same effect. It’s just another instance where conditional loading can come in and save the day. Here’s how it works:

  1. By default, simply link to the raw image file or chunk of content. Opening a raw image asset allows the user to pinch and zoom to read what could otherwise be entirely illegible*. For more involved content, users can comfortably interact on a dedicated screen instead of having to awkwardly interact inside a cramped overlay.
  2. Then detect the screen size (perhaps using something like this) and determine whether or not to introduce the lightbox script.
  3. If the screen is large enough to accommodate the lightbox script, inject the lightbox functionality.

It’s really pretty simple and barely requires any additional work, especially considering the fact that lightbox content almost always exists at its own URL.

View Demo

This is just yet another instance where going beyond simple pattern translation can result in a much better user experience across contexts. Similar logic applies to other UI components as well, as I demonstrate with accordions in my mobile-first responsive design demo.

* I hate infographics for a lot of reasons. All that data is locked up in some gigantic JPG in hopes that some tech blog will take the bait, write a few vapid sentences about it and slap it at the end of the “article.” Equally troubling is the fact that they are almost always entirely illegible on small screens. End rant.

24 Comments

  1. Matt Smith

    Great info, Brad. Keep it coming!

  2. Jonáš Krutil

    Thank you for sharing. I was thinking that responsive lightbox should be improved.

  3. Patrick H. Lauke

    Great stuff. Another, slightly more refined idea could be to, by default, link to a page designed as a container for images (with discreet header/footer and a close/back link), rather than just the image itself?

  4. Jacques Letesson

    Useful as usual. Thank you for sharing !

  5. Jeremy Carlson

    I’ve thought about this before, but I was ending up w/ a modified lightbox concept rather than simply skipping it. This makes more sense—simpler, lighter, and usually we’re using a lightbox to present a small amount of content in a large area anyway. Nice!

  6. Andrew

    I’m not sure if it’s just me, but i can’t seem to get the lightbox showing at any browser size.

    If the lightbox library cannot be injected, you could just apply / take away the class that a lightbox would look for

  7. Dom DiCicco

    I’ve found that as long as the content in the modal is responsive, using responsive CSS for your modal wrapper can mimic what you suggested doing through JS. (showing a separate full screen view a opposed to a modal). Obviously this approach can only take you so far, limiting you from serving up specific content since its just all CSS.

  8. Steven Langbroek

    Great article :). I’m using Harvey for this sort of behavior: http://harvesthq.github.com/harvey/, only setting it up on higher screen-resolutions. I’m thinking using !Modernizr.touch might also be a good idea, as some UX-problems appear on touch-devices (pinch-to-zoom being disabled or causing layout-issues for example)…

  9. Ben

    @Andrew It doesn’t seem to work in Firefox for me but seems fine in Chrome

  10. chillfinn

    Totally agree, I recently did this on a ‘one-page’ site. For small screens the links off the homepage went to new pages, for larger screens I stopped the link event and opened lightboxes containing the content from the aforementioned pages. Any content page header/footer styles and nav elements I then only showed for smaller screens.

  11. Mircea Piturca

    Great write! Had the same problem while integrating a product lightbox for a client. Since lots of this kind of js components are written for desktop devices, will behave poorly on mobile devices. Its the price for being lazy and not writing your own stuff according to the project requirements.

    I think we need new responsive components. It makes sense to rethink carousels, modals and lightboxes since so much has change in the last few years.

  12. Ryan Giglio

    I did something like this on a product I’ve been working on. Here’s an example:

    http://socialprompter.com/events/petco-tree-of-hope/1031/

    At large sizes the photo appears in a lightbox, but at small sizes clicking the thumbnail instead pops up a modal that asks if you’d like to view the large photo. Our concern was of course about the user experience, but also about bandwidth usage (the full size photos are ~200k).

  13. Niklas

    I’ve had a few discussions with colleagues about how to handle “layers” such as lightboxes on small screen. It seems kind of obvious now that you’ve pointed it out. Great stuff, thank!

  14. Lucas Hibbard

    I am also not seeing this work right for me. I am using Chrome on both a iMac and iPhone, so maybe this is the issue.

  15. John Roberts

    Great concept! Great info. Thank you!

  16. Andy

    I was going down the route of full screen modal windows for mobile but this falls down when content forces a scroll-bar leaving the user with 2 of the buggers. This seems like a more sensible option.

  17. Simon Goellner

    Pretty much what we did on http://uk.thebalvenie.com/ recently 🙂
    except we made the lightbox/modal and it’s content fit the screen

  18. martin césare

    @Andrew, it doesn’t work for me either in Firefox (Mac) but it does in Chrome and Safari.

  19. Patrick Samphire

    I’m doing something similar with a website I’m currently building, although with inline content. In this case, though, it’s a modal options box. With large screens, I launch the modal. With smaller screens, it accordions open instead.

    Lightboxes and modals are a complete disaster on mobile devices. Even on iPads they fail more often than not. I really don’t know why people do this. It’s not exactly difficult to make it conditional.

  20. Paul Frost

    I’ve been thinking about this problem for a while now, and I think Patrick’s idea of a default link to a page etc. and then override with a lightbox on larger screens is a good plan. But my javascript is useless and I can’t work out how to do it. I think it just needs coding as a link to a page, but then use javascript to hijack the link and direct it to a lightbox script, like colorbox.

    I tried playing with the demo code but could only get the lightbox to appear at the top of the page rather than where I was on the page. I tried changing the css for the position of .lightbox from absolute to relative, but then it was just at the bottom, any clues how to position it in the right place?

  21. Sedat Kumcu

    Thans for this article. Good workss.

  22. Stéphanie

    Nice article and the idea is great. The only problem is that the current script does not work on Firefox. After runing some tests, I think I found what was getting messy.
    If you try a console.log(size); on Chrome you will get widescreen while you will get “widescreen” (yes with the double quotes) on Firefox. Yes, this is as simple as that (and it took me 1hour to find it out, shame on me !)
    I forked the code to make it work on Firefox : http://codepen.io/inpixelitrust/pen/jAqst

    I’ll try to test it on other browsers to see what’s the output of the size var, but this might definitively be a maintenance problem :/

  23. Paul Frost

    I’ve been waiting to see an explosion of code for this technique as it seems a no brainer to try and achieve for a responsive website. But I’ve not seen anything yet that is usable for production.

  24. Karl

    The logic is obvious, but if for example it is a photo gallery, its impractical to navigate to a new page for small screens just to show the image. It is beneficial to retain some kind of navigation between images, and possibly a close button to return swiftly to the context. There are solutions already like Photoswipe, which is pretty easy to add on a conditional basis to trigger only on small screens. However, it is a bit sad that one would need to implement two separate lightbox scripts to achieve the best results on all size screens. The best solution would be if there was one lightbox script that acted differently depending on screen size.

    Of course, the above only applies to displaying media (photos/video).

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.