20

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.

4 Answers 4

11

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 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 a 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.

7

Instead of displaying the content in modal windows as you do on the desktop version of your website, you could consider displaying the content in slide-out panes or separate pages on your mobile (responsive) version. Add an easy to use slide up / slide down button large enough for a user to tap on with their finger.

What type of information do you store in the hover windows / tooltips? If it's important and necessary information to the user and their user experience, you might want to display it at any time on the mobile (responsive) version.

4

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/

Here is an example of things that can go wrong:

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

4

A little late to the party but I'm developing a project with a designer who is absolutely in love with modals.

For mobile devices in 2014, modals are still a poor UX choice because of positioning and scrolling issues.

They are most often JavaScript driven, which means if accessibility is important to your project then there will be a cross section of site visitors who will never experience them and, depending on the implementation you use, may never even encounter the information they contain.

From a feature perspective they sure do look slick! For me, however, that's just about where their allure ends.

A UX focused approach is to consider that all modals have a trigger element, something important or compelling you want visitors to click on which will reveal your modal and its information. The modal contents also must therefore be important (otherwise you can eliminate the modal, right?) but they are in some form of UX limbo because the modal content isn't important enough to deserve its own page... but the content is important enough to jank up a visitor's mobile experience. So which is it?

If you're designing and developing mobile first (which you should be these days), then modals can probably be replaced by a more tried and true methodology.

Even a small modal may require a mobile user to scroll through the modal content and reveal the modal's UX shortcomings. If your content is short and doesn't require scrolling then use one if you must. If your content requires scrolling then consider trimming your content, giving the content its own page, or going with a more tried and true UX.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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