QA checklist
All our projects go through this checklist before launching
STYLE
Tittles
Each web page have one H1, and propers H2, H3, H4.
Colors
All colors are global, based on the design.
Typography
All typography is based on proper classes. Property sizes for responsive.
Buttons
Global buttons.
Global Margin & padding classes
Consistent spaces between all margins, paddings and distances; according to design.
Header and footer
Proper size of header and footer for all devices.
Favicon
Upload custom Fav Icon and web clip.
SEO & ACCESSIBILITY
H1
Every page should only have 1 H1.
Heading structure
Each page should follow a logical heading structure (H2 after H1, H3 after H2...).
Speed
Test in GT Metrix score for A.
Search console
Enable search console on the site.
Image alt texts
Alt texts should describe every image.
Language code
Add the language code(s) of the web page.
Images weight
Use optimized images (less than 150KB for images and 300KB for backgrounds) and/or webP.
Images format
Prefer using the 'img' element instead of setting a background image in a 'div'. All images should have width and height.
Meta description & title tag
It has individualized meta descriptions and title tags for each page.
Assign Tags
Assign corresponding tags for the Header, Footer, and all sections of the website
Form elements and links with associated labels
All elements in a form should have an associated label, also all links should have a label. It can be done with Custom attribute: aria-label
DESIGN AND USABILITY
Hover
All links, buttons and clickable cards have hover states. Elements which you cannot click cannot have hover states.
Linking pages
All links are linked to a page in the website or an outside link.
Footer
All pages from the project can be accessed from the footer or the navigation.
Interactions
All interactions shouldn't delay the way the usar interacts with the site. Content is more important.
Tablet and Mobile hover states
Elements shouldn't have hover states on tablet and mobile devices.
Images height
All images should have a maximum height.
Horizontal scroll
The site doesn't have horizontal scroll.
Responsive
Check every page on all devices.
Different browsers
Check pages on Google Chrome, Safari and Firefox.
OTHERS
Analytics
Install Google Analytics.
Spell check
With the client spell check the site.
404 page
404 error page implemented with the brand identity
Image preview social media
Ensure that the preview image of the URL web page on social media is appropriate. Check at the following link