Semantics: overlays versus pop-ups

An overlay is a box or content area that appears overlapped onto a website. It exists within the same window as the website, so it doesn’t have an address bar at the top. It typically has a transparent color that masks out the full-screen page behind it. Overlays are built with javascript (often jquery) and are widely compatible across browsers and devices. They can contain any kind of content; text, graphics, links, etc. They often have an “x” button in the corner to close them, and they can sometimes be closed by clicking away from them or pressing the Esc key.

Here’s a typical overlay:

overlay

A pop-up is a new browser window that’s smaller than the one behind it. These were used to serve ads for many years, so many people have installed pop-up blockers to prevent them from opening. Because of this, it’s recommended that we never use pop-ups on our websites. Even if you haven’t installed a pop-up blocker in your own browser, you may notice that you’re not getting pop-up ads anymore. This is because the industry has for the most part abandoned them due to the above reasons.

Here’s a typical pop-up:

popup

Words matter

A lot of people use the terms “overlay” and “pop-up” interchangeably, and this is a little bit dangerous. Nowadays we’re almost always talking about overlays — we should not be using actual pop-ups for anything. If a client knows their stuff and we tell them we’re using a “pop-up” when we mean an overlay, they might think we don’t know what we’re talking about. If we want to look like we’re digitally savvy, it’s important we use the right terms.

I’ve also occasionally heard people refer to an overlay as a lightbox. When overlays were relatively new, some photography websites called them lightboxes, since they were used to display a photo at a larger size over a transparent black mask. Although lightbox is not an incorrect term, it’s really only relevant to photography, and it’s not relevant to the overlays we’re creating on our websites, which usually contain more than just a photo.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>