Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iteration: 6.6 Microsite #62631

Open
2 of 3 tasks
annezazu opened this issue Jun 17, 2024 · 54 comments
Open
2 of 3 tasks

Iteration: 6.6 Microsite #62631

annezazu opened this issue Jun 17, 2024 · 54 comments
Labels
[Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release.

Comments

@annezazu
Copy link
Contributor

annezazu commented Jun 17, 2024

What is this?

This tracking issue will cover the work needed for the 6.6 release microsite. The microsite is a landing page on WordPress.org that showcases all the highlighted features and enhancements for a particular release. Aesthetically, the design for this microsite has followed general WordPress branding instead of the unique flavor of any particular release.

Examples of previous highlight grids for reference:

Timing

  • Copy draft: ASAP
  • Initial design: June 25 2024 in line with RC1
  • Final design: July 9th

The main date we need to keep in mind is RC1 as we likely want to align with what's being shared on the About page and it would be helpful to have some shared approach there.

Content

The microsite is distinct on its own meant for a broader outside of WordPress use case yet also should share structure and highlights with the About page. Because of this, we need to align with the About page effort and ensure some cross pollination there.

cc @richtabor @jasmussen design wise and @marybaum marketing wise. I plan to help here when it comes to looking across the two resources and pulling in highlights from the source of truth to ensure the details are accurate and compelling.

@annezazu annezazu added the [Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release. label Jun 17, 2024
@jasmussen
Copy link
Contributor

Nice! Based on past microsite templates, and extracting from the 6.6 highlight grid of features I separately contributed to, I gathered a very rough draft template for a microsite in this Figma file. The text there, as is quickly evident, is placeholder text, but there's a rhythm to the order of features that matches that of the highligt grid, and I find this template an excellent measuring stick for the amount of text to add for each section.

@annezazu
Copy link
Contributor Author

!!! This is super helpful (so speedy). Thank you. I'll dive in there to fill in some of the placeholder text for features we likely want to highlight.

@annezazu
Copy link
Contributor Author

Pulled out the fill in copy in figma for now and am working on sorting out the features in this Google doc to make it easier to collaborate (access to figma can be annoying).

@ryelle
Copy link
Contributor

ryelle commented Jun 17, 2024

@annezazu Do you mind if we move this issue over to wporg-main-2022, since that's where the microsite will live? It will make it easier for the relevant meta folks to be aware and once the content is updated, we can reference this issue.

@annezazu
Copy link
Contributor Author

Hmm. I do a bit as that's more of a hidden repo compared to the movement and momentum within this one. I don't want this work to be harder to find. For now, I'll create a separate issue there and see what others think: WordPress/wporg-main-2022#454

@marybaum
Copy link
Member

This looks great! I'll see if I can download a copy of the layout and write into that

@annezazu
Copy link
Contributor Author

Awesome! @marybaum The easiest thing to do at this point is look at the microsite outline copy I'm actively working on here. I likely won't have all the descriptions or features set just yet but, for example, here's what we could reuse in the About page (undoing this after so Joen has design control here):

Sketch

Note: the icons are all wrong but I can't quite figure out how to replace them

@marybaum
Copy link
Member

I actually now have all these sections set up in Photoshop — might move them to XD — and will pay attention to some other things before my 5:30 Mountain Time clinic. When we get back I'll work from your outline copy and let you see it and comment until after the release party—then make your changes and let the squad take another look — and maybe Kelly can commit the strings Thursday!

@annezazu
Copy link
Contributor Author

Alrighty. The copy is nearly there and aligns with what we have in figma. I need to fill in the Accessibility section and want to align with leadership tomorrow to make sure the right features are listed as main highlights. I'll loop back here and in 6-6-leads slack when things are in a solid spot to reuse for About.

@marybaum
Copy link
Member

marybaum commented Jun 20, 2024 via email

@jasmussen
Copy link
Contributor

Hello! Mary I've given you edit access to the Figma, hopefully you can edit the file now. Edit access is a full paid seat for the WordPress org, so access is downgraded to view unless actively used. View access is free, it's easy to upgrade to edit again.

Based on the outline you've all been collaborating with, here's the most recent version of the microsite:

Microsite i4

As an experiment, I went ahead and re-used the About Page template from 6.5 to see how the same content would work in it, that looks like this:

About Page i4

As a next step I'm going to look at the featurette videos, and see what static fallbacks we can make for the about page. I'm still assuming that we can't embed videos in the bundled page.

@annezazu
Copy link
Contributor Author

Thank you so much @jasmussen! At this point, @marybaum can we stay collaborating in the 6.6 microsite outline doc too? This will help more people have access to the doc and, when it's finalized, we can port it over for the About page. The only edits I'm making in the microsite figma are very minor text changes for what's solidified. Otherwise, process wise, it's best to stay in the google doc and push changes to figma. I worry if we end up making changes in both spots, it'll get really confusing really quickly :D

@ryelle
Copy link
Contributor

ryelle commented Jun 20, 2024

As a next step I'm going to look at the featurette videos, and see what static fallbacks we can make for the about page. I'm still assuming that we can't embed videos in the bundled page.

We can & have, they just can't autoplay (the same is true for the release page).

As an experiment, I went ahead and re-used the About Page template from 6.5 to see how the same content would work in it, that looks like this:

I was under the impression that the About page was going to have reduced content, and link off to the release page? Maybe this is reduced, but I was expecting even less than that. Considering the desire to have the release page be the focus, keeping About concise and linking out makes sense to me.

(edit: As I understand, the focus is on the microsite copy right now, and the About content will come later, so there is no About content to work with yet)

Also, I've added a comment to the main site issue explaining some more details about the process once we have content. I've also updated the template for the page (which is currently a draft) to ensure the editor preview looks correct. WordPress/wporg-main-2022#454 (comment)

@marybaum
Copy link
Member

marybaum commented Jun 20, 2024 via email

@annezazu
Copy link
Contributor Author

Okay! I am officially done with the microsite copy and ensured all changes exist in the figma file. The biggest change is an updated main description and a reordering of main features, along with a slew of minor text updates that have all been synced across docs.

Of note, due to this recent GitHub issue and without any further gathered insight this morning, I have made the decision to demote the styling multiple sections from a main highlight and to promote quick previews for pages. The reason I chose quick previews for pages is due to the intense momentum behind the broader data views work and to have more coherence across releases, as this will be an area we will continue to highlight.

@jasmussen at this point, please be advised I left you a note in the figma for good measure but want to share here: we need a new image/visual for styling sections (still image) and will need to do a featurette for quick previews for pages (likely can reuse from WCEU work).

From this microsite copy, we can then push aspects to the About page cc @marybaum.

@ryelle
Copy link
Contributor

ryelle commented Jun 20, 2024

Looking at the release page copy, I think for the About page, we could probably do the Highlights, Performance, and Accessibility sections, then have some kind of banner-y thing linking off to the full release page on w.org. I know I'm not a copy person, but I think that would work nicely.

@annezazu
Copy link
Contributor Author

I think that makes a lot of sense to me especially if we want some overlap between the two resources. I've mainly been on the very early side of About page creation for deciding top features then the review side of things for the About page later on so happy to defer to folks more involved throughout.

@jasmussen
Copy link
Contributor

jasmussen commented Jun 21, 2024

we need a new image/visual for styling sections (still image) and will need to do a featurette for quick previews for pages (likely can reuse from WCEU work).

I'm working here.

A sidenote, let's ensure both the microsite (already the case I think) and the About page have the following CSS applied to avoid typographic widows:

text-wrap: balance; /* Fallback for Safari */
text-wrap: pretty;

We may want the "balance" fallback only for headings, not for paragraphs.

We need that applied at least on headings and paragraphs below, so that even on responsive breakpoints, text wraps nicely. In the Figma, I'm manually doing it using linebreaks.

@jasmussen
Copy link
Contributor

An update from today. Microsite and corresponding about page mockups:

Microsite About Page
Microsite i5 About Page i5

Changes:

  • Static fallback images for all features. These will be used as "poster images" for any video featurettes we make.
  • Updates the the highlight grid, and secondary features, both to make the grid more consistent with the new extracted featurettes, and to generally polish. Note the "groups of blocks" and center cells being refined.
  • Overall polish.

An open question remains on the highlight grid cell that says "Custom fields & patterns"—is there a better name for this? Maybe "Patterns & overrides"? The same illustration is used for the primary Overrides highlight.

Figma.

@annezazu
Copy link
Contributor Author

You're a wiz! This is looking great and coming together. Only thing I updated is the accessibility numbers to be 55+ rather than an exact number.

An open question remains on the highlight grid cell that says "Custom fields & patterns"—is there a better name for this? Maybe "Patterns & overrides"? The same illustration is used for the primary Overrides highlight.

I would go with "Patterns & overrides" personally.

@ryelle
Copy link
Contributor

ryelle commented Jun 22, 2024

On the About page, can we get rid of the "And much more" section (and the two icon-items below it), and instead link to the release page? That was how I understood the main request for the changes this cycle, and it seems to have been agreed with whenever I asked about it. Has that changed?

@jasmussen
Copy link
Contributor

On the About page, can we get rid of the "And much more" section (and the two icon-items below it), and instead link to the release page? That was how I understood the main request for the changes this cycle, and it seems to have been agreed with whenever I asked about it. Has that changed?

From my end, I'm mainly putting this together visually. I'm happy to support removing those bits. Here's how that could look, if I'm reading this info right:

About Page i5 minimal

Figma.

Note: In this minimal version, I rephrased the last payoff about 6.6 to be about the feature showcase site, rather than the Learn section.

@jasmussen
Copy link
Contributor

A quick summary update based on the latest. Here's a trio of site, big about page, minimal about page:

Site Big about page Minimal about page
Microsite i5 About Page i5 About Page i5 minimal

A couple of next steps:

  • Please help in wrapping the copy for today, so it can meet the string freeze.
  • Please help decide whether we should go with the full about page, or the suggested minimal one.
  • If we go with the smaller one, please vet the paragraph I wrote to replace the "Learn" boilerplate. Starts with "For a comprehensive overview..."

There's one final open question it's around the imagery and licenses, so I've been looking also at some alternatives that should be easy to swap in.

@ryelle
Copy link
Contributor

ryelle commented Jun 24, 2024

I don't think we should replace the Learn callout. What about using one of the highlight helper classes, and drop a single-column callout above Learn? (see this about page reference for more existing patterns)

Accent color Subtle color
Screenshot 2024-06-24 at 10 04 16 AM Screenshot 2024-06-24 at 10 04 29 AM

@jasmussen
Copy link
Contributor

If you feel we should keep that, we can keep it, and I'll see if I can use one of those callouts or find another, to provide a link off to the microsite. Maybe it's just a button: "Read more" or slightly more verbose? In any case, I would appreciate text for both button and/or descriptive text.

@jasmussen
Copy link
Contributor

How about this?

About Page i5 minimal

The key bit:

Screenshot 2024-06-24 at 16 50 41

Changes:

  • Separator between primary highlights and accessibility/performance has been replaced with a spacer (whitespace)
  • There's a spacer/whitespace below that section too

The CTA to go to the microsite reads as below:

And much more
For a comprehensive overview of all the new features and enhancements in WordPress 6.6, please visit the feature-showcase website.

@ryelle
Copy link
Contributor

ryelle commented Jun 24, 2024

I've added a comment to the About page ticket with the discussion above. I know this release is trying a different approach, but we should keep that ticket up to date as well.

I'll start building the About page with the content from the doc shortly, and hopefully we can have a final decision on the release page CTA soon. My aim is to commit the page later today to avoid delaying RC tomorrow.

@annezazu
Copy link
Contributor Author

annezazu commented Jun 24, 2024 via email

@jasmussen
Copy link
Contributor

I don't particularly love any of these over the original. But hopefully they can help us lock in any text strings:

About Page i5 minimal, alt CTA About Page i5 minimal, alt CTA 2 About Page i5 minimal, alt CTA 3

@annezazu
Copy link
Contributor Author

I dig the second. If we can fit it, can we have the button be "View showcase"?

@jasmussen
Copy link
Contributor

Perhaps this?

About Page i5 minimal

@ryelle
Copy link
Contributor

ryelle commented Jun 24, 2024

I don't know if "View showcase" is a good descriptive link for the release page, but maybe that's because I can only think of this showcase. "Read full overview" or something could be better?

@jasmussen
Copy link
Contributor

jasmussen commented Jun 24, 2024

"Read full overview" gets a bit long, that's the only concern I have with that. If "Full overview" isn't active enough language, we can go with that, but you may want to reduce the font size then, perhaps it works okay:

See Read

I'll keep checking in this evening, but otherwise I'll defer to you, Mary, and Anne on the wording.

@marybaum
Copy link
Member

How about ‘See everything new’? as the CTA button text for the microsite link?

@jasmussen
Copy link
Contributor

Can work like this:

About Page i5 minimal, alt CTA 6

@richtabor
Copy link
Member

@jasmussen

Another alternative, what about including a button for the microsite up top, under the intro?

CleanShot 2024-06-24 at 15 33 53

"Read on WordPress.org" or something?

@annezazu
Copy link
Contributor Author

Love the "See everything new" ✨. Let's roll with that at the bottom of the page like so and call it. I don't want to keep tweaking things further and adding more options to the table too late in the game. @ryelle I changed one other line of text under "Color palettes &
font sets".

The first sentence now reads like so:

Block theme authors can create unlimited individual color or font sets to offer more specific design options within the same theme.

Previously, it used the word "typography" like so:

Block theme authors can create unlimited individual color or typography sets to offer more specific design options within the same theme.

If we can't fit that change in, no worries though.

@ryelle
Copy link
Contributor

ryelle commented Jun 24, 2024

I only just opened the code to start changing, so you're just in time :) Have you updated that in the google doc? that's what I had planned to use as the source of truth, is that right?

@annezazu
Copy link
Contributor Author

Yes! Updated there now too (feared you were pulling from Figma at this stage of things haha). The only thing missing from the google doc is this final section shown above. I'll add that in now too.

@ryelle
Copy link
Contributor

ryelle commented Jun 24, 2024

Okay, I've coded up the page & got some screenshots on the PR: WordPress/wordpress-develop#6892 — I'd appreciate someone else just checking it over to make sure it looks okay, no copy-paste errors, etc.

@annezazu Do you have a list of people who helped with writing the doc for commit props?

@jasmussen Same question for design, though I can props that list when we add the proper images, so no rush.

@annezazu
Copy link
Contributor Author

For design, nearly positive it's @jasmussen @beafialho and @richtabor. For copy, @kristastevens (wporg username), @marybaum, @cbringmann (wporg username) @DanSoschin (wporg username), @richtabor, @youknowriad.

@richtabor
Copy link
Member

The double headings for each feature are kinda making it more difficult to parse (on the about page) as they're set in the same font as all the rest. Any objection to merging it into the paragraph copy for each section (as the first sentences)?

CleanShot 2024-06-24 at 20 22 14

The microsite copy/structure/fonts looks ace.

@ryelle
Copy link
Contributor

ryelle commented Jun 25, 2024

Like this? I haven't updated the About PR but I also haven't committed it yet, so I could still change it. (again, the PR is over here: WordPress/wordpress-develop#6892)

Screen Shot 2024-06-24 at 20 44 43

@annezazu
Copy link
Contributor Author

That looks good to me 🚢

@jasmussen
Copy link
Contributor

Changes sound good to me, and Anne got the props right.

Whether the button is close to the top or at the end, I've no strong opinion, happy to defer.

pento pushed a commit to WordPress/wordpress-develop that referenced this issue Jun 25, 2024
Introducing the new content for the 6.6 About page. This release, the About page will have just the highlights for 6.6, and link off to the release page on WordPress.org for the full overview.

See #61320, WordPress/gutenberg#62631.
Props ryelle, andrewserong, annezazu, joen, beafialho, richtabor, kristastevens, marybaum, cbringmann, DanSoschin, youknowriad.



git-svn-id: https://develop.svn.wordpress.org/trunk@58568 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this issue Jun 25, 2024
Introducing the new content for the 6.6 About page. This release, the About page will have just the highlights for 6.6, and link off to the release page on WordPress.org for the full overview.

See #61320, WordPress/gutenberg#62631.
Props ryelle, andrewserong, annezazu, joen, beafialho, richtabor, kristastevens, marybaum, cbringmann, DanSoschin, youknowriad.


Built from https://develop.svn.wordpress.org/trunk@58568


git-svn-id: http://core.svn.wordpress.org/trunk@58016 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this issue Jun 25, 2024
Introducing the new content for the 6.6 About page. This release, the About page will have just the highlights for 6.6, and link off to the release page on WordPress.org for the full overview.

See #61320, WordPress/gutenberg#62631.
Props ryelle, andrewserong, annezazu, joen, beafialho, richtabor, kristastevens, marybaum, cbringmann, DanSoschin, youknowriad.


Built from https://develop.svn.wordpress.org/trunk@58568


git-svn-id: https://core.svn.wordpress.org/trunk@58016 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@ryelle
Copy link
Contributor

ryelle commented Jun 25, 2024

About page has been committed: https://core.trac.wordpress.org/changeset/58568 — If there are any layout issues or anything else that needs to be fixed, please leave a comment on the trac ticket so we can keep the feedback where the work happens: https://core.trac.wordpress.org/ticket/61320

@ryelle
Copy link
Contributor

ryelle commented Jun 25, 2024

The release page has been deployed, it's live at https://wordpress.org/download/releases/6-6/ now. (wordpress.org/6.6 & wordpress.org/6-6 will redirect). That page is also under string freeze now, and I'll notify polyglots with a post when the strings sync to glotpress. Updates will continue on WordPress/wporg-main-2022#454, so please leave feedback on this page there.

@jasmussen
Copy link
Contributor

Is there any way we can keep that microsite private until release day? I realize it's hidden through having to guess the string, but it's one of those things that's nice to reveal the day of, especially because some of the content there is placeholder. We don't want this indexed by search engines yet.

tjcafferkey pushed a commit to tjcafferkey/wordpress-develop that referenced this issue Jun 26, 2024
Introducing the new content for the 6.6 About page. This release, the About page will have just the highlights for 6.6, and link off to the release page on WordPress.org for the full overview.

See #61320, WordPress/gutenberg#62631.
Props ryelle, andrewserong, annezazu, joen, beafialho, richtabor, kristastevens, marybaum, cbringmann, DanSoschin, youknowriad.



git-svn-id: https://develop.svn.wordpress.org/trunk@58568 602fd350-edb4-49c9-b593-d223f7449a82
@ryelle
Copy link
Contributor

ryelle commented Jun 26, 2024

Is there any way we can keep that microsite private until release day?

It is already linked to from the About page (and will be linked correctly once I fix this), so having this be a broken link might be confusing for people testing the page. The strings are already public since they're in GlotPress for translation. Just unpublishing it (or making it private) will break the content sync, too.

We don't want this indexed by search engines yet.

I've turned on Jetpack's "hide page from search engines" toggle, so that should prevent it. Let's just not forget to turn that off before launch 🙂

@ellatrix
Copy link
Member

ellatrix commented Jul 3, 2024

Btw, here are the final performance numbers, in case you want to include anything in the visual asset.

Most notably, template previewing is ⅓ faster.

https://docs.google.com/spreadsheets/d/1kQF-SKwanquvdBiKXiJYZKsviRoU256M_tf_-oDd95M

@annezazu
Copy link
Contributor Author

annezazu commented Jul 3, 2024

Was just coming here to connect those dots around performance numbers since we put 40% faster and now we're looking at 33%. @ryelle is this possible to update? I know we can get the microsite updated but wanted to check around the About page.

@ryelle
Copy link
Contributor

ryelle commented Jul 4, 2024

I've added that note to the core ticket, but I think it should be fine to update with a correction like that. There's also a suggestion in this PR to start the sentence with "WordPress 6.6" instead of just 6.6, so we could likely bundle both of those together since it's the same string.

@ellatrix
Copy link
Member

ellatrix commented Jul 4, 2024

It's 35% but I rounded it down. Yes 40% was the estimate, and I also think we regressed back a little

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release.
Projects
None yet
Development

No branches or pull requests

6 participants