Grow your CSS skills. Land your dream job.

Best practices for dealing with lightbox effects on responsive sites?

  • # October 13, 2012 at 10:33 pm

    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?

    # October 14, 2012 at 4:32 am

    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.

    # October 14, 2012 at 12:55 pm

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

    [Example](http://iamshawnrice.com/demo/hgld/portfolio/the-rock-tenor/ “Example”)
    Built with [this code](http://pastebin.com/HXyfCtwX “”)

    I am using conditional php to draw 2 galleries from the same image uploads: using [orangebox](http://orangebox.davidpaulhamilton.net/ “”) for full and tablet sizes and [photoswipe](http://www.photoswipe.com/ “”) 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).

    # October 14, 2012 at 8:26 pm

    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/](http://fitvidsjs.com/) would be pretty good for your videos

    # October 16, 2012 at 12:47 am

    Aces. I’ll certainly look into it.

    # October 16, 2012 at 2:07 am

    There’s [fancyBox](http://fancyapps.com/fancybox/ “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.

    # October 22, 2012 at 12:15 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".