Internet.nl Website redesign

Redesign requirements

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.).
- #1054
- #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.

Design ready to include video's and images, e.g. see https://sikkerpånettet.dk/faqs/dnssec/.
A clear :information_source: or :warning: 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)
#1404
Use favicons of domains in test reports and HoF for Hosters

Note this is a standard compliance tool not a security scanner/tool (e.g. do not use :lock: 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.

HTML5 (work in :fox_face: 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/)
- #1384

E.g. see https://www.w3.org/WAI/tutorials/page-structure/labels/ :

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

No unneeded JS / modern standards:
- #1238
- #1249
- #1250 (this is not about the ImageCheck and alt.css!)
- #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/

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)

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)

Jan 26 '24 13:01 bwbroersma

When mail-tester.com is mentioned for inspiration, I'd like to also mention https://www.dmarctester.com/.

Feb 15 '24 10:02 mdavids

When redesigning the UI, we should also address #1304

Mar 05 '24 12:03 baknu