Designing captivating lightbox content

Good content is the foundation of the web, and this should also be applicable to your lightbox content.

We would recommend using the following lightbox guidelines:

  • Size of no larger than 900x450px.
  • Font Size of at least 16px.
  • Clear contrasting colours, especially where the close button is concerned, and any other calls-to-action.
  • Use either PNG or JPG for any background images.

Advantages of lightboxes

  • Layout Freedom – Lightbox scripts place the content above the parent page, freeing you from layout constraints such as column widths to fit the content in.
  • Focus – By dimming the rest of the page and centering the lightbox, you put the content front and center.

Disadvantages of lightboxes

  • Modality – The user needs to interact with the lightbox before they can continue interacting with the parent window.
  • Back Button Confusion – Users clicking the browser’s back button in an attempt to go back to the parent page is a problem.