Welcome to Guidelines

cancel
Showing results for 
Search instead for 
Did you mean: 
Need help?

Community SW Evaluation: MS Edge: MS Page Analyser

Red Carpet

Community SW Evaluation: MS Edge: MS Page Analyser

I have tried a few times in the last few weeks to post this.  Each time the Spam Flood Control Steps in and screws everything up.  So Here goes again.  Let's hope it works this time.

The "Page Analyser" facility evaluation run tests to see how the Community Software complies with "best practice" webpage design and modern standards. Surprisingly, the Community actually fares very well ---- certainly better than one other major Forum available in SA. Here are the results:

Web standards
    Use CSS fallbacks

    Incorrect use of prefixes

   Keep your javascript libraries current

   Use HTML5

These aspects are all positive for the Community Software. Howver the next one fails and some of the exampls are listed. There may be more examples, but for the code writers, this should be sufficient to draw their attention.

X Detect features, not browsers
Use feature detection and avoid hardcoding for specific browsers. Browser detection leads to brittle code and isn't effective on modern browsers, which share similar user agent strings.

Access to window.navigator.userAgent
From /t5/scripts/A7FA3B015D631A94C0E37A15145BA073/lia-scripts-angularjs-min.js at 14:756
Access to window.navigator.userAgent
From /t5/scripts/A7FA3B015D631A94C0E37A15145BA073/lia-scripts-angularjs-min.js at 14:824
Access to window.navigator.userAgent
From /t5/scripts/24946F06BF8218FB8D07A7CD49
Access to window.navigator.userAgentFrom /t5/scripts/24946F06BF8218FB8D07A7CD49C9FB92/lia-scripts-common-min.js at 411:395
Access to window.navigator.userAgentFrom /t5/scripts/DCBE3B2A39FB07888AA6F63C0F4A7312/lia-scripts-body-min.js at 267:56
Access to window.navigator.userAgentFrom /t5/scripts/DCBE3B2A39FB07888AA6F63C0F4A7312/lia-scripts-body-min.js at 104:47

The next are again all positively evaluated:

Avoid conditional comments
Use a modern doctype
Accessibility

Here are a few issues that could be improved 
X Elements must have sufficient color contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

<div class="lia-slide-out-nav-menu-title" ng-non-bindable=""> Browse </div> Element has insufficient color contrast of NaN (foreground color: #0NaN0NaN0NaN, background color: #00508f, font size: 0.0pt, font weight: normal)
<input name="messageSearchField" title="Search" class="lia-form-type-text lia-autocomplete-input search-input lia-search-input-message" id="messageSearchField_0" aria-autocomplete="both" type="text" placeholder="Search all content" value="" autocomplete="off"> Element has insufficient color contrast of 1.00 (foreground color: #ffffff, background color: #ffffff, font size: 13.5pt, font weight: normal)
<span class="local-date">on</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-time">2018-08-06</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-date">on</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-time">2018-08-01</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-date">on</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-time">2018-07-31</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-date">on</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-time">2018-07-30</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-date">on</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<span class="local-time">2018-07-02</span> Element has insufficient color contrast of 4.15 (foreground color: #7b7d7b, background color: #ffffff, font size: 12.0pt, font weight: normal)
<a class="lia-link-navigation view-all-link" href="/t5/forums/recentPostspage">More Topics</a> Element has insufficient color contrast of 2.53 (foreground color: #ffffff, background color: #00aeef, font size: 12.0pt, font weight: bold)
<a class="li-common-scroll-to-link" href="" ng-click="scrollToPosition()" ng- bind="textKey | translate">Top</a> Element has insufficient color contrast of 2.97 (foreground color: #ffffff, background color: #959695, font size: 0.0pt, font weight: bold)
<p>© MultiChoice Support Services (Pty) Ltd</p> Element has insufficient color contrast of 2.97 (foreground color: #959695, background color: #ffffff, font size: 10.5pt, font weight: normal)

X Data tables should be marked up properly
Ensures data tables are marked up semantically and have the correct header structure

<table class="lia-list-wide">

X Zooming and scaling must not be disabled
Ensures <meta name="viewport"> does not disable text scaling and zooming

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta> tag disables zooming

The next few are again within standards

Performance
Encode static content
Minify static files

Mobile web standards are not what they should be:

Mobile web
X Use responsive design
Use CSS media queries to tailor your site to a specific range of screen sizes while still supporting less common display ratios.

your css (either files or inline) does not use any media queries your link tags does not use any media queries

X Define platform icons
Add platform-specific icons for users who pin your site to the home screen of their mobile device.

Provide iOS icons by adding link tags, like <link rel="apple-touch-icon" href="youricon" sizes="57x57"" />
Provide Universal Windows Platform (UWP) tiles by adding meta tags, like <link name="msapplication-square150x150logo" content="yourimage" />
 

- Use meta viewport

Octo LNB; 2 by 2x4 MS; 2 by ES 5-2; Dedicated PSU for LNB, ES's, MS's; HD PVR 4P x 2; Explora 1; DSD 660; FSM