Using overlays on mobile devices

Question

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: http://lokeshdhakar.com/projects/lightbox2/

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

Answer 1

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.

Answer 2

Either display the information in full size as @Ruslan proposes or do the opposite and display the minimum information needed in small devices.

If you go for displaying the minimum information, it should be much less than in desktop devices. This way the user can see more information from several pages/images at once and if interested overlay the full info.

Is the same approach as in the big screen size, but scaling it (smaller screen, less information) but always considering there is a minimum information the user needs.