Feediator Website Validation
by John Vincent
Posted on August 12, 2017
This document discusses validation issues for the www.feediator.com
website.
It references the Website Validation Reference
Using the Website Validation Reference, the following were the issues found and their solutions.
Check for Vulnerabilities
Snyk reported no issues.
Favicons
For details, see Using Favicons
Ran the Favicon checker for www.feediator.com
Web App Manifest
For details, see About Web App Manifests
No additional issues found.
Meta tags for search engines
Changed
meta-title
meta-description
meta-keywords
for all pages.
Meta Tags for Google, Facebook and Twitter
For details, see Configuring Meta Tags
Used Facebook Sharing Debugger to test https://www.feediator.com
All tests passed.
Used Twitter Validate meta tags to test https://www.feediator.com
All tests passed.
Check Browser Caching
For details, see Browser Caching
Ensure browser is caching certain resources.
Has maxage = 0
Note the static resources are being served from the Express server, not from Nginx.
config/middleware.express.js
changed
app.use(express.static(path.resolve(__dirname, '../public')));
app.use('/assets', express.static(path.resolve(__dirname, '../public/assets')));
to
var options = {
maxAge: '90d'
};
app.use(express.static(path.resolve(__dirname, '../public'), options));
app.use('/assets', express.static(path.resolve(__dirname, '../public/assets'), options));
Page Speed
Go to Google PageSpeed Insights
www.feediator.com
Scores
Mobile: 93/100
Desktop: 97/100
The only issue is
https://www.feediator.com/assets/css/home/styles.css
Varvy SEO Tool
Enter each URL and test.
Clean up any issues found.
- If modified Since
Odd finding. Postman
Get on https://www.feediator.com
does indeed not return the Last-Modified
property. Also shows there is no caching
Cache-Control →public, max-age=0
Postman
Get on https://www.feediator.com/assets/css/home/styles.css
returns the Last-Modified
property.
Postman
Get on https://johnvincent.io
returns the Last-Modified
property.
Express server would need to return the last-modified
property, which assumes it knows. However, it realistically cannot know as the Html is not static.
Decided to leave it.
Varvy Speed Tool
Enter each URL and test.
Clean up any issues found.
- JavaScript not minimized
assets/js/home/home.js
Minimal impact. Decided to leave it.
Varvy Mobile Tool
Enter each URL and test.
Mobile friendly: 100
Mobile Speed: 91
All tests passed.
HTML Validator
- Stray start tag head
main.hbs
had the extra code. Removed it.
<nav .... role="navigation">
Removed role="navigation"
*<main role="main">
Removed role="main"
Bad value contentinfo for attribute role on element
home.hbs
had <ul ... role="contentinfo"
Removed role="contentinfo"
CSS Validator
alpha(opacity=85)
is an unknown vendor extension.
Problem is in _header.scss
, calls a mixin @include opacity(0.85);
.
The mixin
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
The trouble is filter: alpha(opacity=$opacity-ie);
Code is not helpful and so I removed it.
--cover-min-height: 100px}
Removed the code.
Usability Checklist
Review all pages with this checklist.
Web Accessibility
Web Accessibility Evaluation Tool
1 alert, p should be h?
Changed
<p class="info">Designed for your reading pleasure</p>
to
<h2 class="info">Designed for your reading pleasure</h2>
No css changes needed.
Check Google Fonts
For details, see Google Fonts and Google Web Font Loader
Check HTML for ARIA
For details, see HTML ARIA
Check HTML for Microdata
For details, see HTML Microdata
Verify each URL with Google Structured Data Testing Tool
Review HTML5 Semantics
Useful HTML5 Semantics Guide
Review your HTML5 Semantics
Verify each page with Test HTML5 Semantics
Lighthouse
To run Lighthouse
- Open Chrome
- Enter URL
- Plugin Icon (top right)
- Generate Report
Test https://www.feediator.com
Accessibility
Background and foreground colors do not have a sufficient contrast ratio.
Odd as same color and background colors are used for other text in the intro section.
Change font-weight from 300 to 400.
Accessibility Engine is a useful tool
Provides a color contrast analyzer. Used this to set the foreground color #ffffff
to find a background color close to the original primary color #1f8dd6
which passes the contrast test.
Settled on #105B8E
This fixed the problem.
Progressive Web App
Needs a service worker etc.
This is not a Progressive Web App and so it doesn't need service workers.
No changes.
www.feediator.com
93: Performance
73: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO
Check your Libraries
Ensure you are using a cloud version.
Look up your libraries
Review Application
- set focus (.focus())
- prevent double submits
- ensure image has alt tag
- review icons and images - can they be sprited?
- Using SVG?