I'm not a great graphic designer or UI designer. I'm developing a plugin that has a popup window on click of a link on webpages. The effect is similar to this one:

enter image description here


But instead of images, like on Fancybox, our content is text possibly mixed with small images.

So you click a link, the popup comes up and hides the background content. I just don't know how big should this popup be and if it should be responsive or not. Meaning, when the window is resized, should the popup box resize with it.

Why would I choose to make a popup window responsive? When should I apply responsive design? What purpose does it serve? (I already have an alternative mobile version, so that can be taken out of the equation)

My popup can be seen here:

enter image description here

http://jacksongariety.com/ (click the word "hipsters" in the header)

  • 5
    If you've made an alternative mobile version, then you aren't understanding the concept of responsive design.
    – DA01
    Feb 13, 2012 at 4:14

5 Answers 5


Pop up boxes don't tend to work very well with truly responsive designs. For larger screens they work well but on mobile devices they can be very impractical and sometimes don't work at all. I wouldn't worry so much about screen resizing and focus more on adapting the implementation for small screens. Perhaps you could make the link take you to a different page on mobile devices instead of using a popup?


Like so many things in UX, it really depends on context. It sounds like you are making a true modal...meaning you want to block all page interactions until a person interacts with it.

For small devices, you will want to make this modal as big as possible so it's easy to see/read/interact with. ON a desktop you probably don't want it that big.

For mobile use, what I've done in the past is:

  • grab the viewport dimensions
  • grab the scroll position of the page
  • render the modal so that it's roughly 90% the width of the viewport and slightly below where the page is currently scrolled to.
  • don't make the modal taller than the viewport (if there is more content than would fit, I'd argue a modal is the wrong solution here)

Then, for the desktop, I'd keep it all as is, but check for maximum sizes. For instance, I'd make the modal 90% the viewport up until some arbitrary size (say 400px) at which point it wouldn't be any bigger.

As for resizing it on browser resize...it's nice to have, but I wouldn't sweat it. Remember that responsive design is really about accommodating multiple device screen sizes more than it is about a 'resizing fluid' layout.


As a plugin it would be cool if the popup was responsive. It might give your plugin a leg up against other similar ones that are not responsive - think of it as a selling point. It will also look better if someone, for example, opened it on their iPad and then switched to landscape, or vice versa.

Responsive design is taking off, and soon, I would imagine, clients will start asking for it. The benefits for them is that you don't need to build a variety of websites for a variety of devices but instead just one which will fit most if not all resolutions. With users viewing the web from a plethora of devices - tablets, mobile phones, large monitors, small monitors, netbooks etc - it has come to a point where responsive design is a fantastic solution to making sure the user gets to view your content no matter what device they are on.


Well, I would set the width to a maximum of 960px and the height to 600px. These are simply what I consider maximum to remain "above the fold."

Very few users will resize a browser window unless they are required to. I suspect even fewer would resize the window with an active popup. I wouldn't concern myself with resizing upon window resize. If anything I'd close upon window resize.

  • 1
    The fold is irrelevant in a modal. What's relevant is the viewport.
    – DA01
    Feb 13, 2012 at 4:13

I would always show enough grayed out content to identify the pop up as a pop up.

And many people (including me) are not familiar to close the window when clicking on the grayed out content, so i would always show an X-Button.

  • a "a minimum screen resolution of 1024x768" is disregarding the concept of responsive design.
    – DA01
    Feb 13, 2012 at 4:13
  • Yes I agree with that! Didn't thought this to the end.
    – ueberkim
    Feb 13, 2012 at 23:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.