Event banner ads v2

[cjyabraham]

Updated figma shows new design to have the headline "UPCOMING EVENTS & ACTIVITIES" with HR above and below.

There is also a requirement to promote more than one event at a time (i.e. ArgoCon + KCCNC NA 22)

[thetwopct]

Adding a text line above is simple enough, although the broken line style is a new design pattern.

If we replace the singular event with an event slider we need to remember the front page event banner is also re-used in the mega menu to promote the next event, so we need to think of a solution for this.

One thought I had was that is may just be easier to have these event banners as images:

• Use a square banner for mobile (maybe 360x360) which can scale up to around 600px. Creative already create square event banners - in use in the sidebar of the landscape.
• A desktop banner (maybe 1000px x 360px) which scales all the way up to full width 1200px (Creative may already have a large banner size too)
• For the mega menu, we could follow the same design pattern as the blog posts above it, and use the social image share from the event (1200x630) and some basic text (name of event, location, date).

This would simplify adding/removing events (could be done from one settings page), reduce HTML complexity, allow for a slider, and doesn't seem to create extra work for the creative team. Downside is that they are less accessible than our current implementation (although not by much).

[cjyabraham]

I vote for leaving the current ad as is and simply adding a new banner ad for a 2nd event. Multiple images could work for this second event but you wouldn't need a mega menu one, just desktop and square for mobile.

[cjyabraham]

As discussed, this solution needs to be considered holistically taking into account the use case of having these banners show up on the store site and possibly others. We want to be able to just set it in one place.

[thetwopct]

Some questions to get clarity:

1) Do we want to promote multiple events on home page? 2) If yes, should it be

• an automatic slider - this would automatically go from slide to slider after X seconds (bear in mind that on the home page the following items are already moving/animated - video, project countup, project items, #teamcloudnative, terminal)
• a manual slider (i.e. user can swipe left/right should they want to explore more events)
• load one event randomly (same as how the case studies display)
• have two banner spots on the home page 3) If we have multiple events on home page, which event should be promoted in the Mega Menu (in the About dropdown)? Should this be automatic (i.e. always the first event) or selectable by team member. 4) Do we want event advertising banners on sub-sites like Store? Will they be updated manually for each event (like the banner on Landscape) or should we try to automate this (i.e. create our own embeddable banner script)

[KTan1226]

Hi! Thanks for raising this. I'm OK with promoting multiple events on the home page. In addition to the KubeCon flagship events, we will also have KubeDays in 2023 as well as other events. What is the best way to submit requests for the banner images to be updated, would it be in our issue template?

[cjyabraham]

@KTan1226 I think if we had a schedule for the upcoming months then James and I could take care of putting the right ones up at the right times. Putting them in a GH issue would be fine.

Do you have a take on the various other questions raised above, numbers 2, 3 and 4?

[KTan1226]

Sure thing, happy to get you a schedule of what is upcoming. To clarify, this would be CNCF hosted events not third party.

2. As for the other questions, I am fine with the automatic slider option.
3. Let's go with the KubeCon + CloudNativeCon events
4. That would be great! If we can automate/make this a light lift, even better.

[KTan1226]

Upcoming events through EOY + early 2023 (confirmed as of Sept 7, 2022):

• ArgoCon (Sept 19-21)
• KubeCon + CloudNativeCon North America (Oct 24-28)
• KubeDay Japan (Dec 7)
• KubeCon + CloudNativeCon Europe 2023 (April 17-21)

Additional KubeDay events + CloudNativeSecurityCon to be confirmed!

[cjyabraham]

@thetwopct a few ideas about how to move forward with this:

Phase 1 - get the banner working on cncf.io

• leverage the Events CPT which already has event dates, event names, categories etc. We'd need to add fields for desktop and mobile ad images.
• any Event with ad images that has not passed qualifies for the automatic slider on the homepage, ordered by nearness to Event start date
• if there are no Events that qualify for this then there is no event slider on the homepage
• if only 1 Event qualifies for this then we just display the ad with no slider
• Is the menu event ad the same proportions as the Desktop one? Can we re-use the Desktop version of the ad in that space? If not, we could do as you suggest above: "we could follow the same design pattern as the blog posts above it, and use the social image share from the event (1200x630) and some basic text (name of event, location, date)" although the downside to this approach is that each Event would then need 3 ad images instead of 2.
• Menu event ad should first try to find a "kubecon" from the qualifying Events before reverting to just the most recent one

Phase 2 - create some kind of way for subsites to pull banner data

• Create some kind of API call that returns a json of Event ad data so the same widget can be recreated on subsites; we'll need to see if sites like the store can support this kind of code
• JSON could include desktop image url, mobile image url, alt text, and event link for each entry
• As a simpler option we could not bother with the whole slider but just display the nearest event.

Any thoughts? Once we agree on a general approach I can start fresh issues to track the work and we can close this issue.

[cjyabraham]

As discussed: Menu ad should use snackable from event with basic event info to the right of it.

[KTan1226]

Hello! We discussed this on our weekly MP call and decided to make one small change:

• For the event banners, make it so the user can click through them (with arrows) instead of an automatic scroller

We decided to test this to give the user more control. We will also monitor analytics to see if it drives more clicks for the user over time. Thanks!

[cjyabraham]

I have split out phase 2 of this

[cjyabraham]

Thinking more about the images...

Instead of a separate social share image for the menu ad, how about we use the logo and background, already available for each event and used on the event listing.

The mobile-sized ad could also basically use the layout we already have on the event listing.

So the only new image we need is the one for desktop, which needs to be hand-made to achieve the level of quality we want on the homepage ad space.

@thetwopct WDYT?

[cjyabraham]

As discussed: Mobile-size homepage ad - static image Desktop-size homepage ad - static image Megamenu ad - Event logo on background that we already have for Events listing

[cjyabraham]

@GarethAcidWorks can you provide Detroit banner ads with the following dimensions please? Desktop - 2400px x 840px Mobile - 900px x 1100px

[thetwopct]

We have completed the first part of phase 1 of this and implemented the KCCNC NA 22 as first banner under the new system.

The mega menu promotes the next Kubecon event and if there is not one scheduled or one is scheduled but without assets, the next event with assets is chosen. The assets are the same as those used on the Events page, so no extra work is required.

The home page banner requires its own assets to be uploaded - a mobile version and desktop version of a banner advert. These are simple image files, so no development work is required to create new banners. The banners match existing sizes already created by creative, so no extra work is required.

Desktop:

Mobile:

Assets can be easily managed by any staff with WordPress access and we have made the Events admin index give an easy overview of which events have the assets required for banners.

The next part of this phase will be:

• Adding text above the banner to help tell users the banner is an event and to split the page up a little
• Implementing slider functionality to allow for multiple events to be shown (Designs TBD)

[cjyabraham]

Closing this since phase 1 is done and kicking off the next phases of work as:

• 604

• 598