Extend Time on Site & Deepen User Engagement with this Unique Interaction Experience
By Peter Prestipino, Editor In Chief ::
Don't underestimate the importance of even the tiniest of user interactions on a website, from link effects to scrolling and every digital detail in between.
One common user interaction that takes place on millions of websites each day is the presentation of a lightbox. Presenting content through a lightbox (used most often to display images and videos) is now a very common practice for information publishers, service providers and Internet retailers, so knowing the most popular solutions in active use across the 'Net will ensure a Web design is using nothing but the best for its digital presence - but there's a whole lot more to know.
A lightbox is essentially a JavaScript library that makes it possible to add a layer of content (e.g. images and video) in a separate window that fills the user's screen, dimming out the rest of the page as the user interacts (e.g. views or navigates through images). The term is sometimes used interchangeably (and, arguably, mistakenly) with the term "modal."¬ù The latter, however, is actually more specific to direct system messaging and interaction for the sake of an immediate event or conversion (e.g. entering data into a contact form), whereas lightboxes have been used traditionally (or should have been) to simply enhance the viewing experience of users. Not all lightboxes are created equally, however, in terms of their styling, animation and positioning.
Do You Know Modals?
Whether you like it or not, modals and popups are used regularly on the Web and to positive effect. Discover the best practices and guidance on maximizing the modal interaction experience for your users at .
As responsive design becomes the norm, many best practices have, fortunately, emerged that designers can follow over the course of their design and optimization initiatives (Website Magazine has put together several at wsm.co/lightboxbp).
That said, it will always be necessary to build out this unique digital experience with solutions that support such customization. One of the optimal lightbox solutions today is that of Lightbox; the original lightbox script from software developer Lokesh Dhakar who wrote the popular solution more than eight years ago.
First developed in JavaScript, but now available in jQuery, the script is highly customizable making it a reliable choice for this essential interaction experience. There are, of course, many others.
When the aforementioned Lightbox was released as open-source, many developers quickly modified the code to create plugins including Colorbox, Magnific Popup, Slimbox and Thickbox, which are still used today. These are some of the best-known offerings available, but in the end, the ability to customize the design and actual interaction is what will matter most to designers and developers, and those released in the past 18 months to two years have focused on being smaller, smarter and more elegant in the process.
Website Magazine covered Strip, for example, nearly one year ago and it was well received at that time by the digital design community. Another favorite of the digital design community that is currently being used in several projects recently is Featherlight by Noel Bossart.
Coming in at just 6kb (400 lines of Javascript, 100 of CSS), the lightbox supports images, Ajax and iframes, and could prove ideal for use as a gallery. Once again, different offerings will result in different experiences so it is always best to have a high awareness of both new and under-the-radar offerings as developers pursue those that are best for their own users interactions. Some of those offerings include FancyBox, Uglipop (modal), LightGallery and Chocolat (seen above), which enables designers to display one or several images and stay within the same page; either in a full window or within a container. These and other JavaScript libraries are featured regularly in Website Magazine's Design & Development Digest at
