Web Development Checklist
This interactive checklist aims to give web developers a list of web development best practices in a single page that can be followed to ensure right progress towards a high quality website.
Code
-
Validate that If CSS IDs are used, they are unique to a page.
The id attribute specifies its element’s unique identifier (ID). The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character. The value must not contain any space characters.
- Docs
ID attribute Doc
- Docs
-
Validate that your CSS or SCSS files does not have lint errors
-
Docs
Online CSS linter -
Tools
Online CSS linter
Style lint
-
-
Validate that all CSS files are loaded before any JavaScript files in the HEAD.
-
Validate that all CSS files are printer friendly so that it is readable when printed on paper for offline reading.
- Docs
Printer friedly CSS
- Docs
-
Validate your CSS code to identify possible issues in CSS Code with a standard CSS validator tool and correct errors.
- Tools
Online W3C CSS validator
- Tools
-
Verify that CSS vendor prefixes are used and are generated accordingly with your browser support compatibility.
-
Doc Vendor Prefix
-
Tools Autoprefixer
-
-
Avoid using inline Javascript and CSS mixed with your html code
-
Validate your HTML code to identify possible issues in HTML with a standard W3C validator tool.
-
-
Check that there are no broken links on your websites page and there are that not any 404 error.
- Tools
W3C links validator
- Tools
-
Validate that all CSS files are non blocking.
-
Avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed
- Docs
BlockingJS
- Docs
-
Validate that all JavaScript,CSS and HTML files are minified correctly.
Performance
-
DNS lookup, resolution, TCP handshake and TLS negotiation with services that will be needed soon is done in advance during idle time using preconnect.
-
Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using prefetch.
-
Resources needed in the current page (e.g. scripts placed at the end of <body>) in advance using preload.
-
Enable compression on all Resources for HTTP requests to improve performance.
-
Make sure that your pages are tested with google pagespeed tool and have a score of at least 90/100.
Usability
-
Make sure that proper error pages are present for most common errors like 404, 4xx and 5xx.
-
Verify each favicon has been created and displays correctly.
-
Verify that in cases where focus is disabled, it is replaced by visible state in CSS for ease in identification by user.
-
Verify that all pages have an H1 which is not the title of the website also Headings should be used properly and in the right order (H1 to H6).
-
Make sure that a label is associated with each input form element. In case a label can’t be displayed, use aria-label instead.
-
Test your website using only your keyboard in a previsible order. All interactive elements are reachable and usable.
-
Verify that you have provided layout images 2x or 3x in order to support retina display.
-
Make sure that the website is using responsive web design
- Doc
Responsive
- Doc
-
Verify that all page have proper and meaningful titles.
-
Verify that the viewport is declared correctly.
Testing
-
-
Validate that all pages using structured data are tested and are without errors. Structured data helps crawlers understand the content in the current page.
-
Verify that all pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE…)
In case they are not then show proper browser support warning to website users.
-
Verify that all pages were tested on all current mobile browsers (Native browsers, Chrome, Safari…)
In case they are not then show proper browser support warning to website users.
-
Verify that all pages were tested on all current and popularly used OS versions.
In case they are not then show proper browser support warning to website users.
-
Make sure that all pages were tested with the correct breakpoints which are needed to be supported.
Best Practices
-
If case you are using cookies make sure that each cookie doesn’t exceed 4KB and your domain name doesn’t have more than 20 cookies.
-
Add proper checks to handle XSS attacks and CSRF on your site.
-
Add support for Logging and monitoring of Javascript and server errors for easy debugging of issues identified on testing and production environments
-
All images are optimized to be rendered in the browser quickly
- Docs
Optimizing Images doc by google
- Tools
Tinypng
- Docs
-
All
have an alternative text which describe the image visually.
-
All Images, scripts, videos ,CSS and external resources should be lazy loaded to improve the response time of the current page.
-
Verify that there are proper, unique and meaningful meta descriptions and doesn’t possess more than 150 characters.
-
Verify that the robots.txt is correct and not blocking webpages.
-
In case your website is has a blog or articles, make sure that an RSS link was provided.
-
Validate that a proper sitemap.xml exists and was submitted to Google Search Console
Also Validate that a proper sitemap html exists and is accessible in the footer of your website
-
Make sure that Webfont should be in correct format and loaded correctly also it should not exceed a size limit of 2 MBs including all variants.
WOFF, WOFF2 and TTF are supported by all modern browsers.