Wp-calypso: Combined Cards: Try Indenting Imageless Posts

[fraying]

Several people have reported that Combined Cards that look like this are ungood.

I'm not sure I agree. Still, I'd like to try indenting posts when there's a mix of imageless and imageful posts. Like so:

However! If _all_ of the posts in the Combined Card are imageless, they should be aligned left and not indented like they are currently.

Does this make sense? Is this possible?

[raoulwegat]

Hmm.

Aesthetically, I can see the problem users have had with imageless posts left aligned like the example. It's jarring. But I also think indenting them isn't much better – it looks like there's something missing. A broken image?

And on small screens, where the space for headline & excerpt is already at a premium, I almost feel cheated that the blank white space isn't being used to give me more of the already clamped headline and excerpt.

TBH I think we could safely loose all combined card images on mobile.

Which makes me wonder whether they're really that beneficial on desktop – primarily because they set the card height, and so are limiting the headline and excerpt to only one (clamped) line each.

[bluefuton]

I think the post image can communicate more than the title and excerpt (it's usually what draws me to click on a combined card post), so I'd be in favour of keeping it, certainly at higher screen widths.

I also find the posts easier to scan with a consistent indent. Perhaps we can have a placeholder shown in the left column when the image is missing?

If all of the posts in the Combined Card are imageless, they should be aligned left and not indented like they are currently.

Yep, that's possible. One caveat: if we had a combined card with no images and then a post with an image was added to it, the titles and excerpts for the whole card would jump right, which might feel a bit odd. We can try that out and see how it feels though!

[fraying]

I agree with everything you both said, @raoulwegat and @bluefuton. Both solutions are terrible in different ways. So it's up to us to pick the least terrible thing.

One tweak on the idea I had overnight:

For the smallest breakpoint, do what we're doing now (NOT indenting imageless posts). That way we make better use of the space.

For all other breakpoints, indent imageless posts, but only if they're in a card with a post that has an image.

In any breakpoint, if all the posts in a card are imageless, align them all left with no indentation.

I know this is more complicated to describe, but I think it would make sense in use. Thoughts? Doable?

[fraying]

One other idea: At the smallest breakpoint, we could change the images to be square (65x65). It would give 35px back to the text column. Not a lot, I know, but it might help mobile width to feel less cramped.

Thoughts, @raoulwegat ?

[raoulwegat]

I think the post image can communicate more than the title and excerpt (it's usually what draws me to click on a combined card post), so I'd be in favour of keeping it, certainly at higher screen widths.

Agreed, the largest element is what you first see and what draws you in, and images are excellent at that. But the power of the image is drastically reduced when another element – the headline – becomes larger than the image – which is what happens on small screens.

One other idea: At the smallest breakpoint, we could change the images to be square (65x65). It would give 35px back to the text column. Not a lot, I know, but it might help mobile width to feel less cramped.

I like the idea of giving space back to the text! But at 65px square I don't know how much value there is in having an image at all, especially when it's still taking space away from a single line clamped headline, which is now the eyes main focus.

Compare:

There's massive value in the image the top example – it naturally where the eye is drawn even when scrolling quickly, which can happen on mobile. In the lower example the headline is now the locus.

[blowery]

Mostly a drive by comment here, but I played with CCs a fair bit today on my phone while waiting for the kids at school. Honestly, I didn't really like them on mobile. The pic is too small to be useful and the headline gets cropped, so it's also not that useful.

Maybe we just don't have 'em at small breaks?

[fraying]

Appreciate the comment, @blowery. That is an option.

But before we do that, I'd really like to try them with the changes suggested above: square images and not indenting imageless posts at the smallest breakpoint. Also, in a separate issue, I requested a 2px font size reduction to the titles. I think we should all test it with those changes and see how it feels. The combination of all those small tweaks could make a big difference.

You game to try, @raoulwegat ?

[raoulwegat]

Yeah let's give it a try. Did you want this as a quick comp in Sketch first? Because if we do it as code, there's not just my CSS, but also some JSX logic/changes that someone else will have to do.

[fraying]

I think it's gotta be in code to really see how it feels with real content.

[bluefuton]

For all other breakpoints, indent imageless posts, but only if they're in a card with a post that has an image.

@raoulwegat ^ I can add the logic to deal with this.