Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

I have been trying to implement a vertical scrolling site that is also responsive. For that purpose, I have not used a responsive grid, only media queries. But I do have some blanks to be filled and I was hoping that you might shed some light.

First of all, I haven't used grids because I need elements to be contained either in the 100% width/height of viewport, or the 1200px Width/100% Height (and responsively to lower viewport sizes) of the viewport. My top tier screen is 1920x1080.

I have laid down some screens (mainly they are slices in the same viewport, for example 3 or four columns), but my problem is with a circular content carousel that is contained on 1200px and displays 3 columns at each time with a simple image and text below. Up to the ipad break-point (1024px - landscape or 768px portrait) it works fine. But when I go to the iphone breakpoints all hell breaks loose.

  1. How can I implement the responsiveness on the carousel? Are there ways for example to have this on larger screens as a three column carousel, but what do I do when it comes to mobile devices?
  2. Is vertical scrolling site compatible with the responsive web design or is it a bad tactic?
share|improve this question
2  
Your question seems very implementation centered. What is your user experience concern here, specifically? – kontur Feb 19 at 10:15
Mostly how the carousel would be user friendly. Where should I ask about the implementation? – Panagiotis Feb 19 at 11:15
1  
stackoverflow.com is the place for concrete how-to code questions. Could you provide mock-ups or screenshots (links to those, if you can't insert the images yourself yet as new user) of things that look or work in a problematic way? With your question describing different screensizes and scenarios, it is a bit hard to really pin down what is the thing that causes you trouble. – kontur Feb 19 at 11:20
oh I see. Thanks :) – Panagiotis Feb 19 at 11:30
1  
Also see caroufredsel.dev7studios.com - this is a carousel that has a "responsive" setting. – kontur Feb 22 at 7:15
show 3 more comments

closed as not constructive by kontur, JonW♦ Feb 22 at 7:40

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or specific expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, see the FAQ for guidance.

1 Answer

up vote 1 down vote accepted

I can imagine that. I think you need to discard the carousel on a certain (iPhone-ish) width and implement a user-controled carousel - like the Swedish newspaper Expressen:

enter image description here

Below the big header you see navigation arrows, and a red marker besides three gray ones. These are a carousel implemented on iPhone width fully user controlled. This is the same carousel viewed on the web:

enter image description here

On the web it all moves (annoyingly), but on the iPhone all is still. Nicely implemented! Do the same and you'll get my cheers!

share|improve this answer

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