Website redesign

[bwbroersma]

Redesign requirements

Wish list

• Make testing and improving more fun!
• Modern look and feel.
  • It might be needed to use less branding colors, also the 3 colored test-icons , and can be modernized.
  • Hall of Fame animation?
• Better mobile experience.
• Implement modern standard (dark-mode, low&high-contrast, etc.).
  • Site design: support prefer-color-scheme #1054
  • Dark-mode version of Hall of Fame 100% Badge #1304
• Main task is updated HTML + CSS (and minimal JS), no major impacts / changes should be needed for backend and content, please see the current HTML templates:
  • front page,
  • test loading,
  • test results,
  • generic content: knowledge base, faq, hall of fame,
  • basic design (header/footer) should be usable for dashboard too.
• Current CSS and JS: https://github.com/internetstandards/Internet.nl/tree/main/frontend.

Nice to have

• Design ready to include video's and images, e.g. see https://sikkerpånettet.dk/faqs/dnssec/.
• A clear ℹ️ or ⚠️ that there also is a newer result for the domain (e.g. when watching test 2520648 which scores 97%.. while there is are more recent tests, e.g. test 2522841 which scores 100%).
• more modern CSS, e.g. variables (pretty well supported nowadays) for branding colors, so forks can more easily change some styles
• fix the overflow issues in the tech tables
• Discoverability / promotion of the dashboard
• Have some connection indication (e.g. a green/yellow dot for accessing the website via IPv4 or IPv6, HTTP/2 or 3, TLSv1.3)
• Idea: engage active users to improve their score #1404
• Use favicons of domains in test reports and HoF for Hosters

Non technical requirements

• Note this is a standard compliance tool not a security scanner/tool (e.g. do not use 🔒 metaphors).
• Result overview + detail option.
• Design leads to action / improvement (and sharing).
  • Sharing: technically an og:image / sharing image, maybe a few (see mail-tester under External inspiration) based on the percentage.

Standards compliance

• HTML5 (work in 🦊 Firefox, Chromium based browsers and Safari).
• Valid HTML and CSS:
  • pass https://validator.w3.org/nu/,
  • pass https://jigsaw.w3.org/css-validator/.
• No reliance on HTML/CSS that is marked as deprecated.
• Also fully functional without CSS (see: https://css-naked-day.github.io/)
  • Change Matomo script, remove visible HTML #1384

Accessibility (A11Y)

• AAA level: https://digitoegankelijk.nl/toegankelijkheid/en-301-549-en-wcag.
• Current situation: https://internet.nl/accessibility/.
• E.g. see https://www.w3.org/WAI/tutorials/page-structure/labels/ :

  <section aria-labelledby="name">
    <h4 id="name">Sub section</h4>
  </section>

• Printing styles (see current print styles).

Performance / Green / other / etc.

• No unneeded JS / modern standards:
  • Use <details><summary> instead of accordion.js #1238
  • Replace JS make_progressbar by CSS keyframes and support prefers-reduced-motion #1249
  • Replace imagecheck JS with prefers-contrast CSS #1250 (this is not about the ImageCheck and alt.css!)
  • Load Text fragments polyfill and/or fix accordion js #1237
  • is clear.gif plus the ImageCheck still needed / can it be removed somehow?
• No external fonts / free open font.
• No inline styles or scripts (because of CSP requirements).
• Work in iOS lockdown mode:
  • Known stuff that does not work:
    • modern image formats (WebP / etc.),
    • custom fonts (so especially do not use font icons for menu's).
• For reference performance now:
  • Internet.nl currently scores 98 (desktop) and 89 (mobile) for "performance" on Pagespeed. For "accessibility" , "practical hints" and "SEO" Internet.nl respectively scores 100 (both), 100 (both), and 100 (desktop) / 97 (mobile).
  • https://www.webpagetest.org/result/240310_BiDcZX_5HR/

Examples for inspiration

Other implementations of Internet.nl code

• top.nic.br (Brazil)
• sikkerpånettet.dk (Denmark)

Other testing sites

• https://www.hardenize.com/
• https://www.ssllabs.com/ (both server: https://www.ssllabs.com/ssltest/ as client https://clienttest.ssllabs.com:8443/ssltest/)
• https://securityheaders.com/
• https://hosting-checker.net/
• https://www.webpagetest.org
• https://observatory.mozilla.org/
• https://cryptcheck.fr
• https://http3check.net (using lsquic)
• https://browserleaks.com/tls (client test)

External inspiration

• mail-tester.com has a nice experience with 5 backgrounds based on the score (1, 2, 3, 4, 5).
• https://duckduckgo.com/ (scroll the page)
• https://geoffgraham.me/ has a nice minimal mobile top bar (also without going for the ☰ menu)
• https://www.dmarctester.com/ (hint from MD)

[bwbroersma]

The current design is done in Figma, it's not a public Figma file (yet). If it's public this will work to automate the image extraction: minvws/nl-covid19-notification-app-design#18.

[JasperKoopmanschap]

The design concept of Internet.nl was presented on 11 juni. The presentation slides are added in the adjustment. Feel free to comment with your feedback!

[mxsasha]

Combined remaining feedback

Some remaining feedback below from SR/BWB/BK. We see quite a few things were addressed already (nice!).

• We should avoid the use of lock icons to not further reinforce the idea that we are a security test (see Non technical requirements).
• If we end up putting people on the front page, it should be a varying set, or a group photo. Or, perhaps we should not use a photo of people/person at all, to avoid the complexities around picking the photo/person/people. Perhaps something abstract instead? We do like that it makes it a bit softer and more human.
• Area Extended is a commercial font (see "No external fonts / free open font" requirement, to clarify: free open fonts are okay. See for example: https://rsms.me/inter/).
• The email test does not require to have the full email address. Design concept of the email test box does not show an "@" before the input field, as current design does to encourage people to only fill in the domain ('data minimisation').
• Current design has www.example.nl and @example.nl as placeholder texts in in the input fields which seems more clear than "Vul hier je website in". (Btw note that the email test box in the design concept states "Jouw website-domein" and "Vul hier je website in".)
• As discussed yesterday, the usage figures now lack expressiveness. They are actually too large (and thus difficult to grasp) and too aspecific (over what time period?). Perhaps it would be better to display them in every test box and make them more specific (e.g., "1,573 tests run today" or "5,573 tests run this week").
• What are your ideas with the white (photo-negative) logo? It looks quite nice and clear.
• "Ik wil meer informatie over deze bedrijven >" --> "Ik wil meer informatie over deze organisaties >"
• We're not sure about the selection of icons for the first and last test. Perhaps we can consider a few different options to pick from.
• We like the rings in the background of some of the elements.
• As discussed, perhaps we should make the web test more prominent than the other two, to make it a more obvious path.

[JasperKoopmanschap]

Hereby a new version of the design concept where we solved a lot of the feedback.

• I changed the icons, what we can discuss further if those are the right ones.
• Also the font is changed to a free open font, so we won't have to pay for it later in the process.
• I changed the text of the placeholders and added some microcopy to the widgets. The microcopy will add an extra layer of convincing to the website visitors.
• The logo always needs a 'light' version, because when it has to be placed at a dark background, we have a light version.
• I also made a few options for the illustration/photo visuals, what we can discuss later.
• The design of the hierarchy of the widgets is something we'll work on at the further design process.

[mxsasha]

Notes from me, BK and MD:

• Area Extended font was replaced, but the two fonts mentioned still include Area Extended?
  Reaction: the slides above are outdated, the open font replacement of Area Extended is Montserrat which is licensed under the Open Font License.
• We're not sure what we feel is best for the illustration/photo, but appreciate the alternatives.
• The icons for the tests and in the illustration/photo have one overlap and two differences. Is that intentional?
• We're not sure yet whether these are the optimal icons for the three tests.
• We like the new label under the buttons, but maybe it should be a bit more prominent?
• Extra consideration from MD: on mobile it should be easy to reach all tests (in the current design the connection test is a long scroll away on mobile).