Issues with popup - contrast, usability, history

[andinus]

On dark mode the contrast is quite bad, seems good on light mode. Here is a screenshot:

• Browser: Safari, Firefox

Regarding usability, most of the time I open the docs website from a fresh browser, i.e. local storage is wiped. My primary browser does it after every restart, so using the docs site has one extra step now, to close the popup - distracting. Of course, this is all because I don't persist local storage in the first place.

It is a good idea though. Can we think of a less distracting way? One idea is to add a distinctive banner below the navbar (screenshot below) - on clicking read more, ~it can either expand in place to show the announcement or show it in a popup. And the banner also disappears once the user has clicked read more.~ (Since we have an announcements page, that link can open that and there can be a 'x' button on that banner to suppress it)

~Also, if the visitor accidentally closes the popup, the only way to see that announcement again is visit the page in private more, but they might not realize that. Maybe we should add an "Announcements" page that lists previous announcements.~

I see that this page already exists, I got the link from Rakudo Weekly. I looked at the navbar for link to the announcements page.

[finanalyst]

@andinus Thank you for the feedback. I agree these are reasonable ideas! In fact I asked similar questions during the discussion about the design. The choices were made for pragmatic reasons because I did not have enough time to sort out all the compatibility issues.

• The website uses the Bulma CSS framework. The guys at Bulma have done a great job to ensure websites built with Bulma are responsive, work on all browsers etc. So it made sense to use a Bulma component, namely modal panes, to provide the popup. We use modal panes for the search options, so it was just a matter of cut and paste to get the modal working for announcements. I agree it is a bit distracting the first time when you expect the site to act in a different way. I hope that users will adapt because it takes a single click to remove the popup, and it is not repeated.
• We rejected a simple js alert window because that is not so easily made cross-browser consistent. (Not easily; possible, but I dont have the ability to experiment and test on all platforms)
• A less intrusive place for announcements would be a small dismissable pane somewhere (you have mentioned one place, which I like, but it could be in other places).
  • The problem is that for me to get the responsiveness and cross browser consistency, I would need to experiment with different CSS ideas, but I dont have the resources to test lots of browsers/OS/form factors. (Do I need to say I hate the fiddly nature of writing CSS - it took a day to get a single toggle to work better - and the sharp responses I get when my own tastes jar with the tastes of others?)
  • Also the modal panel easily allows for any embedded HTML, headings, lists, images, etc. Not sure without testing whether this is as easy as a simple div.
• I agree that the CSS styling of the popup in dark theme is sub-optimal. Personally, I don't like dark modes (its just a taste thing), so I do not trust my own tastes to tweak things to make them better. Far better would be to get some ideas from people who do like dark themes (also did I mention how much I hate CSS tweaking).
  • There is a fairly simple way to tweak the pop up CSS for the announcements modal. It is all generated from the SCSS contained in the Website/plugins/announcements directory. The dark theme colours can be changed without changing the light mode colours. Tweak the colours ( or may be make the background grey rather than white). Create a PR.
  • Actually, there are quite a few dark-theme problems. For example, in light theme, if you hover over buttons and links, you get a dark pop-up with a tool-tip. These are invisible in dark theme. I don't know (as in spend the time researching a better way) how to fix this! Help would definitely be appreciated.
• I dont know of any mechanism that can retain state (whether the user wants or doesnt want popups) when a fresh browser is used. The use of a fresh browser is to ensure there is no state! So the question here is to determine which should be the default state - announcements or no announcements. Both are possible, and I'm pretty certain that it is a matter of individual preference. Here are some considerations.
  • We have provided a way to remove announcements for those that don't like them, but it relies on a non-cookie way of keeping state (local storage)
  • It doesn't seem to me based on anecdotal evidence that most people use a fresh browser instance like you do to avoid state storage. I would appreciate finding out how may users do this, and why. In future, I would like to take this point of view into account.
  • Of course, your suggestion of making the popup less intrusive might be an acceptable compromise - which puts us back in the discussion above.
• Finally, there is another consideration hinted at by your post, and that is: where to put the link to the announcements page. I have put it in the Introduction tab, Beginning section. @lizmat has suggested it would be more logical for the link to be on the opening page instead - as in your image. (Or both) That is a relatively easy change, and one that will be made in due course, unless there is some prior community feedback.

So I think that the issues you raise are interesting and touch on a basic Raku community goal of making things inclusive to everyone. We are a community, so community feedback is needed to resolve some of these issues

I hope these considerations indicate why this new functionality is the way it is at present, but also that these features are not set in stone and we welcome ideas and suggestions for change.