HomeTips & HacksWhat Are Overlays Used For In Web Design?

What Are Overlays Used For In Web Design?

If you purchase via links on our reader-supported site, we may receive affiliate commissions.
cyberghost vpn ad

Overlays are simple website features that create ‘floating’ islands of content over the main body of a page. They can be programmed to follow a user – being available to a user no matter where they are on a site.

Here are some of the main ways in which overlays have been put to use by web developers and designers.

Data Collection Options

In many countries, websites need to offer users the option of opting out of data collection efforts. Almost all site designers use overlays to offer this option to users. Overlays can ensure that users definitely see their options before they are able to see the main body of the site.

Overlays In Web Design


If you are a developer looking to make your site W3C compatible, you can overlay information to improve your website accessibility.

Information is not the only thing that can be overlaid in order to improve accessibility. Text-to-speech, scaling, and contrast controls can be ‘hosted’ on a floating overlay that is always present no matter where on a website a user is.

Overlays are often used as an efficient alternative to more deeply ingrained accessibility measures. They can be used to make a formerly inaccessible website much easier to browse for people with varying abilities.

Chat Bots

Chat bots are extremely common ways of providing good customer service features without committing many resources. The best modern chat bots are powered by the latest machine-learning algorithms.

They can answer customer queries in a contextual manner. Chat bots have purportedly passed the Turing Test – convincing scientists that they are indistinguishable from real humans in a test setting.

Overlays are regularly used as the display vehicles for chat bots. They enable users to access chat bots as they navigate the entirety of a site. Almost all chat bot overlays can be minimized by users in order to facilitate good UX.

READ ALSO: Importance of CAPTCHA in Web Security

Movement Based Popups

Popup advertisements serve an important marketing function for many companies. Special seasonal deals and products, for instance, can be advertised on a company website via popup.

In recent years, traditional ‘automatic’ popup advertisements have gone out of style. This is largely due to just how plain annoying they can be – potentially damaging user experience quality.

Movement-based popups are now relatively common. These advertisements appear as overlays when site users hover their mouse cursors over small thumbnails. This creates a degree of consent for the popup.

Navigation Buttons

Many websites facilitate ‘endless scroll’ or very long pages. This presents problems when it comes to effective and intuitive navigation. Overlays have been used for the creation of navigation buttons that ‘follow’ users.

Most of these buttons enable users to navigate back to the top of a page – something that would be extremely inconvenient to do if they had to scroll all the way to the top of, say, an endless Tumblr blog.

A Final Word…

In order for these navigation overlays to be practical, they need to be extremely unobtrusive as well as being intuitive to find. Design compromise is essential!


Marie Beaujolie
Marie Beaujolie
Marie Beaujolie is a computer network engineer and content writer from Paris. She is passionate about technology and exploring new ways to make people’s lives easier. Marie has been working in the IT industry for many years and has a wealth of knowledge about computer security and best practices. She is a regular contributor for SecureBlitz.com, where she writes about the latest trends and news in the cyber security industry. Marie is committed to helping people stay safe online and encouraging them to take the necessary steps to protect their data.


Delete Me
Incogni Black Friday Ad
Heimdal Security ad


Please enter your comment!
Please enter your name here