search

WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
62 stars 22 forks source link

WCEU small notice banner on Home page #445

Closed marko-srb closed 1 month ago

marko-srb commented 1 month ago

Here's the look of the notice banner for Home page to announce WCEU.

Copy: Watch WordPress Cofounder Matt Mullenweg’s mid-year project update—streaming live from WordCamp Europe on June 15.

CTA link. Yet to be shared, once the News post is up.

WCEU-notice-banner

Note: keep in mind that I enlarged the spacing from 80 to 120 (from global nav to H1), so the banner breathes nicely. This should be reflected as a live edit too.

Mobile question. Can we execute 'moving text' here? Same as very top line on https://www.awwwards.com/ site? Only in our case the text would disappear under the margins of the outline...

CC: @jasmussen, @ndiego, @ryelle, @thetinyl

thetinyl commented 1 month ago

Thanks Marko! I like the news ticker treatment you're suggesting.

Here are some condensed alternative copy options based on the above (just in case, thinking about mobile in particular):

ryelle commented 1 month ago

I looked into the Link Wrapper block, and we can style it with borders & radius (the red was just for testing), but it's a fixed width. It works for some content but would probably still need to be tweaked a little. Once the content is updated and the sync PR is created, Neso can use that to update the CSS.

Screenshot 2024-05-29 at 1 36 41 PM

Can we execute 'moving text' here?

Moving content is an accessibility issue (awwwards is in violation). I know there is the OS setting to disable motion, but you need to know that exists - if there was a way to identify people who explicitly want motion I'd do it, but it's "no preference". Also, if it scrolls it would create a moving click target (even if it stops on hover, it would still seem like you need to chase it, if you even realize its clickable - I didn't realize the awwwards one was. Though honestly it was moving so i didn't even read it…). Overall, it would be a detriment to a11y and would be tricky to build, so I would highly recommend against it.

jasmussen commented 1 month ago

Thanks for sweating the details.

One thing to clarify, ideally the chevron is always right aligned, and a chevron: Screenshot 2024-05-30 at 09 11 10

Would that work?

marko-srb commented 1 month ago

Ok, thanks for clarification @ryelle. Then we have an issue with the mobile version.

Previous design allowed us to have two rows, while this type of notification banner isn't looking good in two rows...

Screen Shot 2024-05-30 at 15 50 47

@jasmussen it will be very hard to adopt each text to have so little characters for mobile version. Do you agree (in the light of findings above) that we need to revert to the old version of this banner?

ryelle commented 1 month ago

One thing to clarify, ideally the chevron is always right aligned, and a chevron:

Not without extra CSS, so I was hoping we could get away with the usual arrow 😅

If the new arrow/chevron is a must-have, we'll add that in with the other CSS tweaks once the content PR is up.

jasmussen commented 1 month ago

I guess it's the linebreak (two paragraphs) that makes this not work, is that right? Otherwise, space-between in a row works:

Screenshot 2024-05-30 at 17 20 32

Code sample ```

Short link

→

```
ryelle commented 1 month ago

Can you try that with the link-wrapper block? I don't think we support all the same layout options as a group block (it was "experimental" last I looked), so it wouldn't support the flex layout. Unless you're OK with only the link text being clickable, then you could use a link in a row, totally.

jasmussen commented 1 month ago

I personally think it's fine that either the text, or the link on the rigiht, is the clickable piece.

ryelle commented 1 month ago

I personally think it's fine that either the text, or the link on the rigiht, is the clickable piece.

If only the arrow side is the link, it will also need some descriptive text for the link — this is why we built the link wrapper block, so that the descriptive copy could be the link, and the whole thing is clickable (which IIRC was feedback we've gotten before).

thetinyl commented 1 month ago

Here's the URL for the post this notice will be directing folks to: https://wordpress.org/news/2024/05/wordcamp-europe-2024-mid-year-update-and-qa-with-matt-mullenweg/

While the post is live as of today, that's not a nudge to have the notice ready sooner. We're still good for a June 3/4 launch. (Want to make sure that's clear. Don't want to frazzle anyone.)

jasmussen commented 1 month ago

For anyone following this one, we're also working in https://github.com/WordPress/wporg-main-2022/pull/446#issuecomment-2145572536.

daveloodts commented 3 weeks ago

@marko-srb , @thetinyl a question: why is that banner fully around Matt's talk? It indicates that there is no WCEU on 14 june. That's a missed chance to promote the biggest WordPress event currently happening.

A better line would be: "Discover WordCamp Europe online: watch the live streams on 14 and 15 June".

And in that referred post people will eventually read about Matt's talk.

DanSoschin commented 3 weeks ago

Recap shipped >> https://wordpress.org/news/2024/06/highlights-from-wordcamp-europe-2024/

Project update recording >> https://www.youtube.com/watch?v=ELW4Jdvujbc