Best practices for dealing with lightbox effects on responsive sites?

[iamshawnrice]

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?

[cmcp]

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.

[iamshawnrice]

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).

[Vinnix]

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

[iamshawnrice]

Aces. I’ll certainly look into it.

[Anonymous]

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.

[iamshawnrice]

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.

[Author]

Posts