Homepage multi-event banner

[cjyabraham]

This follows on the work from #570. Implement a slider to display all qualifying events on the homepage. Slider will have arrows to allow user to go between events and may also possibly move automatically when there is no guiding user input. Qualifying events are those that are upcoming and have the desktop and mobile assets set. Here are the basic designs, however, there are some points that need discussing and finalizing:

Steps:

• [x] Finalize designs
• [x] Implement

Dimensions for Event banner images:

• Desktop - 2400px x 840px
• Mobile - 900px x 1100px

[thetwopct]

Lets get the designs finalised for the slider - personally I prefer arrows inside the container, and this also works better on mobile.

@GarethAcidWorks do we want to signify the number of sliders (typically this is done with dots under or over the bottom of the slider). If so we need an active and inactive state.

[GarethAcidWorks]

Yes it would be good to show the number of sliders

we should already have the design in Figma but we can triple check it now it’s going into production.

Will message you today

[thetwopct]

@GarethAcidWorks Just wondering if there is any progress on this slider design. From Figma:

• The arrow controls floating over the top of the banner look great, think that's much better than them sitting outside the container.
• It took me a while to see the lines that indicate the slider count - they are also easy to miss on artwork that's not Detroit (i.e. Valencia), so I wonder if this needs a rethink (they could sit below the banner maybe).
• If you can provide a mobile mockup too showing arrows and slide indicator that will make implementation easier.
• Lets confirm the text/heading style above the banner too - previously suggested "Upcoming Events & Other Activities" but I feel like we could drop "Other Activities" as this will be displaying only events.

Thanks

[GarethAcidWorks]

Hey James, great we’re getting to this. I will have a look at Figma asap today / this week

The immediate question is @Kristi @.> / @Thabang @.> can we get the next piece of content to show here, some recommendations could be:

• Next events happening, maybe a medium sized one? (featuring the smaller events supports our need to empower the community)

• Detroit highlights – linking to a the Flikr page or a blog page on the CNCF site

• A report perhaps. Even an older one such (CTO etc).

Ultimately we are presenting a range of CNCF content…. getting some content in here is beneficial so at least we can make a start.

[thetwopct]

@GarethAcidWorks No further thinking on content is required - the banner is for CNCF events and has been built as discussed, signed off and implemented in this issue.

[KTan1226]

Hi @GarethAcidWorks - As @thetwopct flagged, let's move forward with the plan as is.

[cjyabraham]

Could we also get assets for the following events as @KTan1226 has outlined:

• KubeDay Japan (Dec 7)
• KubeCon + CloudNativeCon Europe 2023 (April 17-21)

Note that as soon as Kubecon NA has passed on the 28th the current event banner will disappear unless we've loaded up assets for future events.

As a reminder, dimensions for Event banner images need to be Desktop - 2400px x 840px Mobile - 900px x 1100px

[GarethAcidWorks]

I’ll ask Alex for the Japan artwork today and mock it up asap

[GarethAcidWorks]

Hi all, here are the banners for Kube Day Japan. We do not have artwork for KCCNC Europe yet. Perhaps we can implement Detroit + Japan for now as a test.

Regarding the interface:

• I do feel the title and the dividing lines helps us bring some context / purpose / engagement to the page after a couple of scrolls. Currently the title is improved to 'Events & more' but have to take another look at that when Charlie is free.

• Regarding the thin line counters, I tried them below the artwork and it's creating awkward space. So i would recommend either of the following:

a) Keep them within the image, they are only a gentle suggestion that there is more content b) Don't use them at all.

For the actual behavior of the banner, having it switch itself every 3 seconds, and also the ability to click would keep the page feeling alive

[thetwopct]

@GarethAcidWorks Thanks.

• Can you provide a mobile mockup of the banner including thin line + text above the banner
• The text to use above the banner should probably be "Forthcoming Events" - as discussed this section will show events, so " & More" is not relevant. We can refine later with @Charley-Mann if needed.
• If the thin line slide indicators are hard to see over the banners, typically sliders use dots to signify the number of banners, this would be bolder and possibly easier to see - is that worth exploring?

[thetwopct]

@GarethAcidWorks

• I've guessed on the mobile layout - I've had to drop down the arrow position to 55% from the top so they didn't cover the logo.

• When there is only one event the text is "The next CNCF event"

• 3000ms was a bit too quick for the sliders to move, so I made it 5000ms
• The KubeDay Japan mobile banner provided is the wrong size, can you make it the same as the Kubecon banner, or adjust all banners in future to be a consistent size? As you can see the two sizes don't look good:

[thetwopct]

Switched the text above the banner(s) to "Upcoming Event" and "Upcoming Events" if multiple

[KTan1226]

Looks great, thank you!

[cjyabraham]

deployed

[GarethAcidWorks]

Thanks for this, a couple of refinements on the live version please.

1) Arrows should be positioned in the centre. Currently they are too far down (See below) 2) Let's just use a fade (opacity) transition when you click the arrows, please set the time to fast pace (.5 seconds or less). The swiping is too clunky / harsh.

Thanks!

[thetwopct]

1. Ok no problems, I am moved it precisely in to the middle (see Figma for measurements using screenshot). I think that makes the Detroit banner look misaligned as the Detroit text is not centred...

2. Added fade effect instead of swipe

[GarethAcidWorks]

Thanks, yes we can fine tune the banner graphic a little more to make sure the visual typically works the same way and things feel well layed out.

To add, I noticed on the mobile we have 2 different sizes. (Appreciate Kubecon will be removed anyway now). But the smaller option works better.

[thetwopct]

@GarethAcidWorks Please see the thread above, I have left you a note on the sizing.

The KubeDay Japan mobile banner provided is the wrong size, can you make it the same as the Kubecon banner, or adjust all banners in future to be a consistent size? As you can see the two sizes don't look good:

[GarethAcidWorks]

To add, ‘More’ was to support that this banner can also be used to promote additional important / interesting things if needed. A new big report, promoting the new Instagram etc etc. Ultimately so we show there’s lot’s happening.

Let’s pick it up once we’re back to things this coming week

[thetwopct]

As already outlined several times to you, this has been signed off and developed as an event banner. We already have spaces in the mega menu (which is on every page) to highlight reports. The banner and development behind it will allow us to syndicate event banners across our sub-sites (at your request) and easily update and manage them all from one central place.