How should modal popups and tool tips be handled in responsive websites?

Question

I am reviewing some website wireframes from a client and have decided to make the new site responsive. I've had pretty good luck so far with responsive theming and design from a few past projects and they look and act really nice across widths / devices.

However this particular wireframe has quite a few modals and hover windows with lots of information in them.

My questions are:

1. Will this be like trying to fit a square peg in a round hole?
2. Do we need to perhaps go the m.domain.com route where we query the device and design two separate websites?
3. Should I advise the client to do away with so many modals and hover windows if we go the Responsive route?

I know these are subjective questions so not really sure if this is appropriate within this type of forum.

Answer 1

Should I advise the client to do away with so many modals and hover windows if we go the Responsive route?

I'd restate that question as:

Should I advise the client to do away with so many modals and hover windows?

And the answer to that is, usually, yes.

But not always. If it's a very complex desktop-centric site, maybe them modals are a good option there.

The catch is that on mobile devices, modals are somewhat useless, given that the size of the screen usually means that an modal smaller than that, is rarely useful.

You could consider having two forms of modals...the pop-up on big screens, the separate page on mobile. How easy/difficult that may be to implement, I don't know.

Answer 2

According to Modal Best Practices, modals are to be avoided because some mobile phones do not support them, or handle them awkwardly:

http://mobilewebbestpractices.com/user-experience/count-on-modal-windowsoverlays/

Heres an example of things that can go wrong:

https://github.com/twitter/bootstrap/issues/4714