Lightboxes and mobile

[UpstateLeafPeeper]

It seems like using the “light-box” technique is till pretty popular, right?

So what do you do for mobile?

That is, if you have a responsive website, and you use the light-box approach on a checkout form for desktop users, what would you do for mobile users?

It seems to me that the light-box would translate very well if you are on say a smartphone.

[tracknut]

I don’t use lightboxes on smaller displays, as they don’t look right and are not a common thing to see. So:

• Push out site with standard html links to image/page of concern. Tag them with a “popup” class so you know who they are.
• In JS, change all “popup” class items to lightbox links if page width is sufficient

That way, even on a desktop display, if JS isn’t present, things don’t break.

[UpstateLeafPeeper]

@tracknut,

Thanks for the reply. Not knowing Javascript or mobile development, I’m not sure I followed your response entirely.

Let me give you some context…

When a user is in my online store and they see a product they want, they choose “Add to Cart” and for v2.0 of my site, I want a light box to pop up and show them that the product was added to their shopping cart. And because it is a light box, they can figure out that by closing the pop up they will be right back to where they were. (Much better, I suppose, than taking them to their shopping cart directly.)

But how should that work on mobile?

I agree that the screen is too small on a smartphone for people to be able discern the light box from the background page. So what options would I have if I cannot use a light box?

Am I forced to redirect them to their shopping cart?

Or is there another way to provide a better experience without using a light box?

I think your response was just telling me how to write things so that my code knows when to display a light box. But what I really need help understanding is what do you do if using a light box isn’t acceptable on a mobile device.

Thanks.

[tracknut]

Oops, I didn’t notice this was in the Design/UX section

I’m no expert on the shopping cart scenario, so I just went out to the most common shopping cart situation I run into, which is Amazon. You’ve probably already looked at what they do, which is to drop you into the cart, and give you a “Continue Shopping” button (which is the same as the back arrow). That page is presented full-screen, so it doesn’t come across visually as a pop-up or lightbox to the user.

I suppose you could also make it look a bit more popup-ish" by making that shopping cart page slide in from the right side of the page, and have a “<” button top left to represent the “continue shopping” button.

If I were making a store, I’d probably do that interaction as closely as possible to the way other stores do it, just for the sake of user familiarity.

[UpstateLeafPeeper]

@tracknut

I’m no expert on the shopping cart scenario, so I just went out to the most common shopping cart situation I run into, which is Amazon. You’ve probably already looked at what they do, which is to drop you into the cart, and give you a “Continue Shopping” button (which is the same as the back arrow). That page is presented full-screen, so it doesn’t come across visually as a pop-up or lightbox to the user.

Actually, I don’t have a smartphone to check, but am still curious.

So you are saying that on mobile, Amazon just drops you off on a page representing your shopping cart, and you have to click “Continue Shopping” to get back to where you were?

That is the scenario I was trying to avoid.

Apparently that isn’t a big deal on mobile?

I think on the desktop, people prefer a lightbox.

@tracknut

I suppose you could also make it look a bit more popup-ish" by making that shopping cart page slide in from the right side of the page, and have a “<” button top left to represent the “continue shopping” button.

That sounds interesting…