Foundation.mozilla.org: Fix layout on featured profiles

[xmatthewx]

Currently, if a featured profile has a short quote and long list under more details, the layout of the quote looks broken ... card preserve the height of the hidden details.

[alanmoo]

This is expected behavior, as the flipping animation necessitates the "sides" be equal height. The quote is positioned dynamically. @gvn and I feel like this requires a design fix (as well as specific card examples at screen sizes of where it's an issue)

[xmatthewx]

We don't need the flip. We can fade. We went with full width cards so that a change in height wouldnt awkwardly bump layout. Details will almost always be longer than quote, making default state awkward.

[gvn]

There's still going to be a similar issue with a fade, because the container will have a "jump" when it resizes itself for varying content heights. Making the box size based on the tallest content eliminates that "jump" and makes the transition feel less janky.

[xmatthewx]

We need a different solution. We can't have awkward white space up and down the page by default. A jump is preferable to that. A transition to smoothly increase the height shouldn't be impossible. If you want design to prototype the transition, we can do that.

[alanmoo]

Are you just talking about smaller screens? Things look good on desktop to me.

[taisdesouzalessa]

I am not sure I understood this issue 100% so please correct me if I am wrong.

I think that we are talking about the mobile preview on staging, correct?

We run into the issue of having same height from the back and front of the "cards" while designing and the way we solved that was to have the 1 column layout for bigger cards and a bigger typography for quotes on mobile (I got the example I found the most extreme here, in which the quote is very short).

If we use this model, we always align the quote vertically to the center, the spacing doesn't look weird and the front and back of the card can have the same height.

Do you think the designed solution proposed here works well @xmatthewx? Or you still feel that we should adjust the solution to avoid the spacing even more?

[alanmoo]

Ah, somewhere along the line I missed the mobile design plan/saw an old one. This makes more sense and should clean it up; Let me try this out and see how it looks.

[alanmoo]

@gvn I threw an estimate on this, let me know if you think it's too high/low.

[xmatthewx]

Thanks all. I still think the card height should change to fit the content during transition. It's the right UX unless there's a technical blocker.

I also don't think we should center vertically. Space is better but still odd. On desktop, bottom alignment of quote attribution gets weird because it is pushed down to align with the person logo if they have one. I think we should pick our margins and stick with top alignment.

[alanmoo]

@taisdesouzalessa how are featured cards with partner logos rendered?

[gvn]

Estimate seems about right to me.

[taisdesouzalessa]

@alanmoo we didn't mockup the option with featured cards with logos, sorry for that. Here is how it should look like (the same as the small cards so there is a standard):

For the animation that pushes the content down in case the back of the card is bigger than the quote we could try something like that, do you think is technically feasible?

[xmatthewx]

Do we have a partner logo on a featured card for mobile? Let's mockup it up since the image layout changes. No need to animate it 😸

[alanmoo]

+1 to that @xmatthewx - it looks a bit odd by default.

[gvn]

Bumping to 13 based on further conversation. (13 is conservative)

[taisdesouzalessa]

We could keep the logo left aligned with the picture, keeping the same relationship they have in desktop. Those logos were light grey and smaller in the mockup. It is important they stay light grey because they are not clickable and shouldn't stand out since the desired user action in this page is connection via Twitter and Linkedin. Is there any way I could change those logos to the desired color and upload again in the CMS? I can upload them, just need some guidance on how to do so :).

[taisdesouzalessa]

Hey @xmatthewx after talking to @alanmoo yesterday and getting his feedback, I came up with a better solution for the issue above. He pointed out that the solution proposed may be a little bit weird on mobile and I agree with it.

I think a better solution would be something like that:

Logo only on the description side of the card since it makes more sense, contextually.

Then I was thinking about doing the same for the desktop featured cards since it makes sense in terms of context:

I think this is an easier way for the user to absorb the information. The little cards can have the logo in the same position as staging because the role and logo are displayed at the same time (in context).

Wondering about your thoughts on it.

[xmatthewx]

Discussed with @taisdesouzalessa. There's a bit of design work to do to resolve photo, logo, front/back.

[taisdesouzalessa]

@alanmoo: after brainstoming with Matthew, here are the recommendations we have for this page.
Please let me know if you see any technical challenge with implementation and we can chat.

To give you some context, it is important we keep the logo visible (not hiding after a quote) because that adds more credibility to the page at a glance (people recognize logos easily).

DESKTOP (the button in Hera's profile is clickable- you can see front and back of the card)

MOBILE (David's profile is clickable)

The information displayed there are placeholders only - the goal is to showcase placement. The most accurate text info is on staging.

We did 4 main changes:

1. Added the logos right after the person's current position in all the cards.
2. Added a grey divider line before the social network icons.
   

1. Added the logo to the quote side
2. Changed the description on the quote side: from the relationship with Mozilla to the role the person has (grey text). IMPORTANT: we will only gather the data that comes before the ";" if the person has more than one role (e.g: Education Innovation Specialist, UNICEF; Founder + Global Project Lead, Nairobi Play Project - we are collecting for the quote only "Education Innovation Specialist, UNICEF").
   

Last thing: Since we are doing those changes I was wondering if we could introduce the slanting lines background to the top (not the slanting blue background - we can keep it as a rectangle). It is not a priority at all but I thought about checking if it a fast thing to implement.