How to Use Pop-Ups in Website Design

How to Use Pop-Ups in Website Design

Pop-Ups; Distractor or effective?

Let’s assume that a web design project is handed over to you as an experienced web designer and you intend to use all your knowledge and experience, in order to create a perfect website for your client.  At the first step, you would think about all factors affecting website quality to use them for your project. However, it might be a good idea to give it a second thought. 

When it comes down to web design, you should bear in mind that overdoing the positive factors, might end up to a poor outcome. The website shouldn’t look messy and chaotic. In other words, the user doesn’t have enough time to see all your website pages and the worst thing you can do is to confuse the user with lots of irrelevant information, tools and features.

The Importance of Simplicity

The best thing you can do as a web designer is to comply with a minimalist approach. The minimalism approach has been trending fast over the last few years due to its goal to make things as easy as possible for the users. 

The simplicity and transparency are two very important factors for success on the internet as all users love to see transparent and simple websites. However, as a web designer, you must pay attention to not going too far on simplicity, so the effective and important marketing tools are ignored and missed.

What the Pop-up is and why it was created?

Pop-Ups were created many years ago as a practical element for content display.  The main goal was to show the most important contents to users without making changes to the website structure. However, many websites misused this good feature and applied it for advertisement purposes and then, internet users were overwhelmed by Ads pop-ups. That was when Google stepped in. Now, based on Google’s regulations, websites with lots of advertisements will lose their rank.

Long story short, the pros and cons were not much clear back then and another question came up to people’s mind: is it a good idea to use pop-ups at all?

We, through this article, will comprehensively specify all the unknowns, in terms of pop-ups usage and provide 18 practical and useful points to be applied when designing pop-ups for a website. 

Different types of Pop-ups and their performance

  • Modal

It’s the most frequently used Pop-up on the internet now. It’s displayed on the corner or bottom of the webpage. It appears once you enter the website.

  • Interstitial 

This one covers the whole webpage, once you enter into the website. You must get rid of it, if you want to see the webpage!

  • Notification Bar

This type is normally displayed as an informative bar on the top or bottom of the page.

Using pop-up is not necessarily wrong. As a matter of fact, the most important factor which affects the quality of a pop-up is its content and how users can access the main page. 

Five good reason to use Pop-ups

You might think that Google considers pop-ups as a negative point for your website and you’d be better off avoiding them by all means. However, being aware of the below reasons, along with adding pop-ups correctly, make pop-ups capable of adding great value to your website. 

  • Capturing Attention

As a matter of fact, most people don’t have enough time these days. Hence, providing small informative boxes for users can be very beneficial and capture their attention. 


  • The Physiological Aspect

People’s mind tends to be absorbed more on small windows with attractive coloring and smart visual effects.


  • High Flexibility

Pop-ups are not being used only for distracting Ads anymore. Now, you may use them once entering into the website, after scrolling down or before leaving the website. 


  • Neat Appearance

As mentioned before, the minimalism approach is one of the most important elements to make users happy. Hence, if you have an important message for users, you can provide it through pop-up without covering the whole page.


  • More Conversion  Rate

Based on a survey conveyed by a well-known web design company, pop-ups are able to increase the conversion rate by 3% and more surprisingly, in the case of designing properly, Pop-ups have the potential to increase the conversion rate by 9%.


Don’ts when using pop-ups for mobiles

According to Google’s instructions, designers should personalize the Ads pop-ups in order to not cause distraction for other users. Google considers penalties for websites using popups described below:

  • Pop-ups which are displayed, once the user enter into a website
  • Pop-ups that cover the webpage content causing  no accessibility to website content
  • Pop-ups that covers the whole webpage

18 important rules for correct usage of pop-ups

Complying with these 18 rules will increase your conversion rate. Also, you will be in line with Google standards which improves your website SEO. We suggest you read “Conversion” article and “SEO Consultancy in Dubai” to find out more.

  1. Never waste your visitors’ time by using a pop-up without any special purpose, as your reputation will be damaged.
  2. Design your pop-up in a way to visually be consistent with your website
  3. Pop-ups to be responsive are absolutely crucial.
  4. Use short and transparent content
  5. Your message should be visible and accessible on pop-ups
  6. Don’t ask for too much information from users. Their email address will be enough
  7. Pop-up content should be relevant to the webpage content.
  8. Give your visitor enough time to explore your website and avoid using pop-ups at the first page if possible.
  9. Be in compliance with Google’s regulations on mobile pop-ups (Described above)
  10. Design separate pop-ups for the desktop and mobile version of your website.
  11. Provide pop-up closing tool (x button) 
  12. Make pop-up displays at least 5 seconds after users enter into the website.
  13. Do not repeat the same pop-up on different pages
  14. If your intention is to have your user’s attention on only one thing, put the pop-up on the center of the webpage.
  15. If you want to inform users about a special offer or discount, use sticky bar rather than pop-up
  16. If your pop-up’s content is not crucial for visitors, display it on the web page margins. 
  17. Apply user personalized pop-ups, in order to get more attention from users.
  18. If the pop-up is closed by the user, it must not be shown on other pages or even on the next visitor’s visit.


If you have valuable and special content for your visitors, or have the intention to increase your website visitors, it would be reasonable to use pop-ups. Get your visitors’ feedback by trial and error and create different pop-up elements such as visual design, content, CTA and display time and location in a way that users do not close it instantly!


Is it a good idea to use pop-ups on modern websites?

It is a good idea as long as you have valuable and informative content, you would like to share with your visitors.

Would pop-us negatively affect website SEO?

Yes or no! If it’s done appropriately and in compliance with Google’s guidelines, it would improve SEO. Otherwise, it will damage your SEO and online visibility

Where can I find Google’s guidelines on how to use pop-ups?

You may find Google’s instructions on Google Webmaster Blog, in the guideline section.

Are there any instructions to use pop-up for mobile?

There are important and strict regulations created by Google for using pop-ups on the mobile version of your website. We have listed them in this article. We will list them again here for your convenience.

  • Pop-ups displayed once the user enter into a website
  • Pop-ups that cover the webpage content causing  no accessibility to website content
  • Pop-ups that covers the whole webpage
We answer your questionsYour question will be answered by Websima DMCC experts ASAP
Full Name: your name
phone (+1)222-555-555
Your review:
Get a Quote