General Information (Intro)
Webflow is a website builder that provides ready-to-use blocks, making the assembly process simple and intuitive. With its tools, we can create online stores, landing pages, portfolios, or other types of projects.
Although Webflow is a no-code platform, it also offers advanced features for developers. Suggested front-end settings ensure that pages are automatically optimized for different devices.
Testing Webflow projects involves verifying the functionality, responsiveness, and performance of the website. The focus is on ensuring proper display across different devices and browsers, checking interactive elements, measuring page load speed, and confirming that pages match the original design.
Estimation
-
For simple standard projects, testing takes about 10% of the development time.
-
For projects with forms and animations, it is recommended to allocate around 15% of the development time for testing.
When estimating testing time, clarify whether a perfect pixel check is required. If yes, allocate at least 15% of the development time for testing.
Usually, Tablet Devices are out of scope, but this should be confirmed with the PM at the start of the project. If tablet testing is required, the estimate should also be 15% of development time.
Browsers & Devices
It is not necessary to test on all devices. Currently, most issues occur on macOS and iPhone (Safari).
|
Desktop |
Mobile |
|---|---|
|
Windows 11 + Chrome (the latest version) |
Android (optional) |
|
MacOS Tahoe + Safari (the latest version) MacOS Sequoia + Chrome (the latest version) |
iPhone + Safari iPhone + Chrome The latest and previous version of iOS |
Important Notes and Remarks
Performance and Optimization
Always pay attention to site performance. All images must be optimized:
-
high quality, no pixelation.
-
Ideally, the size shouldn't exceed 200 KB; (Slightly larger sizes are acceptable if image quality is too poor).
-
lazyload is recommended.
Reusable Blocks
If reusable blocks on different pages in Figma Design vary in color shades, font sizes, or spacing, follow the first version. Notify the PM and discuss with the developer.
Questions
If you have any questions, contact the developer or the QA Lead. If needed, you may also consult with Alec Shpigar
Useful Links
To perform a perfect pixel check, I recommend using the following extension: PerfectPixel by WellDoneCode.
To get the same layout as in the design, you can use the Responsive option in DevTools. Alternatively, you can add a custom device with your preferred name to the device list.
Leave a Reply
You must be logged in to post a comment.