Tl;dr: The page listing past Stack Overflow events has some design issues (some accessability-related), and I think it might be worth updating/redesigning at some point. I also included a sample of what it could look like.
Design
Here's how the past events page looks like in the different modes.
| Light | Dark, high contrast | Dark | Light, high contrast |
|---|---|---|---|
 |
 |
 |
 |
There's a handful of issues there:
- Descriptions are difficult to read in dark mode, regardless of the contrast setting
- In every mode, the No photo text lacks contrast
- In dark mode, the No photo text acts as if it's light mode. In
<div class="-logo">, there's abackground: hsl(210,8%,95%)and in the<span class="-empty">, there's alsobackground: hsl(210,8%,95%), which I presume is the issue. Having an alternate background color as a placeholder seems reasonable, but ideally it should match the selected theme. - The current/past switcher is lowercase, which is inconsistent with the tags page and the questions page
- The white/grey border around events has an unnecessary high amount of contrast in dark mode
- While they are consistent within this one page, the dates don't follow the SO Grammar and Mechanics guidelines.
Broken No photo text
Also, the No photo text is sometimes broken (escaping the box). This is somewhat worse on mobile.
Improving the links
The event links could be improved
- Some are dead
- Some lack
https://(and it's supported) - The test event should probably be updated to
https://example.com/, per this MSE post
For the links in general, I'd suggest one of the following
- Use
https://links to the Wayback Machine - Replace the existing links with
https://where possible, and replace any dead ones with Wayback Machine links. If any go away in the future, cross that bridge when we get to it.
I prefer the first option, as it's for past events anyway, but either would work.
Redesign proposal/sample
Due to the number of potential changes here, I suggest the page gets redesigned instead of trying to address these one at a time.
Here's my proposal for a redesigned version, in both light and dark mode
These are the changes I've made (and I'm open to sending more from the sample I made if it'd be helpful)
- Changed the title to not reference current/past events, as there's a toggle to indicate it. I've made "events" lowercase. It's debatable if this is correct, considering the
/questionspage uses All Questions, but I personally prefer this - Changed the capitalization of the current/past switcher
- Updated the description. I added a sentence at the start, simplified the final one, and removed quotes around the badge name
- Redesigned the Past events section
- Changed the borders
- Changed the dates format to follow the SO writing guide
- Unbolded the dates
- Added a more accessible No image text*
- Used the default font color
I've left links out of my design proposal, but one option is to keep the titles linked. Another would be to add a link at the bottom, like Learn more. If you do that, I'd suggest using an <a> element with button styling rather than a <button> to allow the user to choose how they'd like to open the link (new tab, new window, etc.).
*Arguably, Empty states should be used, considering "Empty states are used when there is no data to show." (source). I opted not to due to difficulties getting the SVG(s) working. That said, it might be worth exploring.
Could that page get a design upgrade?
