User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm redesigning and rebuilding an existing fixed-width website to make it responsive and mobile optimized. I'm trying to stay as close to the original site as possible.

However, it uses a lot of overlays. They are used to show larger versions of images as well as 'pages' that have an image as well as a few paragraphs of text.

Example of an overlay:

Tablets can probably handle them but I assume that phones will probably struggle with overlays. Are there any smart solutions to this?

share|improve this question
Why not open images in a separate screen on mobile devices? – JohnGB May 8 '13 at 15:44
The overlays are done with the CMS so this is a bit tricky but not impossible. – Evans May 8 '13 at 16:08

I think your best bet would be to avoid layouts on mobile devices completely; just show a full sized image shrinked down to desired dimensions (so user may save it on her device in full size right away without being forced to open it on new page). You could also create two different layouts: one for phones and one for tablets. On phone screen show image shrinked down to 100% of the screen width. On tablets you probably wan't to stick to a different layout; tiled for example.

The question you should ask is not wether it is technically possible. The question is if it would be convenient for user to use. And believe me, it won't be. Overlays on mobile UI are annoying; they are hard to open, hard to close, they don't work half of time etc. Phones/tablets won't struggle with overlays — users will.

share|improve this answer

Your Answer


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

Not the answer you're looking for? Browse other questions tagged or ask your own question.