New Onboarding: show design previews in landscape #49170

lsl · 2021-01-22T07:46:09Z

Changes proposed in this Pull Request

Adds & enables a landscape design preview option in new onboarding
Enables mshots design previews in all environments
includes tweak for backing off mshots refreshes the longer it takes
includes a scroll effect on mousehover for landscape previews

Testing instructions

Check signup displays mshot images with landscape preview http://calypso.localhost:3000/new/design
Check localized signup displays translated design preview content http://calypso.localhost:3000/new/design/ja
Check anchor.fm signup flow displays mshot images http://calypso.localhost:3000/new/?anchor_podcast=22b6608

Landscape views:

Hover effect:

Relates #49097

matticbot · 2021-01-22T07:46:10Z

Test live: https://calypso.live/?branch=update/landscape-previews

matticbot · 2021-01-22T07:46:47Z

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

Webpack Runtime (~41 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest        +95 B  (+0.3%)      +41 B  (+0.3%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name                   parsed_size           gzip_size
entry-gutenboarding         +422 B  (+0.0%)     +111 B  (+0.0%)
entry-main                  +398 B  (+0.0%)      +79 B  (+0.0%)
entry-login                 +105 B  (+0.0%)      +25 B  (+0.0%)
entry-domains-landing       +105 B  (+0.0%)      +25 B  (+0.0%)

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

Sections (~3827 bytes removed 📉 [gzipped])

name                parsed_size           gzip_size
jetpack-connect          +255 B  (+0.0%)     +275 B  (+0.1%)
google-my-business       +183 B  (+0.1%)    +1027 B  (+1.2%)
marketing                -126 B  (-0.0%)     +614 B  (+0.4%)
plans                    +103 B  (+0.0%)      +17 B  (+0.0%)
devdocs                   -31 B  (-0.0%)       -4 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~44 bytes removed 📉 [gzipped])

name                                            parsed_size           gzip_size
async-load-design-wordpress-components-gallery        -31 B  (-0.0%)      -44 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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 · 2021-01-25T04:12:11Z

@lsl I love the hover effect. ❤️

On https://hash-445ac0a51ce6c5de81139649cfdfb324bc29023a.calypso.live/new/design?flags=gutenboarding/landscape-preview,gutenboarding/mshot-preview the thumbnails are loading fairly quickly. Emulating slow 3g is what you'd expect for any image-based page IMHO.

It also takes care of the vertical weirdness (the giant hand) we always saw in Rockfield.

What do you reckon @ollierozdarz @simison ? Would this be acceptable to flick on for the experiment?

ollierozdarz · 2021-01-25T04:46:29Z

@ramonjd I'm happy with it! Let's see what @simison thinks and hopefully we can 🛳 it.

lsl · 2021-01-25T06:33:21Z

Tidied this commit up a bit:

?flags=gutenboarding/landscape-previews will be enabled in production with this deploy (this includes the scroll over effect on both mshots and non mshots previews)
?flags=gutenboarding/mshot-previews will be enabled in development only with this deploy (I want to get systems signoff before we roll this out)

Landscape previews work with both image types but the speed will be slightly different because of the change in image size between mshot/non-mshot.

@ollierozdarz reduced transition time to 1s, feels a lot snappier now, I couldn't get it any faster than that without it stuttering on my machine.

Mshots: https://hash-445ac0a51ce6c5de81139649cfdfb324bc29023a.calypso.live/new/design?flags=gutenboarding/landscape-preview,gutenboarding/mshot-preview

vs no mshots: https://hash-445ac0a51ce6c5de81139649cfdfb324bc29023a.calypso.live/new/design?flags=gutenboarding/landscape-preview

simison

Looks great, nice work here @lsl and @ollierozdarz !

Feel free to enable mshots in production if you feel it works well. We'll then get a bit of stress-test before it goes to more traffic with wider testing, and get a bit of internal testing before we roll non-English test out again.

(Didn't code review, leaving that to others)

simison · 2021-01-26T11:16:55Z

One follow-up ask after the merge — let's please ensure screenshots stay fairly big on all screen-sizes. Now you can see how small they become between number of columns:

Screen.Recording.2021-01-26.at.13.05.57.480p.mov

Here are two 3 column versions just before it jumps to 2 columns and previews become bigger again:

This is similar to how it's in production so not a blocker for merge. Feels more prominent on landscape versions though?

ollierozdarz · 2021-01-27T00:08:26Z

One follow-up ask after the merge — let's please ensure screenshots stay fairly big on all screen-sizes. Now you can see how small they become between number of columns:

Agree 100%, @simison! I think bigger cards, less internal margin, would be the ideal. Even breaking down to the 2-col view earlier as opposed to the 3-col view shrinking tiny then snapping to 2-col.

- includes tweak for backing off mshots refreshes the longer it takes - includes wip hover preview for landscape (for demo only, needs work)

lsl · 2021-01-27T04:57:32Z

Added image sizing to #49097, had a go at this today but couldn't get it to where I was happy with it. Will circle back with more time.

andrewserong · 2021-01-27T05:15:41Z

client/landing/gutenboarding/components/mshots-image/index.tsx

+					// Test mshots h value matches the desired image
+					// The default image (https://s0.wp.com/mshots/v1/default) is around 400x300 px h
+					// but sometimes slightly off (e.g. h: 299.99)
+					if ( e.currentTarget.naturalHeight !== options.h ) {


I didn't catch this in the last PR, but clever way of detecting the loading image!

andrewserong

This tests nicely for me across Safari, Edge, Chrome and FF on Mac Desktop, and tested on Safari and Chrome on an iPhone 8. Code change looks good to me — tiniest of tiny nits, I think we're sometimes using mshot singular vs mshots plural, which could trip someone up eventually while trying to change something, but not at all a priority to change in this PR.

Thanks for seeing this through! It's looking really nice.

andrewserong · 2021-01-27T05:18:38Z

client/landing/gutenboarding/components/mshots-image/index.tsx

+						// Only refresh 10 times
+						if ( count < MAXTRIES ) {
+							// Triggers a target.src change and image refresh @ 500ms, 1000ms, 1500ms...
+							setTimeout( () => setCount( count + 1 ), count * 500 );


I like that this gradually spaces out the polling gap, a nice easing off.

Turns off mshot design previews enabled in #49170, this reverts previews back to calypso hosted screenshots.

lsl added the [Goal] New Onboarding previously called Gutenboarding label Jan 22, 2021

lsl requested review from deBhal and ollierozdarz January 22, 2021 07:46

lsl self-assigned this Jan 22, 2021

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 22, 2021

lsl mentioned this pull request Jan 22, 2021

Add Balan and Pollard site designs to Gutenboarding #48727

Merged

lsl mentioned this pull request Jan 25, 2021

Design screenshots followup #49097

Closed

11 tasks

simison approved these changes Jan 26, 2021

View reviewed changes

lsl added 8 commits January 27, 2021 12:15

Add landscape view option to mshot design previews

2861b45

- includes tweak for backing off mshots refreshes the longer it takes - includes wip hover preview for landscape (for demo only, needs work)

Tidy up, speed up image scroll, add scrollable flag

1e632ba

Hide default images while loading new images after locale change

52c1c9f

Split opacity and visibility so default image isn't ever shown

5a0d01a

Clean up classes, flags, enable on development.json config

e7de0ab

Enable landscape mode in prod, rename flag to split from mshots

4e9fbdf

Enable mshots, landscape designs everywhere

6004ea6

Bump screenshot size up slightly for less blur

3e72e5f

lsl force-pushed the update/landscape-previews branch from 445ac0a to 3e72e5f Compare January 27, 2021 03:13

andrewserong reviewed Jan 27, 2021

View reviewed changes

andrewserong approved these changes Jan 27, 2021

View reviewed changes

lsl merged commit 47280f1 into trunk Jan 27, 2021

lsl deleted the update/landscape-previews branch January 27, 2021 05:50

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 27, 2021

lsl added a commit that referenced this pull request Jan 27, 2021

New Onboarding: Disable mshot design previews

7ede3e0

Turns off mshot design previews enabled in #49170, this reverts previews back to calypso hosted screenshots.

lsl mentioned this pull request Jan 27, 2021

New Onboarding: Disable mshot design previews #49330

Closed

simison mentioned this pull request Jan 27, 2021

New Onboarding: add translated design thumbnails #48867

Closed

lsl mentioned this pull request Jan 28, 2021

New Onboarding: Improve design preview layout #49382

Closed

simison mentioned this pull request Mar 1, 2021

Anchor Gutenboarding: Add Hannah starter design #50505

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Onboarding: show design previews in landscape #49170

New Onboarding: show design previews in landscape #49170

lsl commented Jan 22, 2021 •

edited

Loading

matticbot commented Jan 22, 2021

matticbot commented Jan 22, 2021 •

edited

Loading

ramonjd commented Jan 25, 2021 •

edited by lsl

Loading

ollierozdarz commented Jan 25, 2021

lsl commented Jan 25, 2021 •

edited

Loading

simison left a comment •

edited

Loading

simison commented Jan 26, 2021 •

edited

Loading

ollierozdarz commented Jan 27, 2021

lsl commented Jan 27, 2021

andrewserong Jan 27, 2021

andrewserong left a comment

andrewserong Jan 27, 2021

New Onboarding: show design previews in landscape #49170

New Onboarding: show design previews in landscape #49170

Conversation

lsl commented Jan 22, 2021 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Jan 22, 2021

matticbot commented Jan 22, 2021 • edited Loading

ramonjd commented Jan 25, 2021 • edited by lsl Loading

ollierozdarz commented Jan 25, 2021

lsl commented Jan 25, 2021 • edited Loading

simison left a comment • edited Loading

Choose a reason for hiding this comment

simison commented Jan 26, 2021 • edited Loading

ollierozdarz commented Jan 27, 2021

lsl commented Jan 27, 2021

andrewserong Jan 27, 2021

Choose a reason for hiding this comment

andrewserong left a comment

Choose a reason for hiding this comment

andrewserong Jan 27, 2021

Choose a reason for hiding this comment

lsl commented Jan 22, 2021 •

edited

Loading

matticbot commented Jan 22, 2021 •

edited

Loading

ramonjd commented Jan 25, 2021 •

edited by lsl

Loading

lsl commented Jan 25, 2021 •

edited

Loading

simison left a comment •

edited

Loading

simison commented Jan 26, 2021 •

edited

Loading