1

This might be a really basic question, but I am trying to figure out how to best create a responsive two-column layout. Let's say you have two sets of data. For example, latest departures and arrivals at the airport. One is not really more important than the other, so it's hard to prioritize one over the other. On a normal large screen, I have them side by side, so you can look left or right depending on the info you need. However, I am not sure what is the best place to manage this on smaller mobile screens.

All the responsive multi-column layouts seem to treat the page like a newspaper where each column is a continuation of the previous. When the screen is smaller, the columns end up stacked on top of each other. Is there a good example of how to treat two columns as equals?

1

They are not equal in importance. When you read, page you start top down, left to right and the beginning is more important the end. You need to think of your use cases before you design the interface. Do you really need them side by side to compare?

At an airport, you never need to see the arrivals and departures on the same screen because you only care about one at a time. If you are seeing when your flight is leaving, you only look at the departures. If you are picking up someone and waiting to see when a flight is landing, you only need to see the arrivals. If you are the air traffic controller, you shouldn't be on your phone anyways.

For a small screen, you will have to reduce the amount of information you see at one time because you cannot show everything at once, just the essentials and then click to get the details. That's why two column layouts stack after the screen get really narrow. Or they just make everything small or have less info to squeeze it all in.

0

I might be wrong in this but here is my take on this:

The user behavior varies from device to device. The mobile user is more prone to scrolling as compared to desktop or large screen user. That's the most probable reason behind the stacking of columns one after the other in smaller screens.

If ever you want to show the foremost priority item first to the user, keep it stacked above the other one, as user3749223 aptly pointed in smaller screens we go top to bottom and that makes sense.

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.