Open xianmin opened 6 years ago
https://validator.w3.org/nu/?doc=http%3A%2F%2Fen.xianmin.org%2Fhugo-theme-jane%2F Relevant w3 validator test result.
Thank you @maddovr ! I will fix these errors.
Error test on a random post. Moreover if you don't mind (while it's unrelated) I might make a PR with the italian localization later on! Thank you for your great work!
thedaviddias/Front-End-Checklist: π The perfect Front-End Checklist for modern websites and meticulous developers
How to use?
All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility:
Some resources possess an emoticon to help you understand which type of content / help you may find on the checklist:
Head
Meta tag
The next 2 meta tags (Charset and Viewport) need to come first in the head.
favicon.ico
, put it at the root of your site. Normally you won't need to use any markup. However, it's still good practice to link to it using the example below. Today, PNG format is recommended over.ico
format (dimensions: 32x32px).Minimum required xml markup for the
browserconfig.xml
file is as follows:rel="canonical"
to avoid duplicate content.HTML tags
lang
attribute of your website is specified and related to the language of the current page.[x] RSS feed:
If your project is a blog or has articles, an RSS link was provided.
[ ] CSS Critical:
The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between
<style></style>
in a single line (minified).<head>
. (Except the case where sometimes JS files are loaded asynchronously on top of your page).Social meta
Facebook OG and Twitter Cards are, for any website, highly recommended. The other social media tags can be considered if you target a particular presence on those and want to ensure the display.
β¬ back to top
HTML
Best practices
[x] Error pages:
Error 404 page and 5xx exist. Remember that the 5xx error pages need to have their CSS integrated (no external call on the current server).
[x] Noopener:
In case you are using external links with
target="_blank"
, your link should have arel="noopener"
attribute to prevent tab nabbing. If you need to support older versions of Firefox, userel="noopener noreferrer"
.HTML testing
β¬ back to top
Webfonts
[x] Webfont size:
Webfont sizes don't exceed 2 MB (all variants included).
[x] Webfont loader:
Control loading behavior with a webfont loader
β¬ back to top
CSS
<style>
tags or using inline CSS: only use for valid reasons (e.g. background-image for slider, critical CSS).Performance
CSS testing
[x] Responsive web design:
All pages were tested at the following breakpoints: 320px, 768px, 1024px (can be more / different according to your analytics).
[ ] CSS Validator:
The CSS was tested and pertinent errors were corrected.
[x] Desktop Browsers:
All pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
[x] Mobile Browsers:
All pages were tested on all current mobile browsers (Native browser, Chrome, Safari...).
[x] OS:
All pages were tested on all current OS (Windows, Android, iOS, Mac...).
[x] Design fidelity:
Depending the project and the quality of the creatives, you may be asked to be close to the design. You can use some tools to compare creatives with your code implementation and ensure consistency.
β¬ back to top
Images
Best practices
width
andheight
attributes on<img>
if the final rendered image size is known (can be omitted for CSS sizing).<img>
have an alternative text which describe the image visually.β¬ back to top
JavaScript
Best practices
.min
suffix).noscript
tag:<noscript>
tag in the HTML body if a script type on the page is unsupported or if scripting is currently turned off in the browser. This will be helpful in client-side rendering heavy apps such as React.js, see examples.async
or deferred usingdefer
attribute.<html>
tag.JavaScript testing
β¬ back to top
Security
Scan and check your web site
Best practices
β¬ back to top
Performance
Best practices
[ ] Minified HTML:
Your HTML is minified.
[ ] Lazy loading:
Images, scripts and CSS need to be lazy loaded to improve the response time of the current page (See details in their respective sections).
[ ] Cookie size:
If you are using cookies be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.
Preparing upcoming requests
dns-prefetch
.preconnect
.prefetch
.<body>
) in advance usingpreload
.Performance testing
β¬ back to top
Accessibility
Best practices
Headings
Semantics
Form
aria-label
instead.Accessibility testing
β¬ back to top
SEO
rel="prev"
andrel="next"
to indicate paginated content.