Mosaic Blue/Green tile

[skleinfeldt]

To transition jazkarta.com to Mosaic, we need a tile that functions like the custom Cover "Basic Tile" we created. Mostly this means making the "Text mouseover basic tile" style available for Mosaic. But we also need to override the description on the Reference tile with custom text.

[skleinfeldt]

This is about replacing the tile on our current design that is blue and on mouseover goes to green and shows different text, and links to a content item. I don't know whether it needs to be derived from the reference tile, or something else.

[skleinfeldt]

This is for use on the "We Love Science" etc. rows on the new homepage: https://staging.jazkarta.com/mosaic-homepage

[alecpm]

Would the tesserae "Content Summary Tile" we use on the DOaks Homepage (the Online Resources section) work for this?

[alecpm]

I think the Background Image Tile (which we use for the Research section on the DOaks homepage) will also probably be useful on the site.

[alecpm]

You should be seeing the tesserae Format and Tile types on staging now so you can play around with them and we can determine if they meet some needs and/or need any custom styling.

[skleinfeldt]

Yes I think the Background Image Tile (Research section) might be useful on the site, although I wasn't thinking of using an image in this case, just colors like currently. Similar comment for the Content Summary Tile.

I do see Content Summary and Background Image on the Insert menu now, so yay! Tesserae install seems to have worked. I will spend some time playing with them.

[skleinfeldt]

I tried mocking this up with the Background Image tile. I chose Preview as the size, thinking it would match the Preview size images in the Rich Text tiles in the row - but it did not, it is a different aspect ratio, taller.

If it would be a 15 minute fix to make this actually show as Preview size, please do so. Then we will have a more realistic mockup.

It is not worth spending more time on though, because ultimately I would like a new custom tile that behaves like the collective.cover tile we currently have.

The tesserae Content Summary tile won't work for this - the tile I want has nothing to do with any content item.

[alecpm]

It's actually ignoring the choice of image size completely, because you're not setting an image. If an image were set it would use that image and match the size of the image crop specified. I think in this case we just need some special styling for those tiles when used on the jazkarta home page to automatically constrain them to a certain aspect ratio, and also provide some hover behavior. Perhaps it makes sense to add another tile or row style to provide these constraints/hover behavior so they can be applied more universally on mosaic pages throughout the site?

[alecpm]

In terms of how we implement: adding a row or tile style that lets the background image tile behave like the old cover tile will be about 30 minutes of work (the hardest part is probably coming up with a sensible name for the style). Making a new mosaic tile that replicates the configuration and functionality of the cover tile will probably be more like 2 - 4 hours.

[skleinfeldt]

I'd be happy to have it be a new tile style, but I don't think I'm completely following you. I think you mean that it would be a new style on the Mosaic Format menu. My understanding is that Mosaic tile and row format options apply to any tile or row, so this wouldn't just let a background image tile behave this way, right? I could apply it to any type of tile (like the rich text examples I've made), and on mouseover it would turn some color, right? But how would I specify the text that would be displayed on top of the color?

Given that it sounds like new Mosaic style options for the format menu are easier to create than new tiles, I'm going to open a new ticket requesting a few of those for use as background colors under rows (like some of the titles, the team images, testimonials).

As for the question of background image tile size, would the easiest solution be for me to create a solid blue image and a solid green image, with appropriate crops, and use those with the Background Image tile?

[alecpm]

I had forgotten about the text change, if that's a feature that we really want to keep then we probably do need a new tile for it. I was thinking of a tile or row style to constrain the size of a specific tiles or entire rows to match some specific height, and another for a hover background change. That wouldn't allow for text changes though. The text changes on hover (especially for non-linked content) do seem to me like mystery meat UX that's probably best avoided.

[skleinfeldt]

I enjoyed the text changes on hover as a playful/surprise aspect of the site, but I see your point. It certainly isn't the most critical thing right now.

If you think a row or tile style to constrain height is a better solution than me using green and blue images, let me know and I'll add it to #159.

[alecpm]

New tile and row styles are in place. I've applied them on the homepage.

[skleinfeldt]

Awesome! And it looks the same on Safari and Chrome as on FF! And you fixed that irregularity where the 2 tiles didn't line up under "Featured Projects", someday I want to find out how you did that. I have no idea how it got that way. Thank you!

Would it be possible to incorporate the same padding/margins/gutters (not sure the word) so the layout looks more like the current homepage? (There is whitespace around the tiles and they don't touch.) Would that be a part of the Constrain Aspect ratio format, or something else, separate ticket?

[alecpm]

The alignment issue on "Featured Projects" was that the image on the second tile was wrapped in an H2 for some reason, giving it an unintentional top margin.

I explicitly used the new "No Padding" row style to remove the padding, because it was only between columns and not rows. I turned that off and added the "Padding Bottom" style to each tile. Might be nice to make a row padding style that adds padding matching the left/right padding between the rows.

[skleinfeldt]

That would be great (row padding style to match left/right padding)

[skleinfeldt]

Shall I add that to #159?

[skleinfeldt]

@alecpm could you please change the "Hover Background Color" cell format to use the green (#80c34f) instead of the blue?

Let's hold off on doing anything further about the cell padding until I get some design advice.

[skleinfeldt]

@alecpm never mind that last request. After thinking more about this and playing with the existing hover behavior on mobile (lame), I've decided that I agree with you. I don't want to use change-on-hover behavior on the site anymore, so if anything you can just remove the "Hover Background Color" cell format.

I'll use Content Summary tiles with the new styling (#162) for the Team Member images at the bottom of the homepage and team page, so the names will show w/o hovering. And for the "We Love..." grid on the homepage I've decided I need a new kind of multi-item carousel, to be discussed next week.