Add Balan and Pollard site designs to Gutenboarding

[andrewserong]

Apply diff D55054-code before testing creating a site so that you have access to the annotations and the template/demo preview for these two designs.

This PR adds in the new Balan and Pollard site designs (#48381)

Changes proposed in this Pull Request

• Add balan and pollard new site designs

Note: the screenshots of these short designs don't work very well with the layout for picking a design in Gutenboarding, so another solution for the screenshots / layout for including these sorts of designs might be required. E.g. here's how they currently look:

Balan	Pollard

Testing instructions

• Apply D55054-code and sandbox the public-api
• Go to /new and at the design step you should see the new Balan and Pollard site designs
• You should be able to create a new site with each of these designs, and the newly created site should look like the designs

Fixes #48381

[matticbot]

Test live: https://calypso.live/?branch=add/balan-and-pollard-site-designs-to-gutenboarding

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~73 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       +470 B  (+0.0%)      +73 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ramonjd]

@p-jackson I added you as the assignee since you were on D55054-code

This looks great to me and I think it's shippable once D55054-code is deployed.

Tested the demos as well, e.g.,
https://public-api.wordpress.com/rest/v1/template/demo/mayland/balan/?language=en&site_title=wefgq543y5y8986uyrhtdgsf&font_headings=Rubik&font_base=Roboto

As @andrewserong mentioned, the border looks a teensy bit strange:

Wondering if we could remove the border, maybe show 4 cols to tighten it up? Not sure!

@ianstewart Would you rather wait until it looks prettier? Or could we go ahead and add these designs to onboarding?

cc @simison in case we're adding any noise to running A/B tests for onboarding..

[simison]

Would you rather wait until it looks prettier? Or could we go ahead and add these designs to onboarding?

I think I'd prefer wait it looks better — this is an important first impression moment. How would it look if screenshots were landscape? Or do we need to support different height screenshots? Can anything (height wise) be adjusted in those templates? cc @ollierozdarz

[ollierozdarz]

I think I'd prefer wait it looks better — this is an important first impression moment.

Agree, @simison. This is one of the more important moments at the start of the journey and if it appears like our templates are breaking (even though they aren't) it could cause some distrust.

[lsl]

Do these designs need to be displayed in a grid? It might be better to show 4 vertical columns of varying height designs. (add screenshot height variable to the design config.)

[ollierozdarz]

Do these designs need to be displayed in a grid? It might be better to show 4 vertical columns of varying height designs. (add screenshot height variable to the design config.)

That's a good suggestion, @lsl. My gut feel is that this would still lend better to a structured grid over a masonry grid. Masonry grids can quickly feel messy and they're usually harder to digest, and this is one of those moments where we can easily lose a user.

[lsl]

Fair enough, might need to improve the themes for longer screens anyway looking at the tablet view:

This is how they look with mshots enabled:

[lsl]

Masonry grids can quickly feel messy and they're usually harder to digest, and this is one of those moments where we can easily lose a user.

Just saw this: pbAok1-1QJ-p2, I can see what you mean, I wonder if thicker borders or more whitespace would be enough but I did have trouble figuring out where I was supposed to move my eyes.

[ollierozdarz]

That could work, but might feel like a band-aid solution to the bigger issue? I'd be keen to see what landscape looks like (@simison's suggestion) for all of these designs, although I'm guessing it's not an easy comparison to spin up?

[lsl]

Landscape:

Portrait:

Masonry (picked a few at random, used a mix of heights):

[simison]

Nice, thanks for the screenshots @lsl ! What do you folks think if we go with landscape, but consider making the screenshots bigger, like 3 or 2 columns?

FYI @joanrho

[joanrho]

Thanks for the ping, @simison!

The landscape direction definitely feels more structured than the masonry grid, as it's easier to scan across and down the page within the clearly defined grid of thumbs. The only limitation that comes to mind is that less of the design is visible since we currently don't offer previews of the full page design.

If we can include a "Preview" option for users to view the full page design before making a selection, I think that would be the best option. We've explored this idea before in past mocks—something like an overlay on hover with Preview/Select buttons where Preview calls up a modal displaying a larger, scrollable full-page design with device preview options and a Select button to continue or Back/close to return to the grid of options.

On my end, Ganon is also working on the New Page Layout Modal (see pbAok1-1QJ), so it shouldn't be too difficult to adjust that design from the masonry layout to the landscape direction if we choose to go that route and align both pages.

[lsl]

If we can include a "Preview" option for users to view the full page design before making a selection

@deBhal had something in the works for a scrolling gif on mouseover that could work for this.

Squarish(90% h) preview might be enough here too:

Or Squarish(80% h) / 3 columns: (we currently use this for smaller screens, 4 is only shown on "gigantic" screens)

(new designs might need some extra help to look right in this odd browser shape)

[ollierozdarz]

Nice sentiment, @joanrho! Completely agree, Landscape ratio with a preview modal would be our dream state here (show more designs at once, make the look more like a cover as opposed to every detail, give a big preview for folks who want to see more details). This is basically my initial theory of how the Theme showcase can/should look.

In the meantime, keeping in mind this task might be more time sensitive, what are your thoughts on running with Landscape cards without a preview, @simison? This could be an interesting side test to see if Landscape ratio influences completion of the onboarding flow more or less?

[lsl]

Landscape change happening in #49170 - added a hacky :hover effect that sort of works. It has some side effects and a bunch of tweaking is needed. Probably also need something extra to support Balan/Pollard as well.

Not sure if this is what we want but figured it would be a good way to get a feel for how something like this might look/work.

[ollierozdarz]

This is really great work, @lsl. I'd be inclined to up the hover speed (maybe just double it), but this is lots of value (for desktop anyway).

[lsl]

Rebased to include landscape/#49170 changes, will circle back and disable the hover scroll for these two designs only to avoid this:

[simison]

@ianstewart @ollierozdarz thoughts on if to release this as-is or if to disable the animation for these designs?

[ollierozdarz]

Jumping in before @ianstewart here 🙂 — but I'd personally disable it for these designs so that it indicates that they're more of a fixed size.

[lsl]

Static designs can be flagged in the design config/json file and they'll get a different css rule.

[p-jackson]

LGTM

[lsl]

Blocked while a couple of theme issues are sorted out: #48381 (comment)

[simison]

Theme fixes are now deployed to .com, and colors work:

[simison]

Tests well, tried creating both sites and testing preview as well editor.

[simison]

I can roll this out since I'm already looking at it and it's been also tested by the team. Hope you don't mind! :-)