Web interface redesign

[halderen]

• Special class on body html element [done, needs checking]
• Each page might have a separate html title, depending on content [problematic].
• Design menu item highlighting, anchoring and special attribute class on selected item. [george]
• Use okay/fail shields appropriately. [george-details]
• use consistently H1/P on intial tagline and SECTION/ARTICLE hierarchy.
• Translate CSS codes and comments are sometimes to English and rename some more appropriate.
• Make sure all files use LF line endings and all text files end with an line break.
• Language switch option do not show current language [??] and correct the URL of the language switch without breaking the stay on the same page switching [??] [george]
• Content of the hall of fame leading text still needs to be modified.
• Make sure truncation of long domain names is still proper on the hall-of-fame page.
• Do not show dateshields on article overview (inlay and page)
• Blogs do not have a date yet. This needs to be introduced.
• Repair and do away with generation of html code. We need not just the incorrect html, but the HTML generation to be changed.
• The production of HTML code also causes the connection test to be broken. The connection test makes deliberate use of a separate domain to use HTST tests. This was known to make future development more difficult, but with generated javascript this really breaks as javascript is now allowed to goes cross domain (of which the HTST makes use).
• There is a spare div html element on line 181 of 56-websitetest-resultaat-1001-procent.
• Check for valid HTML
• The 404 page has not been embedded yet in the Apache configuration, drop the image, make a translation.
• The existing FAQ has links to some pages (e.g. internetstandaarden). This will break. How to handle this?
• Design issue; the h2 headings in user-included content (e.g. news articles are relatively close to the content below it.
• Terms page, uses ul and ol html lists for example in "beveiligd" and "cookies", etcetera. It seems that in the redesign there has not taken this in account as there is no formatting of these list items, not even bullets.
• The inclusion of the bloggers author photo still needs to be included.
• The blog items needs to be transformed into "normal" news items.
• The rendering/cutting of words on newlines of article names in the aside bar/news index on normal news pages does not work well. E.g. DMAR C.
• The original flow of the website has the news menu go into the first news item. This flow has the advantage that people normally are interested in the most recent news article. Placing news items one more click deeper is seen as a user burden.
• Add in the footer a reference to the partners page.
• The FAQ where multiple pages. How to convert them into knowledge base single page. Content fist as per ui desingers or structure first to get at least something.
• There is a seperate text that optional needs to be included in the website result pages in case the test scores 100% and the test is to be included into the hall of fame. This needs to be implemented still. [george-details]
• Quick link in case or redirection and/or test mail site. [george-details]
• The aside block in the about page is currently not translatable. This is not needed for a nederlands/english site site, but this will be needed for polish.
• To be implemented still is referencing the right shield in case of an failed or passed test. Now always a failed shield is used. However the next point applies; [george-details]
• There is a shield image/icon for passed, check and failed tests. But not for "informational" messages, nor for tests that have failed to execute. [george-details]
• On the result page of a website test, for websites that have multiple servers, the detail messages used to display different sections, one for each involved webserver. E.g. it showed "Webserver: 2a04:b900::1:0:0:10" and "Webserver 192...",etc. There is no account how to handle this information in the redesign. [george-details]
• The text in which it is stated that the content was originally written for a portal does not display nicely.
• The text in the section "Open Internet NL" in the about page was not a part of the original content". If that needs to be part of that page it needs to be included in the content.
• News articles overview page, shows some teaser text differently than others. E.g. the first two are bold, the other ones are not. This is probably a problem in the content
• When a test is running (Bezig), there are no icons defined for when (a part) of the tests have been received. In any case there are no icons available for this purpose.
• For the testing/test result pages, it is assumed we can display the web- site domain name in the title bar. I have my doubts whether special characters (foreign languages) are that acceptable in the title bar and/or html title argument. We currently rely upon HTML character codes. This may be a redesign issue. [george-details]
• In case a test fails to execute at all, there is no feedback. Partly because this is not handled well in the feedback, but also because this has not been forseen in the redesign. There is no icon for this result, and the page always forwards to the result page (whereas before the page would not get its forward link activated).
• The hall of fame teaser text ends with a URL, which optically contrasts less nicely with the list below the teaser text.
• For testing purposes, I've added a 45 second delay before test continues to next page, also added a random delay for the individual domain tests to return a completed result. This makes it possible to review results. This needs to be removed before merging into main code line.

[gthess]

• Re-rendering the page when a domain is invalid currently shows no information text and css breaks. [george]. Fixed in new page

• Use okay/fail shields appropriately. [george-details]

• Repair and do away with generation of html code. We need not just the incorrect html, but the HTML generation to be changed.

• The 404 page has not been embedded yet in the Apache configuration, drop the image, make a translation.

• ~~When a test is running (Bezig), there are no icons defined for when (a part) of the tests have been received. In any case there are no icons available for this purpose. Icons are there but not used yet.~~

• In case a test fails to execute at all, there is no feedback. Partly because this is not handled well in the feedback, but also because this has not been forseen in the redesign. There is no icon for this result, and the page always forwards to the result page (whereas before the page would not get its forward link activated). [partially solved - no redirection to the results page but use the old icon]

• ~~For testing purposes, I've added a 45 second delay before test continues to next page, also added a random delay for the individual domain tests to return a completed result.~~ Delay now set to 15 seconds. This makes it possible to review results. This needs to be removed before merging into main code line.

• removal embedded javascript [berry]

• statistics on index page

• on index page: no target link for "uitleg over test" [berry]

• not all pagetitles are properly translatable, when set from python scripts.

• disabled javascript connection test link "Controleer of de test gereed is." does not work

• erronous html: /domain/xxx/xxx/: duplicate attribute class: class="hidethis" ari [done]

• erronous html: /domain/xxx/xxx/:attribute currentaction not allowed on element button [done]

• erronous html: /domain/xxx/xxx/:duplicate id h3 class="panel-title" id="result-sitednssec-1 [done]

• erronous html: /domain/xxx/xxx/:end tag section seen, but there were open elements

• erronous html: /domain/xxx/xxx/:unclosed element div class="title-and-explanation [done]

• erronous html: /domain/xxx/: Element title must not be empty

• erronous html: /domain/xxx/: Element br not allowed as child of element ul in this context [done]

[halderen]

Final stretch redesign issues

1. It is confusing that the test icon for the web-site is red, because this color is also used to signal failures (red crosses and shields).
   • NLnet Labs: redesign issue
   • Bart: will discuss with designers
   • NLnet Labs: not received instructions whether to be changed or not (so what was the result of the conversation with the designers?) Icon looks to be changed now.
2. Instead of a percentage like 80% is is clearer to indicate 80/100.
   • NLnet Labs: I have the distinct impression that this issue is totally about people that do not know what the percentage sign means. Per cent means out of a hundred. So if you say 80% it means that 80 out of 100, or 80 / 100 in short. With a subtle difference that with a litteral 80/100 in stead of 80% you show through that the sample size would actually be a 100. This isn't really true, it is scaled.
     In the end, I am willing to accept this as a design issue (if explicitly indicated and accepted by steering cmtee), but this is something Open/NLnet Labs doesn't feel spending time on.
   • Bart: Well, please make it a GH issue so we can discuss this in steering cmtee. Seems not very important to me. BTW others like Google are using "80/100":
   • NLnet Labs: Issue created: #191
3. The test-boxes on the homepage are pretty high. Can they use up less vertical height. (Perhaps we should omit the labels "Duurzaam bereikbaar? Beschermd tegen omleiding? Beveiligde verbinding?)
   • NLNet Labs: Design issue. Dropping the labels is intrusive change, which we don't like going back-and-forth. We should then also remove the labels from the content entirely.
   • Bart: Okay. Is it true that the three boxes become less high when we use a shorter 'two line' text in the mail test box.
   • See next issue
4. The text "Uitleg over test" is located on the homepage lower in the mailtest box than in the boxes of the other tests.
   • NLnet Labs: This is as per design. In the design the text "Uitleg over test" immediately follows after the text above. It that text is longer, taking up more height, then the subsequent text will end up lower. It is just a coincidence that the text for the connection and website text take up the same number of lines. Either a design change or not accepted.
   • Bart: If we change the text to "Duurzaam bereikbaar? Beschermd tegen spoofing? Beveiligde mail-verbinding?" in stead of the current "Duurzaam bereikbaar? Beschermd tegen omleiding en mail-vervalsing? Beveiligde mail-verbinding?" This would also solve this issue, right?
   • NLnet Labs: done, still if you make the window width below a certain threshold the connection test box will end up taking less height than the other two.
5. The dates were missing at the news items.
   • NLnet Labs: It was agreed not to use the date-shields. Hence not accepted as bug.
   • Bart: Why and when did we agree not to do this? It was part of the redesign on nerdnerd.nl all the time.
   • NLnet Labs: see above issue list and as discussed with steering cmtee.
   • Now partially (!!!) also done on designers website.
6. Please use the busy icons as visible ... As well as using the icons ... icons ok and test failed
   • NLnet Labs: We'll treat this is a design change, though it shows a problem on how design changes are forwarded to us. The busy icon was picked up by us earlier and apparently changed. The other two icons also changed on a later date. Although we'll accept the icons we need to make a warning here we think these are not good icons to use. These icons are more-or-less icons indicating that a test result was good or bad. This is not the purpose of these icons. They are meant to indicate the test itself could execute successful or running the test failed itself. We think the icons do not represent this.
   • Bart: Well the intermediate screen on the current Internet.nl also shows the end result icons (that is V or X) as well. So the new design seems consistent with the former design in that respect. The designers have provided a round icon with a thunder for when the execution of a subtest (like DNSSEC) fails. See: http://internet.nerdnerd.nl/template/52-websitetest-mislukt-en-geslaagd.php Besides, they made a grey shield for when a sub-subtest (like HSTS) is not relevant. Do we need an icon for when the execution of a sub-subtest fails? Or is that a not-existing scenario?
   • NLnet Labs: there is some disagreement with us with whether the icons are good or not. One opinion is that on this page one should not display any result outcome. My personal confusion was because the accompanying text is plain wrong.
   • NLnet Labs: adopted icons.
7. Are we using the following 404-page?
   • Like indicated on the steering cmtee meeting, yes we do, but when the system has debug options turned on it will not be shown. For next meeting we'll turn off the debug options to have this shown, as well as remove any delays in reloading.
   • Bart: Ok
   • NLnet Labs: Removed django option temporarily until steering cmtee meeting.
8. "Certificates' chain of trust" should/do not contribute to the score but do have a red shield:
   • NLnet Labs: Accepted as bug, unclear where the problem lies, but the visible result is in fact wrong.
   • Bart: Ok.
   • NLnet Labs: Resolved, but note that for historic results (on dev site) this will still show the wrong shield.
9. HTTPS not enforced (no HTTPS-redirect to the same domain or no HTTPS-only) is scored in the result but has an orange shield
   • NLnet Labs: Rejected, this is a historic test result where still this result was not included yet in the result. This is a bit due to the fact that there has never been enough attention towards how to handle historic results and the deflation of score when tightening scoring.
   • Bart: Clear. Did not realise this was a historic result. I think this way we do handle historic results in an appropriate manner
10. The gray icons for "test not relevant" and "test error" are still to be added.
    • NLnet Labs: Design issue, in the beginning these were all orange icons. The received gray icons are however not good as reported earlier due to resizing/aligning issues. We'll passively wait for new icons.
    • Bart: I will (again) check with the designers.
11. Stats pagina's werken niet: https://dev.internet.nl/stats
    • NLnet Labs: These were not in the design and the graphs will most likely not fit nicely. We'll accept making the graphs work again as bug, and fit in the graphs somehow but do this based on our own insights independently. Any changes to beyond making it functionable as-is we'll consider outside of the current scope. Bart: BK: OK. BTW I noticed a difference in the number of HoF on the stats page compared to the number in the actual HoF. Shall I log an GH issue for this?
      Nlnet Labs: issue still open, on the HoF see fist item additional list
12. Awstats username and password are visible on ... Awstats isn't working anyway. I question whether we want this anyway. Have seldom looked into it.
    • NLnet Labs: Awstats come free with having Apache logs. Its use is limited, but for cross-checking the number of visitors and page views it is a handy tool when the other statistics indicate an significant peak in usage. Then you can cross check this here. Other tools to analyze logs cost time to install and configure to get useful data, this one is just there for free. If you don't need it, don't use it. For the development site these statistics aren't updated, and because of this the username and password are shown. For production they are not.
    • Bart: OK. I will have a look into these stats again to see if these are usable in anyway. Just make sure Awstats is updated and not vulnerable :-)
13. The test boxes on the right site are not visible under IE11 (also earlier reported to George and he indicated to take this up in this sprint).
    • NLnet Labs: George indicated this probably is due to a fix made by us. As such we'll accept this issue as a bug.
    • Bart: Ok.
    • NLnet Labs: fixed.
14. Icon issues and patches: Paul should create the last fixes based on Georges and my feedback. I will just remind Paul on this.
    • NLnetLabs: Unclear which changes need to be ported. Made EXPLICIT working arrangements with Bart.
15. Statistics box homepage: The statistics box needs to be adjusted in accordance with the decision we made during last steering committee.
    • NLnet Labs: This was indeed agreed upon. Berry will make an GitHub issue out of this to track the agreed implementation.
    • Bart: OK. Could you also please update the other issues we decided upon last steering committee?
    • NLnet Labs: created issue #192.
16. Content structure: Current structure is not workable for Dennis and me as discussed with Ralph two weeks ago.
    • NLnet Labs: Sorry, but this isn't a "to do" as we foresee no change. We have reviewed and discussed, but do not see a problem with the content structure. It there is a lot of individual content items, there will be a lot of items, regardless of how it is offered. It is structured, but there is also some historic clutter, for which there have been clear instructions which items should be disregarded. Moving and removing the last 10% of messages which mostly relate to historic stuff isn't worth the effort in our opinion, as just disregarding the historic folders doesn't involve much effort and does not justify the huge effort for a migration script. Ultimately it is the steering committee that can decide to spend a significant part of this years budget for this, but I cannot make that decision.
    • Bart: I have discussed this many, many times before with you and Ralph. And you admitted that the current content structure is far from ideal. Because of the current structure editing content is a bit of a puzzle for Dennis and me. The website is planned to be translated in other languages and I expect this to be a big hindrance in keeping the content in sync and up to date. I believe it is time to fix this and make content editing more workable.
    • Issue discussed. Bart wants to make a proposal, we can see some small aids, removing outdated content, collapsing trees and hiding historic content. But all other changes are in our opinion very laborious and provide little result. Part of open-sourcing is to describe the content better. This is currently not in scope.

Additional list:

17. I noticed a difference in the number of HoF on the stats page compared to the number in the actual HoF.
    • NLnet Labs: Rejected. Display is 747, actual number of items in list is 747. No discrepancy.
18. remove debug delays
19. disable debug option
20. bring back (if possible) locator for labels?
    • NLnet Labs: mutualy exclusive option with disabling debug option
21. Update issues as previous time discussed with steering cmtee.

Unrecorded changes:

22. Please use the latest icons (animation, and result icons)
    • NLnet Labs: rejected as duplicate issue.
23. Please remove this oddly colored HR
    • NLnet Labs: This was explicitly added by George and Bart in agreement.
24. Use a unique name attribute for the emailtest input field (it currently is named url)
    • NLnet Labs: This is not an item for the designers. The name attribute is to be used by the back-end. They need to be unique per form, they are.
25. Do not use table layout for the retest section. links use a background image. The current code causes validation errors and cause unnecessary screenreader confusion.
    • NLnet Labs: unfortunate this talbe layout was a last-resort result as our changes were never carried into the design. As a result the divergence made it very hard to track down the way the CSS needed to be merged. The multi-day effort wasn't worth it. w3cschool reports no validation error on this style layout. It is old school, and should never be used nested. The problem was that the tweet message failed to lay out properly. We have now been able to reverse-engineer the change- at the cost of e.120 euro.
26. I think there needs to be more explanation in this testbox:
    • NLnet Labs: this is as per Bart-George agreement
27. I noticed that the removal of the date shields left the news overview looking rather unfinished. Have updated the CSS accordingly.
    • NLnet Labs: Reversed engineered the change.

[halderen]

Subissues resolved or promoted to full issues.