treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Best practices for dealing with lightbox effects on responsive sites?

  • Lightboxes.

    Clients love them.

    Responsive designs.

    Clients love them too.

    Not necessarily a match made in heaven (particularly videos: 85% of a 320px screen significantly decreases the wow factor).

    What are your ways of dealing with it?

  • I deprecated them a while back when I started to work on a lot more mobile stuff. I was seeing all sorts of implementations, many inaccessible, which was unacceptable. At that time fixed positioning on mobile was almost non-existent so lightbox style presentations got the bin.

    It was a very uplifting experience. Removing one or two presentations from your arsenal can really make you think hard about the content. Does the content have to be shown that way?

    What is the requirement for the content? To be shown inline on click of an action? There are alternatives that don't force an overlay. I still use tooltips, accordians, various show / hide UI elements.

  • I suppose they aren't required: It's an aesthetic the client really likes.

    Example Built with this code

    I am using conditional php to draw 2 galleries from the same image uploads: using orangebox for full and tablet sizes and photoswipe for the mobile galleries.

    The issue comes to videos. Ideally, I would like to fire a lightbox for full/tab sizes and then use the native video handling for mobile (using vimeo+ to handle the media).

  • I'm not sure what your JS dev is like but if you are using jquery I'm sure you could find a window resize plugin. Building one wouldn't be too bad...Just on resize and a change bool and target the dialog container(s) for resize

    Chris Coiyer worked on http://fitvidsjs.com/ would be pretty good for your videos

  • Aces. I'll certainly look into it.

  • There's fancyBox, which is a responsive Lightbox-type script that works pretty well.

    I'm kind of getting into the same school of thought as @cmcp is in and ditching that idea as well. It was cool for a while, but I think there should be creative new ways of doing it that work better for rwd.

  • I really am too: I think this mobile-first thinking is leading to a similarly fundamental shift as when we realized flash was simply a bad idea.