New landing page: The WordPress Briefing Podcast

thetinyl commented 3 months ago

Background

The WordPress Briefing podcast is a bi-weekly series hosted by Executive Director Josepha Haden Chomphosy. It's an important communication channel for project leadership to share insights and resources related to what's going on around the project.

Currently, new episodes of the podcast are shared on /News, with its archive of older episodes living as a category page.

Why a landing page?

Having a dedicated landing page lets us include more information about the podcast and Josepha, which can help improve searchability and expand its reach. It lets us create a more engaging visitor experience, curate content, and leverage the landing page for future marketing campaigns/initiatives. It would also be ideal to have a different URL that's more ownable/recognizably linked to the podcast (i.e. using the name).

Notes

Landing page copy is already in progress and should be ready shortly
For design/layout, the goal is to leverage as much of the existing new WordPress.org design language as possible
@bjmcsherry manages the podcast production and can help answer any specific podcast-related questions
There may be some technical needs with how the featured episode/recent episodes appear... this may not be the case, but I want to flag just in case

Tasks

[x] Landing page copy ready
[x] First draft page created in Editor
[x] Initial design
[ ] Page complete: Week of September 30

ryelle commented 3 months ago

^ removed some spam comments

ryelle commented 3 months ago

I've created a draft page, you should be able to find it in the Pages list — currently it's called WordPress Briefing Podcast, you can change that and work on the content there. We can tweak the global header and footer colors once we're ready to roll this out, since it's controlled in the template (noting since this came up for creator connections).

There may be some technical needs with how the featured episode/recent episodes appear... this may not be the case, but I want to flag just in case

I've dropped the RSS feed into the page, but it doesn't allow for that much design control (we haven't styled it, AFAIK). If you want something more like the Latest News section on the homepage, that will take a little dev work, but only a couple hours.

This will just be one page, linking off to the current podcast archive on News, right?

Is there a deadline for this page (ex, also by WCUS)?

thetinyl commented 3 months ago

If you want something more like the Latest News section on the homepage, that will take a little dev work, but only a couple hours.

It may not be exactly like the Latest News section, but we'll likely want it to have some additional content vs. the straight up RSS (like episode length, short description, etc). So this is good to know.

This will just be one page, linking off to the current podcast archive on News, right?

Hmm. I don't want to assume here, so flagging @bjmcsherry for your thoughts.

Is there a deadline for this page (ex, also by WCUS)?

Great question. If it can be done by WCUS (or sooner), that'd be fantastic.

bjmcsherry commented 3 months ago

This will just be one page, linking off to the current podcast archive on News, right?

Yes, we will still have the episodes uploaded to /News since many subscribers to News came because of the Podcast.

Also, what are the chances of still being able to view stats for episode plays from the LP? Or would a play here just add to the totals we have on /News? Which is also fine. They use Seriously Simple for stats there.

thetinyl commented 3 months ago

@jasmussen / @sfougnier Copy is ready to go for the page. I've also added it to the draft page (preview may not work) that @ryelle created.

It's a mess at the moment, but let me know if there's more I can do to help prep it for you to start. It may be worth looking at the copy document first to get an idea of the sections.

Happy to answer questions or discuss anything further.

jasmussen commented 3 months ago

I'll take a look as soon as I get a moment. Some other tasks landed on my table. My instinct once I'm able to take a stab, ~~is to just create a new test page~~ edit, you already have one, and work in that, then we can swap around the blocks when we're ready. If anyone subscribed here would recommend a different approach, let me know.

jasmussen commented 3 months ago

Took a deeper look. The draft page is a big help in figuring out how the existing landing page can be elevated. Diving in, however, I think it might still be useful for us to do a quick pass with some of the Figma templates we've got. So I kicked off a starting point in this Figma file. @sfougnier if you get a moment, can you take a look? I'm not happy with the layout as proposed there, but the ingriedients were ported over, giving a head-start to potentially make something nice. Let me know!

thetinyl commented 3 months ago

Just noting that the deadline for this has been pushed to September 30, 2024.

jasmussen commented 2 months ago

Based on mockups @sfougnier did in this Figma file, I expanded upon the work slightly and landed on the attached:

Firstly, please share your thoughts on these, content/structure/design-wise. I suspect that given this becomes a destination on its own, it will be possible to reduce some prose here and there, perhaps move it to subpage or otherwise. But as-is, I've worked to make sure this came together. Since it will be block editor pages, it will be trivial to edit after the fact, so we could start a first iteration pending feedback and a few open questions.

Questions:

I can build this in the block editor, at least 80% of it. There are some open questions on how the permalink pages may come together, given the particular row and then 2 columns layout, but if that doesn't come together, we can look at alternatives.
Do we want to update the official podcast artwork? Saul explored some additional options here, this mockup includes the one I think works best. If we prefer to keep the existing artwork, I can easily return with a mockup that keeps that as-is.
Can I add a little custom CSS? Notably the custom podcast player as it exists, I believe I can make it match the artwork, and just generally gel with the design.

CC: @ryelle @thetinyl

thetinyl commented 2 months ago

Thanks for pushing this forward, @jasmussen (and @sfougnier for the initial exploration). Overall, the design looks beautiful. I especially like the hero section.

My feedback mostly relates to the Episodes and Start here sections:

Episodes section

Having so many podcast players feels like too much for the page. It also includes a lot of redundant information (name of podcast x2, name of title x2, etc).

If possible, I think having one featured episode with the player + a list of the next 5 recent episodes (perhaps in a similar style to the events page?) would condense the page and pull up the other information. Driving listeners to the specific episode page is ideal since it has all the extra resources/information about the episode.

Start here section

Originally, this section was meant to include the three most popular episodes to let new folks jump into what seems to be the hottest topics/most listened to (as a hook). But we can also just feature the first one. If we go with the first idea, is there another way to present the episodes that's not the player? They can just be links to the episode pages.

Everything else looks fine to me as a first iteration. @bjmcsherry Do share if you have any additional thoughts.

I do want to note that the initial scope of this project was just to create a landing page that would end up just linking to the existing WP Briefing episodes on the News blog (where they currently live). That being said, it would create a much nicer experience if we could leverage the designs you're presenting for a podcast archive and podcast episode page. @ryelle Would something like this even be feasible since the podcast is published on News?

There are some open questions on how the permalink pages may come together, given the particular row and then 2 columns layout, but if that doesn't come together, we can look at alternatives.

I may need additional clarification here, but do you mean the other pages besides the landing page? (If so, see my note on scope above.)

Do we want to update the official podcast artwork?

I'll let WP Briefing producer @bjmcsherry weigh in here officially, but I think we could and should. Saul already updated the visual language for the podcast for our social assets (seemingly with the same look and feel as the explorations you've linked).

Can I add a little custom CSS?

I'll defer to Kelly on this one.

ryelle commented 2 months ago

I do want to note that the initial scope of this project was just to create a landing page that would end up just linking to the existing WP Briefing episodes on the News blog (where they currently live). That being said, it would create a much nicer experience if we could leverage the designs you're presenting for a podcast archive and podcast episode page. @ryelle Would something like this even be feasible since the podcast is published on News?

No… the scope of this was to create a single new page (eg, wordpress.org/podcast) on the main site linking to the existing News site archive. We had not planned to rebuild the News site archives, and creating a new site would loose the current subscribers (and as News does not use a proper block theme, I'm not confident that implementing this just for those pages would be simple).

If possible, I think having one featured episode with the player + a list of the next 5 recent episodes (perhaps in a similar style to the events page?) would condense the page and pull up the other information. Driving listeners to the specific episode page is ideal since it has all the extra resources/information about the episode.

We don't currently have a way to add the player to this page at all — earlier I suggested we could use the Latest News block from the homepage with a backend tweak to pull from Episodes, but this will only include the title, date, and category. I'm sure we could figure something out to support a player, but adding that, the excerpt, and the unique layout increases the dev time needed here. Of those, the player is the biggest unknown, so if we could omit that entirely to push people to the episode pages, it would be easier to build.

jasmussen commented 2 months ago

Great feedback, both! I will need to come back and address all the feedback, suggestions, and work within the limitations, so the first draft here served as an excellent catalyst for that feedback, thank you. I should still be able to make the Sep 30 deadline, even though I am AFK next week, but in the mean time, here's what I'm hearing, re-stated here so you can correct me:

We have a single URL, one-pager, for the podcast, e.g. on the suggested URL.
We keep the existing news-archive, and for every podcast, we link it there.
If we can avoid embedding a player in the new version, and simply link out to the existing pages, that's best, it also avoids the duplicative titles.
We should limit the number of episodes to 3, take a pass at the curation for "start here".

If that sounds right, all of it is very reasonable. I would say it suggests we keep the current podcast artwork intact, at least for the time being, and I'll make sure there's more visual connective tissue between the landing page and the news archive.

I would still say that design elements and explorations made here can be shelved for future explorations, so any feedback you get on these is still welcome, even if the V1 will be pulled back a little.

Thanks again!

thetinyl commented 2 months ago

Thanks for clarifying all of that, @ryelle.

@jasmussen All your bullets make sense to me. Just an update on the last one:

We should limit the number of episodes to 3, take a pass at the curation for "start here".

For this iteration, let's drop the "Start here" section entirely. It's a nice-to-have at the moment, and we can figure that out after the page launches.

I would say it suggests we keep the current podcast artwork intact, at least for the time being, and I'll make sure there's more visual connective tissue between the landing page and the news archive.

I agree on the idea of visual connective tissue between landing page and news, but not sure about keeping the current artwork the same. We are using @sfougnier's refreshed approach to promote the podcast on social, so we could lean more to the new as you've already done.

Example of social artwork:

jasmussen commented 2 months ago

Coming back, here are two options based on the feedback.

i4a:

Mockups, i4a

Emphasis here is on keeping intact most of what exists, just adding into the mix a new landing page.

The homepage was rearranged a bit, blueberry added back, other feedback addressed.
The two subpages— the podcast archive and the individual permalinks have light updates, but the idea here is that if we still do little to nothing, the landing page should still work.

I'm not entirely feeling the "About the show" part of the landing page yet, though let me know your thoughts, we'll thread the needle yet.

i4b:

Mockups, i4b

This version is closer to what I had before. Which is to say, it has larger updates, though still addresses the main feedback. Layout should be mostly similar to what ships on the two subpages but more white has been added overall.

thetinyl commented 2 months ago

Thanks @jasmussen! I like the addition of the blueberry in i4a, but the 'About the show' section needs to come before 'Meet the host' (like in i4b).

I'm not entirely feeling the "About the show" part of the landing page yet

It feels kind of empty next to the text. Would another image work there, perhaps? Something related to the podcast? Or representative of the community?

thetinyl commented 2 months ago

@bjmcsherry Can you confirm what the URL should be for the WP Briefing landing page?

jasmussen commented 2 months ago

Here are 4 new options. I have omitted entirely the visuals for archive and permalinks, because as scoped, those are not part of this effort. Apologies for any confusion created otherwise.

In these first three, the feedback is addressed, though the layout is largely kept the same. I'm trying to keep the rhythm of the "About the show" being before "About the host", by putting a new illustration on the right, the same one used on permalink pages. It's not fully coming together:

Mockups, i5

Mockups, i5b

Mockups, i5c

An alternative is to use the same main column width for text as we do on the permalink pages, and simply remove that illustration:

Mockups, i5d

Of these, I like this last one the most, and notably it doesn't preclude future enhancements as we come back to revisit. It's also easy to build.

Let me know your thoughts!

ndiego commented 2 months ago

I'm partial to the second (blue swirl) or fourth option.

sfougnier commented 2 months ago

This looks great! +1 to the blue circle.

thetinyl commented 2 months ago

Blue swircle seems to be the winner here. (I like it, too.)

Let's do it!

jasmussen commented 2 months ago

Cool, logistically I have a bit of a challenge with other work this week. Mind if I do the actual building Wednesday next week?

thetinyl commented 2 months ago

Mind if I do the actual building Wednesday next week?

Sure thing. Thanks for letting me know re: bandwidth.

I may have time today/tomorrow to jump in myself. I can probably copy blocks in from other pages for most of the content. 🤔 Would that be helpful?

ndiego commented 2 months ago

I may have time today/tomorrow to jump in myself. I can probably copy blocks in from other pages for most of the content. 🤔 Would that be helpful?

That would be great. I will have some time tomorrow to help get this together as well.

ndiego commented 2 months ago

Thanks for getting this started @thetinyl. I made some good headway on adding the images and fine-tuning the design. I'll pick up where I left off on Monday.

jasmussen commented 1 month ago

Checking in here! @ndiego do you have this task from here on out? If so, thank you! Otherwise, I can have some time on Wednesday. And I'm always here for pings or questions or otherwise.

ndiego commented 1 month ago

Checking in here! @ndiego do you have this task from here on out? If so, thank you! Otherwise, I can have some time on Wednesday. And I'm always here for pings or questions or otherwise.

Yup! @thetinyl and I will keep pushing this forward. I'll ping you when we're ready for review or if we run into any issues.

eidolonnight commented 1 month ago

@bjmcsherry Can you confirm what the URL should be for the WP Briefing landing page?

After speaking to @bjmcsherry , we've decided that it would be best to use /podcast/ as the slug and ideally redirect https://wordpress.org/news/podcast/ to this new page.

ryelle commented 1 month ago

After speaking to @bjmcsherry , we've decided that it would be best to use /podcast/ as the slug and ideally redirect https://wordpress.org/news/podcast/ to this new page.

We can definitely do https://wordpress.org/podcast/, but if we add that redirect you'll loose the archive. This page will only have a subset of recent episodes, and was going to link to that page for the full archive.

ndiego commented 1 month ago

After speaking to @bjmcsherry , we've decided that it would be best to use /podcast/

I updated the slug to /podcast/.

@ryelle I have gotten the page pretty close to the Figma using the CSS below. The one thing that is missing is the styles for the social links. I copied over the classes from the News theme, but that's as far as I can go on my end.

@jasmussen the one thing missing from the mockup is the "Read more" links below each episode since that is not part of the RSS block.

If anyone wants to test the design, navigate to the preview and apply the following CSS in the inspector. You will need access to WordPress.org to view the preview.

.wp-briefing__container {
    --wp--preset--spacing--70: clamp(50px, calc(10vw - 40px), 100px)
}

.wp-briefing__rss-feed {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.wp-briefing__rss-feed .wp-block-rss__item-title {
    font-size: var(--wp--preset--font-size--heading-3);
    font-family: var(--wp--preset--font-family--eb-garamond);
    line-height: var(--wp--custom--heading--typography--line-height);
}

.wp-briefing__rss-feed .wp-block-rss__item-title a {
    color: var(--wp--preset--color--charcoal-1);
    text-decoration: none;
}

.wp-briefing__rss-feed .wp-block-rss__item-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.wp-briefing__rss-feed .wp-block-rss__item-publish-date {
    color: var(--wp--preset--color--charcoal-4) !important;
    font-size: var(--wp--preset--font-size--normal)
}

.wp-briefing__rss-feed .wp-block-rss__item-excerpt {
    margin-top: 20px;
}

.wp-briefing__media-text .wp-block-media-text__media {
    min-height: 450px !important;
}

.wp-briefing__media-text>.wp-block-media-text__content {
    padding: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--70) var(--wp--preset--spacing--edge-space);
}

@media (max-width: 1199px) {
    .wp-briefing__media-text>.wp-block-media-text__content {
        padding-right: var(--wp--preset--spacing--edge-space);
    }
}

@media (max-width: 889px) {
    .wp-briefing__media-text>.wp-block-media-text__content {
        padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--edge-space) var(--wp--preset--spacing--edge-space);
    }
}

 @media (max-width: 600px) {
    .wp-briefing__media-text.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
    }

    .wp-briefing__media-text.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
    }
}

jasmussen commented 1 month ago

Nice work, tested with the CSS you supplied, this works great.

the one thing missing from the mockup is the "Read more" links below each episode since that is not part of the RSS block.

I recognize indeed that the block doesn't support such a link. So I guess if that's what we have to do, one thing we could do to make the links clearer, is make them blue and underlined:

Screenshot 2024-10-01 at 09 36 20

I think that can work, though I'll defer to you all on this.

thetinyl commented 1 month ago

one thing we could do to make the links clearer, is make them blue and underlined

This looks fine to me (based on your screenshots). At least for now as a first iteration.

I'm wondering about the 'See all' link that's way off to the right. It feels very disconnected, though I know that's how we've treated it on the homepage for the /News feed. My preference would be moving that link to below the RSS feed, make it a little bit more prominent, and make it read clearer. Like: "Get more episodes" or "Find more episodes"

jasmussen commented 1 month ago

Feel free to tinker with those details in the block editor, and go with what feels best.

ndiego commented 1 month ago

I recognize indeed that the block doesn't support such a link. So I guess if that's what we have to do, one thing we could do to make the links clearer, is make them blue and underlined:

That looks good to me. I'll update the CSS.

I'm wondering about the 'See all' link that's way off to the right. It feels very disconnected

What about a button. This is what it would look like with the link style updates.

thetinyl commented 1 month ago

What about a button.

I'm down with a button. I was going to try that, you got there first! Looks good to me.

ndiego commented 1 month ago

I'm down with a button. I was going to try that, you got there first! Looks good to me.

Great, here is the final mockup. Note that the podcast icons still need to be fixed, but everything else should be considered "done", unless changes are requested.

Desktop	Mobile

ndiego commented 1 month ago

@ryelle here's the latest CSS:

.wp-briefing__container {
    --wp--preset--spacing--70: clamp(50px, calc(10vw - 40px), 100px)
}

.wp-briefing__rss-feed {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.wp-briefing__rss-feed .wp-block-rss__item-title {
    font-size: var(--wp--preset--font-size--heading-3);
    font-family: var(--wp--preset--font-family--eb-garamond);
    line-height: var(--wp--custom--heading--typography--line-height);
}

.wp-briefing__rss-feed .wp-block-rss__item-publish-date {
    color: var(--wp--preset--color--charcoal-4) !important;
    font-size: var(--wp--preset--font-size--normal)
}

.wp-briefing__rss-feed .wp-block-rss__item-excerpt {
    margin-top: 20px;
}

.wp-briefing__media-text .wp-block-media-text__media {
    min-height: 450px !important;
}

.wp-briefing__media-text>.wp-block-media-text__content {
    padding: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--70) var(--wp--preset--spacing--edge-space);
}

@media (max-width: 1199px) {
    .wp-briefing__media-text>.wp-block-media-text__content {
        padding-right: var(--wp--preset--spacing--edge-space);
    }
}

@media (max-width: 889px) {
    .wp-briefing__media-text>.wp-block-media-text__content {
        padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--edge-space) var(--wp--preset--spacing--edge-space);
    }
}

@media (max-width: 781px) {
    .wp-briefing__container .is-page-footer.wp-block-columns > :first-child {
        border-right: 0 !important;
        border-bottom: 1px solid var(--wp--preset--color--white-opacity-15);
    }
}

@media (max-width: 600px) {
    .wp-briefing__media-text.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
    }

    .wp-briefing__media-text.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
    }
}

ryelle commented 1 month ago

Okay, I've added that CSS and the code for the SVG social icons, so the preview should now look correct for everyone :)

thetinyl commented 1 month ago

if we add that redirect you'll loose the archive. This page will only have a subset of recent episodes, and was going to link to that page for the full archive.

@ryelle I don't think I read this correctly the first time. Without an available archive of all the episodes, the only way for folks to see beyond the three episodes on this landing page, is to go to one of the podcast app options.

@bjmcsherry @eidolonnight Is that what we want?

If that's the case, then we'll need to remove the 'Get more episodes' button. Or have it link to one of the podcast apps.

Other than that, I took another look at all the content and everything looks good to me. Thanks for the Editor magic and extra finessing, @ndiego!

ryelle commented 1 month ago

Without an available archive of all the episodes, the only way for folks to see beyond the three episodes on this landing page, is to go to one of the podcast app options.

As I understood it (but it sounds like I might've been wrong)— this is a totally new page, so they would still be able to go to https://wordpress.org/news/podcast/ for the older episodes and transcripts etc. And that's what the "Get more episodes" button would link to.

ryelle commented 1 month ago

Oh, unless you meant if we add that suggested redirect — in that case, yes, the only way to view older episodes will be though the apps. So I'd recommend against doing that, personally.

thetinyl commented 1 month ago

Yes! Sorry, that wasn't clear. If I'm following:

wordpress.org/news/podcast --redirect--> wordpress.org/podcast

So no more (accessible) podcast archive. Unless it has an alternate URL?

ryelle commented 1 month ago

So no more (accessible) podcast archive. Unless it has an alternate URL?

~That's correct, there is no alternate URL.~ Well, there's no official alternate URL, but I just noticed that pocketcasts links to https://wordpress.org/news/series/wordpress-briefing-a-wordpress-podcast/ — which is not styled correctly, but could work as an alternate URL. However, then we'd also need to update the places in the theme where we say "listen to all episodes" to use this new URL (like the News footer).

I also don't see a way to get to the single-episode page from Pocket Casts, so loosing the archive page would make it harder for people to get the transcripts & show notes.

ndiego commented 1 month ago

Catching up here on the redirect/archive discussion. What if the new landing page just links to https://wordpress.org/news/podcast/. The landing serves as the entry point that we direct everyone to, but the archive on News remains for all the episodes. cc @eidolonnight for thoughts.

eidolonnight commented 1 month ago

Yeah, @ndiego that sounds like a good solution for now. When we triple subscribers next year, then we can maybe talk again. 😎

WordPress / wporg-main-2022