Responsive list views - shrink layout or reorganise?

Question

Going through a site redesign at the moment and considering my options for a list view.

This list view contains a thumbnail, title, sub-title, description and some meta.

This is displayed with the thumbnail floated on the left, and the title, sub, description and meta stacked to the right.

Once it hits 480px width, it stacks and then thumbnail is full width above the text.

I'm wondering if this is the best way to handle this, or should I be considering keeping the list the same orientation as it scales down?

Whats peoples thoughts on this? I've attached a mock up to demonstrate better.

Answer 1

These sort of questions, for me, can only be solved by prototyping with realistic content. I design things iteratively, for instance try your mobile 2 approach, and it just doesn't fit, but maybe a narrower font, tighten the padding, can get it comfortable. But maybe not.

I don't think you can design without prototyping for those cramped screens. Not only is the visual layout important, being able to comfortably operate it, big enough buttons, etc. is critical.

So I would try for your mobile 2 layout first. And don't rule out more than 2 layouts, I usually do 3 layouts.

Answer 2

What is the content you are displaying? How important are the thumbnails in it? How important is the other metadata? Could you maybe remove some of the data in each list element completely from the list to make space for the more important stuff? Is there another place where you can view parts of the data?

E.g. in our TV watching app, we have a list of recordings. We have a slider that lets you adjust the thumbnail size. At the larger sizes, you get a thumbnail at the left, then the recording's title, subtitle, production year and description to the right of it. You also get other columns (like date recorded, size on disk etc.) to the right of the title. However, the description runs below all these columns and uses the full width.

If you make the thumbnail size smaller, the first thing to be truncated and then removed is the description. You can always click a recording and get a full-screen info display with the full description, cast and crew, etc.

This is on the desktop, and we have a mobile app so we don't need a responsive design, but if that was your case, at some point I'd think of even just removing the thumbnail, and the subtitles and other info. You may have just the title in the list on small screens, or so. Or a tiny thumbnail and title/subtitle or whatever.

It depends less on general layout than it depends on your data and the use case. Find out what is absolutely necessary, what is just convenient to have, and what just looks nice, then decide what they have to see. Photo viewer? Remove everything but the actual thumbnail. Book list? Who cares about the cover (OK, maybe cover helps quick search, and it contains the title, so maybe use that instead) and summary, most of the time I'm looking for the newest unread book, so show title and read/unread state. Etc.

All that said, Mobile 1 has a few issues:

1. It barely shows 2 items.

2. At least in your mock-up, the distance between the text and its image is larger than that between the text and the next image.

3. Information alternates. If the thumbnail is really the most important part (as its size in your design seems to indicate), your eyes always have to jump over text when you're just scanning the thumbnails to find the right one. Not a biggie, but in Mobile 2 you can just scan down.

I'd say if Mobile 1 really reflects the importance of your thumbnails, your desktop design is wrong, because it should be an image grid, not a list with images and text.