Launch CNSC Transparency Report

[thetwopct]

Workflow

PR

IMAGES

• [x] Upload images to production and pull in image ids
• [x] Check correct images being used to Figma
• [x] Lazy load images
• [x] Alt text is descriptive
• [x] Image dimensions w x h

LINKS

• [x] Add all links where needed
• [x] Check anchor links
• [x] Broken links
• [x] Set title text on links

TEXT

• [x] Check max widths match Figma
• [x] Copy and paste text in spell checker, look for mistakes
• [x] Check brand spelling, capitals, + not and/&. KubeCon + CloudNativeCon.

CONFORMANCE

• [ ] Run through accessibility checker
• [x] Run through W3C checker
• [ ] Browser Testing - last 2 versions
• [x] Check Lighthouse score for any other issues

GO LIVE

• [ ] Merge
• [x] Add Social Share image / report cover
• [ ] Post preview link in Slack/Git issue
• [ ] Post final permalink link in Slack/Git issue

[thetwopct]

PR

Changes: (FYI @bpipalia-aragona)

• Updated the hero background image to be a PNG not JPG (JPG was fuzzy and low quality)
• Adjusted how the hero background image sits on mobile
• Logo in hero was too big on 320px mobile
• Replaced D&I Gold logo to an improved SVG
• Fixed D&I grid layout. You should not need to use display:grid to setup your own grid. Use lf-grid to set site-wide grid defaults.
• Fixed some typos - CloudNativeSecurityCon and Kubecon + CloudNativeCon are two separate events.
• Fixed some spacing around sponsors so the spacing is equal between elements
• Switched out YouTube embed thumbnail for high resolution webP version
• Links in Quotes need to be visibly links to pass WCAG
• Checked and amended some alt text - when an image has lots of text info in it, just repeat the info in the alt text.
• get_svg( XXX, true ) inlines the SVG, useful for performance, but do not use on large SVGs.
• Removed some redundant classes from copy paste. Removed empty class="".
• I turned off this text-transform. This kind of catch-all leads to mistakes matching the design, and in this situation caused an issue with quotes, and was not needed for any other markup on the page:

h1, h2, h3 { color: $cnsc-na-23-blue-900; // text-transform: uppercase; }

To Discuss:

1. There was a change of how the CSS is loaded - prefetch to preload. We used prefetch to stop FOUC. Not sure if it matters on this small report, but interested to hear your thoughts as to why the change.

[thetwopct]

Added more spacing to Hero area based on feedback from @GarethAcidWorks

Also had to re-export all photos in gallery at 3x not 2x as quality was low on HQ monitors

Removed " from text in quotes

[alanglois-aragona]

@thetwopct thanks for all your feedback. Looks like we still have work to do on our end.

I do want to touch on a few points specifically:

1. We are used to exporting images @ 2x. We find that's a good compromise between quality and file size, but we will start exporting @ 3x as you mentioned. The JPG vs PNG for the banner background was a mistake and I didn't catch it in my internal review.
2. For things like spacing, SVGs, and ALT text we use what's provided to us. If we don't have something we look at other reports to see what was done in the past. During last weeks meeting with Kristi it was confirmed that we will follow the design to the pixel and all images and their alt text would be provided to us.
3. As for changing the CSS from prefetch to preload, we did that because we ran the page through Lighthouse and it suggested we do that. However, if prefetch is the preferred method we'll keep it like that going forward.

[thetwopct]

@alanglois-aragona

1. No problems. I think I put in my first email use 3x and not to worry about sizes of the file as we have ShortPixel to handle downsizing and optimising and srcset to handle delivery.
2. Sure, the spacing is not always bang on due to the complexity of moving whole sections of figma just to align something, so some common sense needed upon implementation. I didn't really see any issues here anyway. "Design to the pixel" is great, but in reality, we need to apply common sense web checks i.e. accessibility, colours, consistency, performance. As these reports get larger (these last two have been small) these things becoming increasingly important.
3. OK. We run every report through Lighthouse / PageSpeedInsights and I've never seen that feedback. But we get a warning in console when using preload 🤷

I just pushed a small change requested by @GarethAcidWorks and I'm gonna merge this in to production

[thetwopct]

The report is merged, public preview link while in draft:

https://www.cncf.io/?p=84436&post_type=lf_report&preview=1&_ppp=8f51f2c068

Will track release/publishing in workflow.