Using a Timeline in a Responsive Design?

Question

I might already know the answer to this but would like some feedback / opinions on this. I am currently putting together a responsive design that will use a linear horizontal timeline. This works fine on Desktop to Tablet but on Mobile it will shrink to a very small scale.

Desktop: http://monosnap.com/image/Cy5Iu4tN67dz3zUgNzZ1PXgik.png

Here is a similar timeline using a responsive design: http://monosnap.com/image/tyhdyZlMtXrP2TY8fZweouN78.png

As you can see its a little unusable because it is so small.

On two mobile Apps I found they introduce a larger timeline that a user needs to scroll to see the rest of the timeline:

http://monosnap.com/image/UsHIraT6SwCGn4S34pPRDynWZ.png

http://monosnap.com/image/hwuekZxnckLvsuidwjnJ3rgIX.png

I think once you get to the mobile size, the scrolling to the right is the better option, is there an valid argument for the very small one that fits on the mobile but is so small you can barely understand what is going on?

Thanks

Answer 1

There are two options you can look at:

• convert the horizontal timeline into a vertical timeline so that users can scan it by scrolling down. While horizontal scrolling will work but its not exactly super intuitive (it would work if you had separate sections with clearly delineated titles but a continuous image might not work too well) in mobile devices and hence a vertical scrolling timeline might help.

• You should show a condensed version of the timeline where you might not want to show the details every 5 minutes but more like 10 minutes or 15 minutes so that you have a summarized version.

Answer 2

You can do a contextual display of the timeline, let the user select a portion of the time line they want to focus on and show that in a detailed manner.

Something along the lines of what SE does with the reputation graph:

You can show the entire timeline in a horizontal manner to the user and let him select a section by clicking and dragging, or providing input boxes since it's difficult to get precision on mobile.

Answer 3

Big is good. Big is readable.

If you give the user a sign of what they need to do it will be user friendly. Please use gestures, people like using gestures.

Just make sure you add some sort of indication that will tell the user what to do and they should be able to use the feature.