3

I suspect image+text sliders like this aren't the most usable thing on mobile devices, but then how to present their content? Stacking the sliders statically comes to mind but that would take a lot of space if there are more than two slides. Any suggestion?

2

A few things come to mind as far as a possible solution. Stacking will take up alot of space on a mobile screen so maybe:

  1. Swap image for a far simpler one on mobile, almost like infographics. Let the image do the communicating, thus removing the need for text.

2.Present content under the slider in small text, that relates to the current slide.

  • 1
    Worth noting though, if you are just show/hiding the different images based on media queries then you will have to load all the images regardless of screen size. So if you have a 5 image slider you will effectively make the call for 10 images (5 desktop, 5 simpler mobile) which can slow down the page load and use more mobile data. – DasBeasto Mar 29 '16 at 19:52
  • @DasBeasto, that's not necessarily true if you are using HTML5 img srcsets. sitepoint.com/how-to-build-responsive-images-with-srcset – Raphael Rafatpanah Aug 15 '16 at 17:14
  • @RaphaelRafatpanah Ah very true srcsets are rather new to me so i always forget about them. So just use my comments as a "what not to do" implementation. – DasBeasto Aug 15 '16 at 17:15
0

Yes, stacking isn't a good solution at all.

My suggestion for mobile view would be to keep the text and drop the image. I've seen several sites do this. This is because a lot of times, the image alone cannot convey the message without its accompanying text. However, the text can convey the message even without the paired image, assuming this is the case for you.

0

Stack them.

Yes, the text takes up space, which is at a premium on mobiles... but what do you end up with when you remove the text?

enter image description here

A picture of a monitor. What does that tell me? Nothing.


Sometimes it's okay to cull content at lower screen sizes, but make sure the user can still comprehend everything.

For example, on my own site I list the last couple of articles I've written. On a large enough screen it looks like this:

FIRST ARTICLE TITLE

Some introductory text of the most recent article. Not too much, just one paragraph, a short few sentences to grab the reader and introduce the topic. I'd call it a lede (or lead), but it's actually a bit long for that since it's about 50 words instead of 20 to 25.

TITLE OF THE SECOND ARTICLE

THIRD AND LAST ARTICLE TITLE

But on a small screen I remove the lede of the first article, so it's just titles:

FIRST ARTICLE TITLE

TITLE OF THE SECOND ARTICLE

THIRD AND LAST ARTICLE TITLE

Which saves me about half the space, but the remaining content is still usable.


Unless you can accurately predict the kind of content and the importance of it, don't remove anything.

If it's just a photo browser with location and camera settings, maybe that text can be considered second-tier content. (but tbh why are you not using a full-size image then?) If it's a slider showing different PC options, the tech sheet is likely more important.


In this case, perhaps combine my article solution with a single-tab accordion or some other kind of collapsible/hiding element. That way you could have the image + title always visible, and only show the 'detail' text on large screens or after clicking: enter image description here

It'll be a bit taller than the side-by-side version, but it'll still be considerably smaller than that. And of course it's smaller than stacking the boxes vertically.

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.