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.

enter image description here

2 Answers 2


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.

  • I am currently mocking them up to try and get a feel. I am leaning towards the 'mobile two' list view, but I do not want to reduce text size etc too much because, as you say, operating and viewing it comfortably is essential.
    – shorn
    Commented Feb 8, 2014 at 20:30

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.

  • Well I guess the thumbnail is fairly important. The listing are the details of different locations. Each one has a photo (the thumbnail of the location) together with the name of the location, where the location is (UK Counties) and then the first couple of lines of the description. I currently run with the 'mobile one' view, but I am not entirely keen on the amount of scrolling one has to do to navigate a list of (currently) 12 items.
    – shorn
    Commented Feb 8, 2014 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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