3

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?

  • 2
    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. – Evanss May 8 '13 at 16:08
2

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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