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
WEBFLOW PERFORMANCE
Apply only for Webflow projects
Compress Assets Panel Images
Convert images to AVIF or WebP format in Assets panel using the compress function to reduce file sizes across the entire site.
Compress CMS Collection Images
Use the "Compress Assets" option in CMS collections to optimize all images within blog posts and collection items.
Optimize Background Videos
Keep background videos under 5MB, consider AV1 format, and use strategically on pages with high mobile traffic.
Minify Code Files
Enable HTML, CSS, and JavaScript minification in site settings under Publishing tab to reduce file sizes.
Clean Unused Styles
Use the broom icon in Style Selector to remove unused classes and reduce CSS file size.
Clean Unused Interactions
Remove unused interactions from the Interactions panel to reduce JavaScript overhead and improve loading speed.
Responsive Image Sizing
Use relative sizes (percentages for width) instead of fixed pixels to allow Webflow to serve appropriate image sizes per device.
Prefer Inline Images
Choose inline images over background images when possible to enable lazy loading and reduce bandwidth usage.