Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

http://fancybox.net/

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)

share|improve this question
5  
If you've made an alternative mobile version, then you aren't understanding the concept of responsive design. –  DA01 Feb 13 '12 at 4:14
add comment

migrated from graphicdesign.stackexchange.com Feb 13 '12 at 21:00

This question came from our site for professional graphic designers and non-designers trying to do their own graphic design.

5 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
    
a "a minimum screen resolution of 1024x768" is disregarding the concept of responsive design. –  DA01 Feb 13 '12 at 4:13
    
Yes I agree with that! Didn't thought this to the end. –  ueberkim Feb 13 '12 at 23:10
add comment

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.

share|improve this answer
add comment

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?

share|improve this answer
add comment

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.

share|improve this answer
1  
The fold is irrelevant in a modal. What's relevant is the viewport. –  DA01 Feb 13 '12 at 4:13
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.