I'm working on a responsive wireframe and the desktop version has a feature area rotator.
On the desktop site, it just has arrows and I worry that that will make navigating the rotator difficult on mobile. Is there a better alternative for how to handle such a content area when it is displayed on a smaller mobile screen?
You could replace the arrows with a simple swipe control, implemented via JS. You could hint that more pages are available by providing 'peeks' of the two extra pages outside the viewport (so it appears the far edges of the previous and next images are just within sight).
The big advantage of the swipe control is that it gives the user a large touch area to interact with; arrows won't give you that unless you make the next / prev buttons particularly large.
We recently implemented a responsive slider. We chose to have this work in an autoplay mode, which may or may not be best for you particular context.
In case more navigation is needed, arrows under the slider were used as additional navigation on this element.
For us this made sense because: - Our slides tend to have 4-5 words max, which allows us to calculate time per slide. - We have no more than 4 slides at a time. - This element is only on 2 site pages. - The benefit of swipe did not outweigh the additional code required.
We are currently testing location and size of the arrows for a more touch friendly interface. If I were implementing this from scratch, I would make the arrows much larger and move them further away from the slide in a mobile view then my attached image.
Hopefully some of the reason behind why we chose what we did can help you figure out what could work best in your situation.
you can see it in action here: beautylish.com
