Im designing a site for desktop and optimised for tablet. We are using lightboxes for one of the interactions on the journey. The developer has asked me to specify the precise sizes of the lightboxes for desktop and different tablet devices.

Where would I find this information?

  • Can you give us a bit more context, like what type of site it is as eCommerce will be different to a photo sharing site... – tim.baker Feb 7 '14 at 11:21
  • Yes, its an ecommerce site - purchase of insurance products. Ive used a lightbox for helptext on the quote page. – Anon Feb 7 '14 at 11:24
  • 2
    Does it have to be a lightbox? I'm sure you've seen lightboxes on devices where, when you try to zoom in they move on-screen and you have to chase them around to use them. Not to mention the accessibility concerns. – JonW Feb 7 '14 at 11:59
  • Tell the developer they will need to be 42 – André Feb 7 '14 at 15:03
  • @André Is live measured in em, px or mm? :) – tim.baker Feb 7 '14 at 16:34

This more regards implementation - Lightbox should adapt to the width and height of the device display as well. Setting exact size of the lightbox is against responsiveness.

So: the image within a container should be scaled to 100%, and the container itself should adapt to the size of the screen. Of course you should also focus on proper styling of the lightbox on mobile device, and optionally you could add the swipe support for it. There are many solutions you can see this best bractice implemented, e.g. this one (a slider, not lightbox, but you can see how it works by dragging left/right slider content): http://dimsemenov.com/plugins/royal-slider/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.