Add Swift 6 language mode migration banner to landing page

[alexandersandberg]

Motivation:

Add a banner to direct users to the Swift 6 language mode migration guide.

Modifications:

• Add banner to landing page + add necessary CSS
  • Note: I'm using an absolute URL here as the migration guide is not hosted in this repository and will otherwise show up as a "not found" page when running locally

Result:

Live preview: https://alexandersandberg-swift-org-banner.netlify.app

[alexandersandberg]

cc: @mattmassicotte (for some reason I can't add you as a reviewer)

[alexandersandberg]

Something @kaishin mentioned in another conversation was that the banner seems clickable enough that we might want to make the whole thing a big button, instead of only part of its text.

What do others think?

[kaishin]

@alexandersandberg We can probably make it appear less like an interactive control and more like a callout if we use a visual treatment like the proposal below:

color: rgba(240, 81, 56, 1.0);
background: rgba(240, 81, 56, 0.2);

Light mode might require additional work, but here is a rough idea:

background: rgba(240, 81, 56, 0.1);

[mattmassicotte]

I think this looks great!

[alexandersandberg]

I think this looks great!

Thanks for the feedback! Just to clarify; do you mean the first one or @kaishin's suggestion? 🙂

@alexandersandberg We can probably make it appear less like an interactive control and more like a callout if we use a visual treatment like the proposal below:

Appreciate the suggestions! I think we lose a bit too much of the nice orange "pop" here though, although some might argue that it's too much at the moment, so I guess this is subjective (like any design, of course).

I think the underlined text makes it obvious enough that the rest of the banner is not clickable though, and from the round of feedback we had internally it seems like others agree, but we might need more opinions here though.

[kaishin]

I think we lose a bit too much of the nice orange "pop" here though, although some might argue that it's too much at the moment, so I guess this is subjective (like any design, of course).

That's fair. Putting this temporary banner aside, using the brand color as background is something we should be careful about going forward, as the color will likely have more prominence in future redesigns of the landing page, which will clash with other elements vying for attention.

[mattmassicotte]

Thanks for the feedback! Just to clarify; do you mean the first one or @kaishin's suggestion? 🙂

I like the concept of the banner in general, but I do personally prefer the subtly of @kaishin's design. However, I completely trust your judgement here!

[alexandersandberg]

Thanks! Will try to get some more opinions on this 🙂

[0xTim]

Yeah I prefer option 2 as well

[federicobucchi]

I prefer option 2 (this one)

In general I am always hesitant about red / orange in banners (because it denotes a warning / something critical). I know this choices where made using the "Swift orange" etc.. but what about having a green or blue banner?

Again, I am ok even going with this proposal, just checking if we could explore a more "success" banner color.

[alexandersandberg]

Thank you everyone for your feedback! Much appreciated! I put together some more ideas based on the above discussion. Let me know what you think!

Personally, I like the faded Swift-orange the best. It's close to @kaishin's suggestions, but using the orange color for the text as well. I would have to double-check the color contrast ratio here to make sure it's accessible, but I think it will work.

The faded link color (blue) one is also nice, but the hue in dark mode is a tad too bright. We can adjust that though.

Faded Swift-orange

Faded link color

Link color

[0xTim]

I still think the faded orange is my favourite, if not the faded blue.

[kaishin]

Great work! I see no issue with the blue whatsoever, but it might be safest to stick to orange for now until we define some color roles later on.

[alexandersandberg]

I updated the preview with the faded orange banner (had to tweak the colors a bit in light mode to increase contrast), as well as creating a second preview for the blue variant.

We do use quite a lot of blue on the website if you click around, so the blue one would also be "on brand".

Orange: https://alexandersandberg-swift-org-banner.netlify.app/ Blue: https://alexandersandberg-swift-org-banner2.netlify.app/

(Please check out both light and dark mode in both previews.)

[daveverwer]

Orange: https://alexandersandberg-swift-org-banner.netlify.app/ Blue: https://alexandersandberg-swift-org-banner2.netlify.app/

Just to add one more voice. I think either of these work, but I prefer the faded orange.

[shahmishal]

Orange: https://alexandersandberg-swift-org-banner.netlify.app/

+1 on orange

[federicobucchi]

I like better the faded orange, but, I would go with blue because of my point of view here: https://github.com/apple/swift-org-website/pull/722#issuecomment-2166404194

[alexandersandberg]

We have another vote for orange from @hborla as well, so let's go with that one as most of us are leaning towards it.

We can consider other variants for future banners when we have a bit more time to think about it, as @federicobucchi has some great points about avoiding "warning" colors for it.

[alexandersandberg]

@swift-ci please test

[alexandersandberg]

@swift-ci please test

[shahmishal]

Thanks @alexandersandberg!